Embedding payment forms in your app

By default, the Stripe Checkout (Shopping Cart) plugin creates Checkout Sessions where the payment form is displayed on a Stripe-hosted page. However, you can also embed the payment form in your own app.

To do this, follow the steps outlined in the 'Creating Checkout Sessions' section, but:

• When creating the Checkout Session set the 'Embed Session' field to 'Yes'

• Select a 'Return URL' - this is where the user will be redirected after completing their purchase

• Navigate to a page in your own app rather than to an external website

• On the page you navigate to:

  • You will need to drop the 'Embedded Checkout Session' element on the page to display the payment form

• Use the 'Load Embedded Checkout Session' action to load the payment form

• You will need to provide a clientSecret value from the associated Checkout Session for the 'Load Embedded Checkout Session' action - you can get this by using the 'Retrieve Checkout Session Details' data call

For security reasons, do not save this clientSecret value down in your database or display it anywhere on the page.

If you've done all this correctly, you'll be able to load the payment form created from the Checkout Session in your app

Demo app

You can view an example of the page setup and workflow actions for creating and embedded Checkout Session in the demo app at the below link (relevant pages are the checkout and payment-page pages):

Bubble - Visual ProgrammingBubble

The editor is public and can be accessed by clicking the 'View Editor' button at the top of the page.