Embedding Payment Forms in your app
Last updated
Last updated
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.
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
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):
The editor is public and can be accessed by clicking the 'View Editor' button at the top of the page.
