"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[3240],{1359:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>d,default:()=>h,frontMatter:()=>o,metadata:()=>s,toc:()=>l});const s=JSON.parse('{"id":"integration-stripe","title":"Stripe Integration","description":"How to Integrate Stripe?","source":"@site/Integration/006.integration-stripe.md","sourceDirName":".","slug":"/integration-stripe","permalink":"/guides/integration/integration-stripe","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":6,"frontMatter":{"sidebar_position":6},"sidebar":"sidebar","previous":{"title":"Supabase Integration","permalink":"/guides/integration/integration-supabase"},"next":{"title":"Supabase Edge functions Integration","permalink":"/guides/integration/integration-supabase-edge-function"}}');var i=n(4848),a=n(8453),r=n(8175);const o={sidebar_position:6},d="Stripe Integration",c={},l=[{value:"How to Integrate Stripe?",id:"how-to-integrate-stripe",level:2},{value:"Use Stripe Payment Links",id:"use-stripe-payment-links",level:2},{value:"Advanced Integration: Webhooks & Database",id:"advanced-integration-webhooks--database",level:2},{value:"Enable Database",id:"enable-database",level:3},{value:"Securely Add API Keys",id:"securely-add-api-keys",level:3},{value:"Testing Your Integration",id:"testing-your-integration",level:3}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"stripe-integration",children:"Stripe Integration"})}),"\n",(0,i.jsx)(t.h2,{id:"how-to-integrate-stripe",children:"How to Integrate Stripe?"}),"\n",(0,i.jsxs)(t.p,{children:["There are multiple ways to integrate Stripe into your ",(0,i.jsx)(r.A,{})," project. The most straightforward way is to use Stripe's built-in payment links for simple and fast checkout."]}),"\n",(0,i.jsx)(t.h2,{id:"use-stripe-payment-links",children:"Use Stripe Payment Links"}),"\n",(0,i.jsx)(t.p,{children:"To streamline your checkout process, consider using Stripe Payment Links. These no-code solutions make it easy to create a fully functional checkout process. You can easily integrate them directly into your website."}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["Log in or create your ",(0,i.jsx)(t.a,{href:"https://dashboard.stripe.com/",children:"Stripe account"})," if you don't already have one."]}),"\n",(0,i.jsxs)(t.li,{children:["Visit your ",(0,i.jsx)(t.a,{href:"https://dashboard.stripe.com/",children:"Stripe dashboard"}),". In the top right corner, there is a switch for test mode, make sure test mode is off.\n",(0,i.jsx)(t.img,{alt:"Stripe Test Mode",src:n(2568).A+"",width:"962",height:"67"})]}),"\n",(0,i.jsxs)(t.li,{children:["Create a Payment Link by clicking Payment Links > New.\n",(0,i.jsx)(t.img,{alt:"Stripe Payment Link",src:n(5445).A+"",width:"1154",height:"286"})]}),"\n",(0,i.jsxs)(t.li,{children:["Configure products and options. Select a previously created product, or add one or more products if you don't have any yet. You can also adjust other options, such as whether to collect the customer's address or phone number, to customize the checkout experience. For more information on customization, refer to the ",(0,i.jsx)(t.a,{href:"https://docs.stripe.com/payment-links/create",children:"Stripe documentation"}),".\n",(0,i.jsx)(t.img,{alt:"Stripe Create Payment Link",src:n(8774).A+"",width:"1210",height:"829"})]}),"\n",(0,i.jsxs)(t.li,{children:["Copy the Payment Link and bring it over to ",(0,i.jsx)(r.A,{}),".\n",(0,i.jsx)(t.img,{alt:"Stripe Copy Payment Link",src:n(3659).A+"",width:"800",height:"186"})]}),"\n",(0,i.jsxs)(t.li,{children:["Use the following prompt in ",(0,i.jsx)(r.A,{})," to integrate the link:"]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{children:"add Stripe payments to my app using this payment link: [your payment link]\n"})}),"\n",(0,i.jsx)(t.h2,{id:"advanced-integration-webhooks--database",children:"Advanced Integration: Webhooks & Database"}),"\n",(0,i.jsx)(t.h3,{id:"enable-database",children:"Enable Database"}),"\n",(0,i.jsxs)(t.p,{children:["We offer three options for connecting to a database: (",(0,i.jsx)(t.strong,{children:"Note:"})," Once the database is set up, it can neither be shut down nor have its type changed)"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsxs)(t.strong,{children:[(0,i.jsx)(r.A,{}),"Database:"]}),' Click "Enable Database" button, choose "EZsite Database" Database Type, it Leverages our built-in database for effortless data storage and management, requiring no additional configuration.\n',(0,i.jsx)(t.img,{src:n(9696).A+"",width:"1143",height:"546"})]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Supabase Database:"}),' Click "Enable Database" button, choose "Supabase Database" Database Type, Connect your own Supabase database to store and manage your application data. Level up with advanced features like subscriptions, real-time updates, and third-party authenticationFor setup instructions, visit: ',(0,i.jsx)(t.a,{href:"/integration/integration-supabase",children:"Integration with Supabase"}),"\n",(0,i.jsx)(t.img,{src:n(6139).A+"",width:"1170",height:"820"})]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Custom Database:"}),' Click "Enable Database" button, choose "Custom Database" Database Type, You can set up your own PostgreSQL database to Connect and manage external PostgreSQL databases directly, with full SQL query support and enterprise-grade scalability. For setup instructions, visit: ',(0,i.jsx)(t.a,{href:"/user/getting-started/set-up-custom-db",children:"Set Up Custom Database"}),"\n",(0,i.jsx)(t.img,{src:n(4585).A+"",width:"1172",height:"750"})]}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"securely-add-api-keys",children:"Securely Add API Keys"}),"\n",(0,i.jsx)(t.p,{children:"To integrate Stripe securely, avoid sharing your API key directly in chat. Instead:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsx)(t.li,{children:"Go to Stripe Dashboard > Developers > API Keys."}),"\n",(0,i.jsx)(t.li,{children:"Copy the Secret Key (DO NOT paste it directly in Lovable chat)."}),"\n",(0,i.jsxs)(t.li,{children:["Use the ",(0,i.jsx)(r.A,{})," \u201cStripe\u201d feature to securely store it."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:n(4545).A+"",width:"1012",height:"721"})}),"\n",(0,i.jsx)(t.h3,{id:"testing-your-integration",children:"Testing Your Integration"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsx)(t.li,{children:"Use Stripe\u2019s Test Mode to safely test payments."}),"\n",(0,i.jsxs)(t.li,{children:["Test card details:","\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Card Number: 4242 4242 4242 4242"}),"\n",(0,i.jsx)(t.li,{children:"Any future expiration date"}),"\n",(0,i.jsx)(t.li,{children:"Any 3-digit CVC"}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.li,{children:"Deploy your app."}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},2568:(e,t,n)=>{n.d(t,{A:()=>s});const s=n.p+"assets/images/integration-stripe-test-mode-baeff77badc28b85032101d753ad683e.png"},3659:(e,t,n)=>{n.d(t,{A:()=>s});const s=n.p+"assets/images/integration-stripe-copy-payment-link-cad417f3d52a46d549c83f9111706b47.png"},4545:(e,t,n)=>{n.d(t,{A:()=>s});const s=n.p+"assets/images/integration-stripe-setapikey-485f2a2086f86964e6bcf9ca2cb8c209.png"},4585:(e,t,n)=>{n.d(t,{A:()=>s});const s=n.p+"assets/images/customdatabase-b7bd30adb927f4e0ffbef968f15dacc5.png"},5445:(e,t,n)=>{n.d(t,{A:()=>s});const s=n.p+"assets/images/integration-stripe-payment-link-cdb6835f61a5898a7567f84454e3485f.png"},6139:(e,t,n)=>{n.d(t,{A:()=>s});const s=n.p+"assets/images/supabass-addfc4b8381dcc0eabecd1397b4a5c17.png"},8175:(e,t,n)=>{n.d(t,{A:()=>i});n(6540);var s=n(4848);function i(){return(0,s.jsx)("code",{children:"EZsite"})}},8453:(e,t,n)=>{n.d(t,{R:()=>r,x:()=>o});var s=n(6540);const i={},a=s.createContext(i);function r(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),s.createElement(a.Provider,{value:t},e.children)}},8774:(e,t,n)=>{n.d(t,{A:()=>s});const s=n.p+"assets/images/integration-stripe-create-payment-link-224d2b8ed1abf084150268ffa4eb50a2.png"},9696:(e,t,n)=>{n.d(t,{A:()=>s});const s=n.p+"assets/images/ezsitedatabase-20cccfc319a68ed6e43f83bd04bef698.png"}}]);