Embedding Payment Forms in your app

By default, the Stripe Connect - Marketplace 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.

Video Tutorial

The below video tutorial demonstrates how to embed payment forms (i.e. Checkout Sessions) in your Bubble app:

To embed payments forms in your app, follow the steps outlined in the 'Splitting one-off payment 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 section is the 'Embedding Checkout Sessions in your app' section):

Bubble - Visual ProgrammingBubble

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