[{"data":1,"prerenderedAt":884},["ShallowReactive",2],{"blog-post-/blog/using-stripe-with-nuxt/":3},{"id":4,"title":5,"body":6,"description":861,"extension":862,"meta":863,"navigation":154,"path":879,"seo":880,"sitemap":881,"stem":882,"__hash__":883},"content/blog/using-stripe-with-nuxt.md","How to Integrate Stripe Payments with Nuxt 3",{"type":7,"value":8,"toc":852},"minimark",[9,13,17,22,58,62,82,89,93,110,114,365,369,513,517,835,839,848],[10,11,5],"h1",{"id":12},"how-to-integrate-stripe-payments-with-nuxt-3",[14,15,16],"p",{},"Here's how to integrate Stripe payment processing into your Nuxt 3 application.",[18,19,21],"h2",{"id":20},"step-1-install-stripe-packages","Step 1: Install Stripe Packages",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install stripe\nnpm install @stripe/stripe-js\n","bash","",[30,31,32,48],"code",{"__ignoreMap":28},[33,34,37,41,45],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sBMFI","npm",[33,42,44],{"class":43},"sfazB"," install",[33,46,47],{"class":43}," stripe\n",[33,49,51,53,55],{"class":35,"line":50},2,[33,52,40],{"class":39},[33,54,44],{"class":43},[33,56,57],{"class":43}," @stripe/stripe-js\n",[18,59,61],{"id":60},"step-2-create-stripe-account-get-api-keys","Step 2: Create Stripe Account & Get API Keys",[14,63,64,65,72,73,77,78,81],{},"Go to ",[66,67,71],"a",{"href":68,"rel":69},"https://stripe.com",[70],"nofollow","stripe.com"," → Developers → API Keys. Copy the ",[74,75,76],"strong",{},"Publishable Key"," and ",[74,79,80],{},"Secret Key",".",[14,83,84],{},[85,86],"img",{"alt":87,"src":88},"Stripe API Keys","/img/stripe/stripe.png",[18,90,92],{"id":91},"step-3-set-environment-variables","Step 3: Set Environment Variables",[23,94,98],{"className":95,"code":96,"language":97,"meta":28,"style":28},"language-env shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","STRIPE_SECRET_KEY=your_stripe_secret_key\nSTRIPE_PUBLIC_KEY=your_stripe_public_key\n","env",[30,99,100,105],{"__ignoreMap":28},[33,101,102],{"class":35,"line":36},[33,103,104],{},"STRIPE_SECRET_KEY=your_stripe_secret_key\n",[33,106,107],{"class":35,"line":50},[33,108,109],{},"STRIPE_PUBLIC_KEY=your_stripe_public_key\n",[18,111,113],{"id":112},"step-4-create-payment-intent-serverapistripepaymentintentjs","Step 4: Create Payment Intent (server/api/stripe/paymentintent.js)",[23,115,119],{"className":116,"code":117,"language":118,"meta":28,"style":28},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { loadStripe } from '@stripe/stripe-js'\n\nexport default defineEventHandler(async (event) => {\n  const body = await readBody(event)\n  const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY)\n  return await stripe.paymentIntents.create({\n    amount: Number(body.amount),\n    currency: 'usd',\n    automatic_payment_methods: { enabled: true },\n  })\n})\n","js",[30,120,121,150,156,192,218,258,283,310,327,349,357],{"__ignoreMap":28},[33,122,123,127,131,135,138,141,144,147],{"class":35,"line":36},[33,124,126],{"class":125},"s7zQu","import",[33,128,130],{"class":129},"sMK4o"," {",[33,132,134],{"class":133},"sTEyZ"," loadStripe",[33,136,137],{"class":129}," }",[33,139,140],{"class":125}," from",[33,142,143],{"class":129}," '",[33,145,146],{"class":43},"@stripe/stripe-js",[33,148,149],{"class":129},"'\n",[33,151,152],{"class":35,"line":50},[33,153,155],{"emptyLinePlaceholder":154},true,"\n",[33,157,159,162,165,169,172,176,179,183,186,189],{"class":35,"line":158},3,[33,160,161],{"class":125},"export",[33,163,164],{"class":125}," default",[33,166,168],{"class":167},"s2Zo4"," defineEventHandler",[33,170,171],{"class":133},"(",[33,173,175],{"class":174},"spNyl","async",[33,177,178],{"class":129}," (",[33,180,182],{"class":181},"sHdIc","event",[33,184,185],{"class":129},")",[33,187,188],{"class":174}," =>",[33,190,191],{"class":129}," {\n",[33,193,195,198,201,204,207,210,213,215],{"class":35,"line":194},4,[33,196,197],{"class":174},"  const",[33,199,200],{"class":133}," body",[33,202,203],{"class":129}," =",[33,205,206],{"class":125}," await",[33,208,209],{"class":167}," readBody",[33,211,171],{"class":212},"swJcz",[33,214,182],{"class":133},[33,216,217],{"class":212},")\n",[33,219,221,223,226,228,231,233,236,239,241,244,247,249,251,253,256],{"class":35,"line":220},5,[33,222,197],{"class":174},[33,224,225],{"class":133}," stripe",[33,227,203],{"class":129},[33,229,230],{"class":167}," require",[33,232,171],{"class":212},[33,234,235],{"class":129},"'",[33,237,238],{"class":43},"stripe",[33,240,235],{"class":129},[33,242,243],{"class":212},")(",[33,245,246],{"class":133},"process",[33,248,81],{"class":129},[33,250,97],{"class":133},[33,252,81],{"class":129},[33,254,255],{"class":133},"STRIPE_SECRET_KEY",[33,257,217],{"class":212},[33,259,261,264,266,268,270,273,275,278,280],{"class":35,"line":260},6,[33,262,263],{"class":125},"  return",[33,265,206],{"class":125},[33,267,225],{"class":133},[33,269,81],{"class":129},[33,271,272],{"class":133},"paymentIntents",[33,274,81],{"class":129},[33,276,277],{"class":167},"create",[33,279,171],{"class":212},[33,281,282],{"class":129},"{\n",[33,284,286,289,292,295,297,300,302,305,307],{"class":35,"line":285},7,[33,287,288],{"class":212},"    amount",[33,290,291],{"class":129},":",[33,293,294],{"class":167}," Number",[33,296,171],{"class":212},[33,298,299],{"class":133},"body",[33,301,81],{"class":129},[33,303,304],{"class":133},"amount",[33,306,185],{"class":212},[33,308,309],{"class":129},",\n",[33,311,313,316,318,320,323,325],{"class":35,"line":312},8,[33,314,315],{"class":212},"    currency",[33,317,291],{"class":129},[33,319,143],{"class":129},[33,321,322],{"class":43},"usd",[33,324,235],{"class":129},[33,326,309],{"class":129},[33,328,330,333,335,337,340,342,346],{"class":35,"line":329},9,[33,331,332],{"class":212},"    automatic_payment_methods",[33,334,291],{"class":129},[33,336,130],{"class":129},[33,338,339],{"class":212}," enabled",[33,341,291],{"class":129},[33,343,345],{"class":344},"sfNiH"," true",[33,347,348],{"class":129}," },\n",[33,350,352,355],{"class":35,"line":351},10,[33,353,354],{"class":129},"  }",[33,356,217],{"class":212},[33,358,360,363],{"class":35,"line":359},11,[33,361,362],{"class":129},"}",[33,364,217],{"class":133},[18,366,368],{"id":367},"step-5-configure-nuxtconfigts","Step 5: Configure nuxt.config.ts",[23,370,374],{"className":371,"code":372,"language":373,"meta":28,"style":28},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  runtimeConfig: {\n    public: {\n      stripePk: process.env.STRIPE_PUBLIC_KEY,\n    },\n  },\n  app: {\n    head: {\n      script: [{ src: 'https://js.stripe.com/v3/', defer: true }],\n    },\n  },\n})\n","ts",[30,375,376,389,398,407,428,433,438,447,456,498,502,506],{"__ignoreMap":28},[33,377,378,380,382,385,387],{"class":35,"line":36},[33,379,161],{"class":125},[33,381,164],{"class":125},[33,383,384],{"class":167}," defineNuxtConfig",[33,386,171],{"class":133},[33,388,282],{"class":129},[33,390,391,394,396],{"class":35,"line":50},[33,392,393],{"class":212},"  runtimeConfig",[33,395,291],{"class":129},[33,397,191],{"class":129},[33,399,400,403,405],{"class":35,"line":158},[33,401,402],{"class":212},"    public",[33,404,291],{"class":129},[33,406,191],{"class":129},[33,408,409,412,414,417,419,421,423,426],{"class":35,"line":194},[33,410,411],{"class":212},"      stripePk",[33,413,291],{"class":129},[33,415,416],{"class":133}," process",[33,418,81],{"class":129},[33,420,97],{"class":133},[33,422,81],{"class":129},[33,424,425],{"class":133},"STRIPE_PUBLIC_KEY",[33,427,309],{"class":129},[33,429,430],{"class":35,"line":220},[33,431,432],{"class":129},"    },\n",[33,434,435],{"class":35,"line":260},[33,436,437],{"class":129},"  },\n",[33,439,440,443,445],{"class":35,"line":285},[33,441,442],{"class":212},"  app",[33,444,291],{"class":129},[33,446,191],{"class":129},[33,448,449,452,454],{"class":35,"line":312},[33,450,451],{"class":212},"    head",[33,453,291],{"class":129},[33,455,191],{"class":129},[33,457,458,461,463,466,469,472,474,476,479,481,484,487,489,491,493,496],{"class":35,"line":329},[33,459,460],{"class":212},"      script",[33,462,291],{"class":129},[33,464,465],{"class":133}," [",[33,467,468],{"class":129},"{",[33,470,471],{"class":212}," src",[33,473,291],{"class":129},[33,475,143],{"class":129},[33,477,478],{"class":43},"https://js.stripe.com/v3/",[33,480,235],{"class":129},[33,482,483],{"class":129},",",[33,485,486],{"class":212}," defer",[33,488,291],{"class":129},[33,490,345],{"class":344},[33,492,137],{"class":129},[33,494,495],{"class":133},"]",[33,497,309],{"class":129},[33,499,500],{"class":35,"line":351},[33,501,432],{"class":129},[33,503,504],{"class":35,"line":359},[33,505,437],{"class":129},[33,507,509,511],{"class":35,"line":508},12,[33,510,362],{"class":129},[33,512,217],{"class":133},[18,514,516],{"id":515},"step-6-initialize-stripe-on-the-frontend","Step 6: Initialize Stripe on the Frontend",[23,518,522],{"className":519,"code":520,"language":521,"meta":28,"style":28},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { loadStripe } from '@stripe/stripe-js'\n\nconst stripeInit = async () => {\n  const runtimeConfig = useRuntimeConfig()\n  const stripe = await loadStripe(String(runtimeConfig.public.stripePk))\n\n  const res = await useFetch('/api/stripe/paymentintent', {\n    method: 'POST',\n    body: { amount: total.value },\n  })\n\n  const clientSecret = res.data.value.client_secret\n  const elements = stripe.elements()\n  const card = elements.create('card', { hidePostalCode: true })\n  card.mount('#card-element')\n}\n\u003C/script>\n","vue",[30,523,524,538,556,560,581,596,631,635,662,678,702,708,712,738,757,797,819,825],{"__ignoreMap":28},[33,525,526,529,532,535],{"class":35,"line":36},[33,527,528],{"class":129},"\u003C",[33,530,531],{"class":212},"script",[33,533,534],{"class":174}," setup",[33,536,537],{"class":129},">\n",[33,539,540,542,544,546,548,550,552,554],{"class":35,"line":50},[33,541,126],{"class":125},[33,543,130],{"class":129},[33,545,134],{"class":133},[33,547,137],{"class":129},[33,549,140],{"class":125},[33,551,143],{"class":129},[33,553,146],{"class":43},[33,555,149],{"class":129},[33,557,558],{"class":35,"line":158},[33,559,155],{"emptyLinePlaceholder":154},[33,561,562,565,568,571,574,577,579],{"class":35,"line":194},[33,563,564],{"class":174},"const",[33,566,567],{"class":133}," stripeInit ",[33,569,570],{"class":129},"=",[33,572,573],{"class":174}," async",[33,575,576],{"class":129}," ()",[33,578,188],{"class":174},[33,580,191],{"class":129},[33,582,583,585,588,590,593],{"class":35,"line":220},[33,584,197],{"class":174},[33,586,587],{"class":133}," runtimeConfig",[33,589,203],{"class":129},[33,591,592],{"class":167}," useRuntimeConfig",[33,594,595],{"class":212},"()\n",[33,597,598,600,602,604,606,608,610,613,615,618,620,623,625,628],{"class":35,"line":260},[33,599,197],{"class":174},[33,601,225],{"class":133},[33,603,203],{"class":129},[33,605,206],{"class":125},[33,607,134],{"class":167},[33,609,171],{"class":212},[33,611,612],{"class":167},"String",[33,614,171],{"class":212},[33,616,617],{"class":133},"runtimeConfig",[33,619,81],{"class":129},[33,621,622],{"class":133},"public",[33,624,81],{"class":129},[33,626,627],{"class":133},"stripePk",[33,629,630],{"class":212},"))\n",[33,632,633],{"class":35,"line":285},[33,634,155],{"emptyLinePlaceholder":154},[33,636,637,639,642,644,646,649,651,653,656,658,660],{"class":35,"line":312},[33,638,197],{"class":174},[33,640,641],{"class":133}," res",[33,643,203],{"class":129},[33,645,206],{"class":125},[33,647,648],{"class":167}," useFetch",[33,650,171],{"class":212},[33,652,235],{"class":129},[33,654,655],{"class":43},"/api/stripe/paymentintent",[33,657,235],{"class":129},[33,659,483],{"class":129},[33,661,191],{"class":129},[33,663,664,667,669,671,674,676],{"class":35,"line":329},[33,665,666],{"class":212},"    method",[33,668,291],{"class":129},[33,670,143],{"class":129},[33,672,673],{"class":43},"POST",[33,675,235],{"class":129},[33,677,309],{"class":129},[33,679,680,683,685,687,690,692,695,697,700],{"class":35,"line":351},[33,681,682],{"class":212},"    body",[33,684,291],{"class":129},[33,686,130],{"class":129},[33,688,689],{"class":212}," amount",[33,691,291],{"class":129},[33,693,694],{"class":133}," total",[33,696,81],{"class":129},[33,698,699],{"class":133},"value",[33,701,348],{"class":129},[33,703,704,706],{"class":35,"line":359},[33,705,354],{"class":129},[33,707,217],{"class":212},[33,709,710],{"class":35,"line":508},[33,711,155],{"emptyLinePlaceholder":154},[33,713,715,717,720,722,724,726,729,731,733,735],{"class":35,"line":714},13,[33,716,197],{"class":174},[33,718,719],{"class":133}," clientSecret",[33,721,203],{"class":129},[33,723,641],{"class":133},[33,725,81],{"class":129},[33,727,728],{"class":133},"data",[33,730,81],{"class":129},[33,732,699],{"class":133},[33,734,81],{"class":129},[33,736,737],{"class":133},"client_secret\n",[33,739,741,743,746,748,750,752,755],{"class":35,"line":740},14,[33,742,197],{"class":174},[33,744,745],{"class":133}," elements",[33,747,203],{"class":129},[33,749,225],{"class":133},[33,751,81],{"class":129},[33,753,754],{"class":167},"elements",[33,756,595],{"class":212},[33,758,760,762,765,767,769,771,773,775,777,780,782,784,786,789,791,793,795],{"class":35,"line":759},15,[33,761,197],{"class":174},[33,763,764],{"class":133}," card",[33,766,203],{"class":129},[33,768,745],{"class":133},[33,770,81],{"class":129},[33,772,277],{"class":167},[33,774,171],{"class":212},[33,776,235],{"class":129},[33,778,779],{"class":43},"card",[33,781,235],{"class":129},[33,783,483],{"class":129},[33,785,130],{"class":129},[33,787,788],{"class":212}," hidePostalCode",[33,790,291],{"class":129},[33,792,345],{"class":344},[33,794,137],{"class":129},[33,796,217],{"class":212},[33,798,800,803,805,808,810,812,815,817],{"class":35,"line":799},16,[33,801,802],{"class":133},"  card",[33,804,81],{"class":129},[33,806,807],{"class":167},"mount",[33,809,171],{"class":212},[33,811,235],{"class":129},[33,813,814],{"class":43},"#card-element",[33,816,235],{"class":129},[33,818,217],{"class":212},[33,820,822],{"class":35,"line":821},17,[33,823,824],{"class":129},"}\n",[33,826,828,831,833],{"class":35,"line":827},18,[33,829,830],{"class":129},"\u003C/",[33,832,531],{"class":212},[33,834,537],{"class":129},[18,836,838],{"id":837},"conclusion","Conclusion",[14,840,841,842,847],{},"For a full working example, check out the ",[66,843,846],{"href":844,"rel":845},"https://github.com/karadanay7/aliexpress-clone",[70],"AliExpress Clone project",". Happy coding!",[849,850,851],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":28,"searchDepth":50,"depth":50,"links":853},[854,855,856,857,858,859,860],{"id":20,"depth":50,"text":21},{"id":60,"depth":50,"text":61},{"id":91,"depth":50,"text":92},{"id":112,"depth":50,"text":113},{"id":367,"depth":50,"text":368},{"id":515,"depth":50,"text":516},{"id":837,"depth":50,"text":838},"Step-by-step guide to integrate Stripe payment processing with Nuxt 3. Covers Stripe API setup, environment variables, payment intents, and card element implementation.","md",{"author":864,"date":865,"image":866,"category":867,"tags":868,"featured":878,"draft":878},"Aysegul Karadan","2023-09-15T10:00:00.000Z","/img/stripe/stripe1.png","Web Development",[238,869,870,871,872,873,874,875,876,877],"nuxt","payments","tutorial","stripe-nuxt3","how-to-integrate-stripe-nuxt","stripe-payment-nuxt3","stripe-checkout-nuxt","nuxt3-payment-gateway","stripe-api-nuxt",false,"/blog/using-stripe-with-nuxt",{"title":5,"description":861},{"loc":879},"blog/using-stripe-with-nuxt","_S9EIeNp49E8H8M31LYesA1UWSOj1HQ6fEx0O1tjC1A",1782986782866]