"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[1272],{7913:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>s,toc:()=>p});const s=JSON.parse('{"id":"stripe-active-pieces-integration","title":"Stripe Integration","description":"Step 1: Setting Up Stripe Payments API for Your Chatbot Through ActivePieces","source":"@site/Integration/008.stripe-active-pieces-integration.md","sourceDirName":".","slug":"/stripe-active-pieces-integration","permalink":"/guides/integration/stripe-active-pieces-integration","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":8,"frontMatter":{"sidebar_position":8},"sidebar":"sidebar","previous":{"title":"GoHighLevel Chat Integration","permalink":"/guides/integration/ghl-chat-integration"},"next":{"title":"White Label Payment Process - 3rd Party Payment","permalink":"/guides/integration/custom-payment-integration"}}');var n=i(4848),o=i(8453),c=(i(9357),i(8175));const r={sidebar_position:8},a="Stripe Integration",l={},p=[{value:"Step 1: Setting Up Stripe Payments API for Your Chatbot Through ActivePieces",id:"step-1-setting-up-stripe-payments-api-for-your-chatbot-through-activepieces",level:2},{value:"Step 1: Adding Your Product to Stripe",id:"step-1-adding-your-product-to-stripe",level:3},{value:"Step 2: Setting Up Pricing",id:"step-2-setting-up-pricing",level:3},{value:"Step 3: Creating a Test Product",id:"step-3-creating-a-test-product",level:3},{value:"Step 4: Setting Up the Payment Flow",id:"step-4-setting-up-the-payment-flow",level:3},{value:"Step 5: Connecting to <CompanyNameDisplay></CompanyNameDisplay>",id:"step-5-connecting-to-",level:3},{value:"Step 2: Payment Success Notifications - Stripe Example",id:"step-2-payment-success-notifications---stripe-example",level:2},{value:"Step 1: Get the Template",id:"step-1-get-the-template",level:3},{value:"Step 2: Import the Template",id:"step-2-import-the-template",level:3},{value:"Step 3: Set Up Payment Connection with NewOaks API",id:"step-3-set-up-payment-connection-with-newoaks-api",level:3},{value:"Step 4: Publish the Webhook URL",id:"step-4-publish-the-webhook-url",level:3},{value:"Step 5: Connect to Stripe Event Listeners",id:"step-5-connect-to-stripe-event-listeners",level:3},{value:"Step 3: Subscription Management (Optional) - Stripe Example",id:"step-3-subscription-management-optional---stripe-example",level:2},{value:"Step 1: Setting Up the Get Subscription Info Flow",id:"step-1-setting-up-the-get-subscription-info-flow",level:3},{value:"Step 2: Setting Up the Update Subscription Flow",id:"step-2-setting-up-the-update-subscription-flow",level:3},{value:"Step 3: Setting Up the Cancel Subscription Flow",id:"step-3-setting-up-the-cancel-subscription-flow",level:3},{value:"Step 4: Connecting to <CompanyNameDisplay></CompanyNameDisplay>",id:"step-4-connecting-to-",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"stripe-integration",children:"Stripe Integration"})}),"\n",(0,n.jsx)(t.h2,{id:"step-1-setting-up-stripe-payments-api-for-your-chatbot-through-activepieces",children:"Step 1: Setting Up Stripe Payments API for Your Chatbot Through ActivePieces"}),"\n",(0,n.jsx)(t.h3,{id:"step-1-adding-your-product-to-stripe",children:"Step 1: Adding Your Product to Stripe"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsx)(t.li,{children:"Go to the Stripe website and log in."}),"\n",(0,n.jsx)(t.li,{children:'On the left side menu, click on "Product Catalog".'}),"\n",(0,n.jsxs)(t.li,{children:['Click the "Add product" button on the right side of the page.\n',(0,n.jsx)(t.img,{src:i(3053).A+"",width:"2000",height:"842"})]}),"\n",(0,n.jsxs)(t.li,{children:["Fill in the details about your product (name, description, etc.).\n",(0,n.jsx)(t.img,{src:i(546).A+"",width:"2000",height:"2125"})]}),"\n",(0,n.jsx)(t.li,{children:'Click "Add product" to save.'}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"step-2-setting-up-pricing",children:"Step 2: Setting Up Pricing"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["In your product list, click on the product you just added.\n",(0,n.jsx)(t.img,{src:i(2224).A+"",width:"2000",height:"851"})]}),"\n",(0,n.jsxs)(t.li,{children:['Look for the "Add price" button and click it.\n',(0,n.jsx)(t.img,{src:i(4203).A+"",width:"2000",height:"650"})]}),"\n",(0,n.jsxs)(t.li,{children:["Enter the price details (amount, currency, billing period if applicable).\n",(0,n.jsx)(t.img,{src:i(6338).A+"",width:"2000",height:"3978"})]}),"\n",(0,n.jsx)(t.li,{children:'Click "Add price" to save.'}),"\n",(0,n.jsxs)(t.li,{children:["Repeat this process for all the plans listed in your ",(0,n.jsx)(c.A,{})," PricePlan List.\n",(0,n.jsx)(t.img,{src:i(8900).A+"",width:"2000",height:"1413"})]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"step-3-creating-a-test-product",children:"Step 3: Creating a Test Product"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:['Create a special price called "TestProductPrice".\n',(0,n.jsx)(t.img,{src:i(6177).A+"",width:"2000",height:"2863"})]}),"\n",(0,n.jsx)(t.li,{children:"Set its price to a very small amount (like $0.01)."}),"\n",(0,n.jsx)(t.li,{children:"This is just for testing - you can delete it later."}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"step-4-setting-up-the-payment-flow",children:"Step 4: Setting Up the Payment Flow"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsx)(t.li,{children:"We'll use a no-code platform tool called ActivePieces, but you can use any similar tool you're comfortable with."}),"\n",(0,n.jsxs)(t.li,{children:["Download the template from: ",(0,n.jsx)(t.a,{href:"https://cdn.newoaks.ai/newoaks/activepieces_json/Stripe_Checkout.json",children:"Stripe_Checkout"})]}),"\n",(0,n.jsxs)(t.li,{children:['In ActivePieces, click "Import Flow" and select the file you just downloaded.\n',(0,n.jsx)(t.img,{src:i(9144).A+"",width:"2000",height:"890"})]}),"\n",(0,n.jsxs)(t.li,{children:["You'll need to enter your Stripe API Secret key in the appropriate field.\n",(0,n.jsx)(t.img,{src:i(8135).A+"",width:"2000",height:"1107"})]}),"\n",(0,n.jsxs)(t.li,{children:["Paste Secret Key into the red box below and replace the text in quotation marks:\n",(0,n.jsx)(t.img,{src:i(8910).A+"",width:"1322",height:"953"})]}),"\n",(0,n.jsxs)(t.li,{children:['Click "Publish" to make your flow live.\n',(0,n.jsx)(t.img,{src:i(6042).A+"",width:"2000",height:"1401"})]}),"\n"]}),"\n",(0,n.jsxs)(t.h3,{id:"step-5-connecting-to-",children:["Step 5: Connecting to ",(0,n.jsx)(c.A,{})]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["After publishing, you'll get a webhook URL.\n",(0,n.jsx)(t.img,{src:i(6625).A+"",width:"2000",height:"1387"})]}),"\n",(0,n.jsx)(t.li,{children:'Add "/sync" to the end of this URL for response return.'}),"\n",(0,n.jsxs)(t.li,{children:["Go to your ",(0,n.jsx)(c.A,{}),' settings and paste this full URL into the "Payment API URL" field.\n',(0,n.jsx)(t.img,{src:i(1862).A+"",width:"2000",height:"1442"})]}),"\n",(0,n.jsxs)(t.li,{children:['Click "Verify Payment API" to test the connection.\n',(0,n.jsx)(t.img,{src:i(5750).A+"",width:"2000",height:"1453"})]}),"\n",(0,n.jsxs)(t.li,{children:['If successful, click "Save" to finish the setup.\n',(0,n.jsx)(t.img,{src:i(2687).A+"",width:"1322",height:"953"})]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["That's it! You've now set up Stripe payments for your ",(0,n.jsx)(c.A,{})," Chatbot. Remember, if you need help, don't hesitate to ask for assistance."]}),"\n",(0,n.jsx)(t.h2,{id:"step-2-payment-success-notifications---stripe-example",children:"Step 2: Payment Success Notifications - Stripe Example"}),"\n",(0,n.jsx)(t.p,{children:"This guide will help you set up a system that notifies you when a payment is successful using Stripe."}),"\n",(0,n.jsx)(t.h3,{id:"step-1-get-the-template",children:"Step 1: Get the Template"}),"\n",(0,n.jsxs)(t.p,{children:["First, you need to download a special file (called a template) that contains instructions for this process.\nYou can get it from this link: ",(0,n.jsx)(t.a,{href:"https://cdn.newoaks.ai/newoaks/activepieces_json/Stripe_InvoicePaid.json",children:"Stripe_InvoicePaid"})]}),"\n",(0,n.jsx)(t.h3,{id:"step-2-import-the-template",children:"Step 2: Import the Template"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsx)(t.li,{children:"Open your payment management tool (Active Pieces in this example)."}),"\n",(0,n.jsxs)(t.li,{children:['Look for an "Import" button and click it.\n',(0,n.jsx)(t.img,{src:i(6886).A+"",width:"2000",height:"890"})]}),"\n",(0,n.jsxs)(t.li,{children:["Choose the file you just downloaded.\n",(0,n.jsx)(t.img,{src:i(9776).A+"",width:"1322",height:"953"})]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"step-3-set-up-payment-connection-with-newoaks-api",children:"Step 3: Set Up Payment Connection with NewOaks API"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.code,{children:"'newoaks_api_url': 'https://usapi.hottask.com/chat/Chatbot/PaymentWebHook'"})}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"'newoaks_api_key': '<YOUR-NEWOAKS-API-KEY>'"})," The key for authenticating the API request (found on the Workspace -> Webhooks API -> chatrobot-sessionkey)."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"These are like a special address and password for your payment system."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:i(3031).A+"",width:"2000",height:"1443"})}),"\n",(0,n.jsx)(t.h3,{id:"step-4-publish-the-webhook-url",children:"Step 4: Publish the Webhook URL"}),"\n",(0,n.jsx)(t.p,{children:'Look for the "Publish" button and click it.'}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:i(3387).A+"",width:"2000",height:"1401"})}),"\n",(0,n.jsx)(t.p,{children:"After publishing, you'll get a webhook live URL."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:i(1596).A+"",width:"2000",height:"1387"})}),"\n",(0,n.jsx)(t.h3,{id:"step-5-connect-to-stripe-event-listeners",children:"Step 5: Connect to Stripe Event Listeners"}),"\n",(0,n.jsx)(t.p,{children:"Now we need to tell Stripe (the payment processor) to send notifications to your new system."}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["Go to the Stripe website webhook pageg:\n",(0,n.jsx)(t.img,{src:"https://dashboard.stripe.com/webhooks",alt:"https://dashboard.stripe.com/webhooks"})]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:i(5425).A+"",width:"2000",height:"862"})}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsx)(t.li,{children:'Look for Add endpoint button to add a new "webhook" (that\'s what Stripe calls these notifications)'}),"\n",(0,n.jsx)(t.li,{children:'Copy the webhook live URL from Step4; Add "/sync" to the end of this URL for response return.'}),"\n",(0,n.jsx)(t.li,{children:"Paste the URL to the Endpoint URL input box."}),"\n",(0,n.jsx)(t.li,{children:'Under "Select events", choose "invoice.paid"'}),"\n",(0,n.jsx)(t.li,{children:"Click Add Endpoint to save it."}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:i(1212).A+"",width:"2000",height:"2155"})}),"\n",(0,n.jsx)(t.p,{children:"This tells Stripe to notify your system whenever an invoice is paid."}),"\n",(0,n.jsx)(t.p,{children:"That's it! Your system is now set up to receive notifications when a payment is successful."}),"\n",(0,n.jsx)(t.p,{children:"Remember, if you're not familiar with these tools, it might be a good idea to ask for help from someone with technical experience to ensure everything is set up correctly."}),"\n",(0,n.jsx)(t.h2,{id:"step-3-subscription-management-optional---stripe-example",children:"Step 3: Subscription Management (Optional) - Stripe Example"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.strong,{children:"We'll use a no-code platform tool called ActivePieces, but you can use any similar tool you're comfortable with."})}),"\n",(0,n.jsx)(t.h3,{id:"step-1-setting-up-the-get-subscription-info-flow",children:"Step 1: Setting Up the Get Subscription Info Flow"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["Download the template from: ",(0,n.jsx)(t.a,{href:"https://cdn.newoaks.ai/newoaks/activepieces_json/Stripe_GetSubscription.json",children:"Stripe_SubscriptionInfo"})]}),"\n",(0,n.jsxs)(t.li,{children:['In ActivePieces, click "Import Flow" and select the file you just downloaded.\n',(0,n.jsx)(t.img,{src:i(9144).A+"",width:"2000",height:"890"})]}),"\n",(0,n.jsxs)(t.li,{children:["You'll need to enter your Stripe API Secret key in the appropriate field.\n",(0,n.jsx)(t.img,{src:i(8135).A+"",width:"2000",height:"1107"})]}),"\n",(0,n.jsxs)(t.li,{children:["Paste Secret Key into the red box below and replace the text in quotation marks:\n",(0,n.jsx)(t.img,{src:i(3090).A+"",width:"1197",height:"953"})]}),"\n",(0,n.jsxs)(t.li,{children:['Click "Publish" to make your flow live.\n',(0,n.jsx)(t.img,{src:i(6042).A+"",width:"2000",height:"1401"})]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"step-2-setting-up-the-update-subscription-flow",children:"Step 2: Setting Up the Update Subscription Flow"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["Download the template from: ",(0,n.jsx)(t.a,{href:"https://cdn.newoaks.ai/newoaks/activepieces_json/Stripe_UpdateSubscription.json",children:"Stripe_UpdateSubscription"})]}),"\n",(0,n.jsxs)(t.li,{children:['In ActivePieces, click "Import Flow" and select the file you just downloaded.\n',(0,n.jsx)(t.img,{src:i(9144).A+"",width:"2000",height:"890"})]}),"\n",(0,n.jsxs)(t.li,{children:["You'll need to enter your Stripe API Secret key in the appropriate field.\n",(0,n.jsx)(t.img,{src:i(8135).A+"",width:"2000",height:"1107"})]}),"\n",(0,n.jsxs)(t.li,{children:["Paste Secret Key into the red box below and replace the text in quotation marks:\n",(0,n.jsx)(t.img,{src:i(6157).A+"",width:"1197",height:"953"})]}),"\n",(0,n.jsxs)(t.li,{children:['Click "Publish" to make your flow live.\n',(0,n.jsx)(t.img,{src:i(6042).A+"",width:"2000",height:"1401"})]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"step-3-setting-up-the-cancel-subscription-flow",children:"Step 3: Setting Up the Cancel Subscription Flow"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["Download the template from: ",(0,n.jsx)(t.a,{href:"https://cdn.newoaks.ai/newoaks/activepieces_json/Stripe_CancelSubscription.json",children:"Stripe_CancelSubscription"})]}),"\n",(0,n.jsxs)(t.li,{children:['In ActivePieces, click "Import Flow" and select the file you just downloaded.\n',(0,n.jsx)(t.img,{src:i(9144).A+"",width:"2000",height:"890"})]}),"\n",(0,n.jsxs)(t.li,{children:["You'll need to enter your Stripe API Secret key in the appropriate field.\n",(0,n.jsx)(t.img,{src:i(8135).A+"",width:"2000",height:"1107"})]}),"\n",(0,n.jsxs)(t.li,{children:["Paste Secret Key into the red box below and replace the text in quotation marks:\n",(0,n.jsx)(t.img,{src:i(616).A+"",width:"1194",height:"950"})]}),"\n",(0,n.jsxs)(t.li,{children:['Click "Publish" to make your flow live.\n',(0,n.jsx)(t.img,{src:i(6042).A+"",width:"2000",height:"1401"})]}),"\n"]}),"\n",(0,n.jsxs)(t.h3,{id:"step-4-connecting-to-",children:["Step 4: Connecting to ",(0,n.jsx)(c.A,{})]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["After publishing, you'll get a webhook URL.\n",(0,n.jsx)(t.img,{src:i(6625).A+"",width:"2000",height:"1387"})]}),"\n",(0,n.jsx)(t.li,{children:'Add "/sync" to the end of this URL for response return.'}),"\n",(0,n.jsxs)(t.li,{children:["Go to your ",(0,n.jsx)(c.A,{})," settings and paste this full URL into the corresponding fields.\n",(0,n.jsx)(t.img,{src:i(3916).A+"",width:"1197",height:"953"})]}),"\n",(0,n.jsxs)(t.li,{children:['Click "Verify Subscription Details API" to test the connection.\n',(0,n.jsx)(t.img,{src:i(4679).A+"",width:"1197",height:"953"})]}),"\n",(0,n.jsx)(t.li,{children:"Follow the above steps to configure the remaining two webhooks together."}),"\n",(0,n.jsxs)(t.li,{children:['Click "Save" to finish the setup.\n',(0,n.jsx)(t.img,{src:i(2687).A+"",width:"1322",height:"953"})]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"Note: Follow the steps to correctly fill in the webhook addresses of the three Flows into the corresponding input boxes, and verify that the subscription management configuration is completed."})]})}function d(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},8175:(e,t,i)=>{i.d(t,{A:()=>o});i(6540);var s=i(5872),n=i(4848);function o(){let e=(0,s.K)()();return["newoaks.ai","www.newoaks.ai","eu.newoaks.ai"].includes(e)&&(e="NewOaks AI"),"appointify.ai"===e&&(e="Appointify AI"),(0,n.jsx)("code",{children:e})}},9357:(e,t,i)=>{i.d(t,{A:()=>c});i(6540);var s=i(5872),n=i(5363),o=i(4848);function c(e){let{children:t}=e;return(0,o.jsx)(n.A,{children:()=>{const e=(0,s.K)()();if("function"==typeof t){const i=t(e);return(0,o.jsx)("div",{className:"markdown markdown--section",children:i})}return(0,o.jsx)("code",{children:e})}})}},5872:(e,t,i)=>{function s(){return function(){return"undefined"==typeof window?"":window.location.hostname}}i.d(t,{K:()=>s})},3053:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step1_3-8386c4b7f6a4d638e49eba9aa99bad42.png"},546:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step1_4-7c84397892450c9806a53a0bc71f8e10.png"},2224:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step2_1-cc0ac16f179dae03220a36ea08396eaa.png"},6886:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step2_2-8272e81e-bc0aa59ecf837e1cf552a14a1333ccd5.png"},4203:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step2_2-b8e1dcc5af690eaab98206ceb55331d3.png"},9776:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step2_3-b48fcfcc-2259f320e66e368d7d2b72780a788154.png"},6338:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step2_3-9d5da7904c32c3f4aff905277f6c2147.png"},8900:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step2_5-904136fb1538d1ebaed68b0547470108.png"},3031:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step3-db18905b-f4c2dbe7301ff62c45e9b87987795f99.png"},6177:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step3_1-c77c7db921f07ce3e9534a846af6c6c0.png"},3090:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step3_step1_4-f78292f6e7cfab8fcc6c8dda1a97939b.png"},6157:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step3_step2_4-955b2d6995aac9e2f96dff60af09ac5e.jpg"},616:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step3_step3_4-2dac4b76141fc990f838f153e266e054.jpg"},3916:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step3_step4_3-731b11ff8da848277f412b0819cad23a.jpg"},4679:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step3_step4_4-f9ad192eae898485c0139ca7e96f7348.jpg"},3387:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step4_1-e1dee6f2-808bb53e30692920e7155b099fae2831.png"},6042:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step4_1-808bb53e30692920e7155b099fae2831.png"},1596:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step4_2-988a0b31-e40d0f10c5bbf2209c6c8c01ce9cdf21.png"},6625:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step4_2-e40d0f10c5bbf2209c6c8c01ce9cdf21.png"},9144:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step4_3-bc0aa59ecf837e1cf552a14a1333ccd5.png"},8135:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step4_4-0ec710560206782facf05260d093bc89.png"},8910:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step4_5-8591a55a5a3d1dfab1e19f1bfb3bc2ff.png"},5425:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step5_1-42149841-0160ff4928ed97d5d762ec7835a4bbf1.png"},1862:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step5_3-fb613f0b210ecf4c8dba72dda4ec6b8b.png"},5750:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step5_4-b0dfb76d0e8f0346ba2772d792b51c62.png"},2687:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step5_5-b953ba7e24438549a1adb2e73f5b2a24.png"},1212:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/step5_6-e5482973-1d4d8184f203ab6586d2b5613a4b2b60.png"},8453:(e,t,i)=>{i.d(t,{R:()=>c,x:()=>r});var s=i(6540);const n={},o=s.createContext(n);function c(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:c(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]);