> For the complete documentation index, see [llms.txt](https://cranford-tech.gitbook.io/stripe-connect-marketplace/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cranford-tech.gitbook.io/stripe-connect-marketplace/implementing-key-features/embedding-payment-forms-in-your-app.md).

# 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:

{% embed url="<https://www.youtube.com/watch?v=QAHj5Hv18XI>" %}

\
To embed payments forms in your app, follow the steps outlined in the '[**Splitting one-off payment section**](/stripe-connect-marketplace/implementing-key-features/splitting-one-off-payments.md)', 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

<div data-full-width="true"><figure><img src="/files/uSl0dBG4KHZJF6UZdrES" alt="" width="563"><figcaption></figcaption></figure></div>

* 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

<figure><img src="/files/fFgG0nivcLQSLVMYtglw" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/p2d2HzBHUiuClF4c64BA" alt=""><figcaption></figcaption></figure>

* 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

<figure><img src="/files/yvAv5u7T9zJpYEI0A864" alt=""><figcaption></figcaption></figure>

**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<br>

<figure><img src="/files/CQGOfnZsTTZYE1xCBZmz" alt=""><figcaption></figcaption></figure>

### 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):

{% embed url="<https://stripeconnectmarketplace.bubbleapps.io/version-test>" %}

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cranford-tech.gitbook.io/stripe-connect-marketplace/implementing-key-features/embedding-payment-forms-in-your-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.