---
description: >-
  This section will go over how to create a one-time marketplace payment and
  taking a fee using the plugin.
---

# Creating single marketplace payments

## Getting started

In this section we will create payments for connected accounts while taking a fee using Checkout. To start, make sure to:

* Add the plugin to your app
* Have a simple page with a button users can use to trigger the payment flow (we will go over this further on in this section)
* Make sure the user has completed the [Onboarding steps](../connecting-stripe-accounts/onboarding-a-user-connecting-stripe-account)

**➡️ You can take a look at the plugin demo created in this section here:** [https://bubble.io/page?name=index\&id=stripeconnectdemo\&tab=tabs-1](https://bubble.io/page?name=index\&id=stripeconnectdemo\&tab=tabs-1)

## Step 1 - Page contents

We are going to setup a page with a button that triggers the Stripe Checkout flow. Keep in mind we need to save the <mark style="color:green;background-color:green;">Checkout ID</mark> to the database, so setup your database structure accordingly.

**⚠️ IMPORTANT NOTE:**&#x20;

Previously we could just save the <mark style="color:orange;background-color:orange;">Payment Intent ID</mark> when creating a Checkout Session, but the latest Stripe API versions do no return the <mark style="color:orange;background-color:orange;">Payment Intent ID</mark> when creating a checkout session. You can get the <mark style="color:orange;background-color:orange;">Payment Intent ID</mark> **only** when a Checkout Session is **confirmed (payed).** You can get the <mark style="color:orange;background-color:orange;">Payment Intent ID</mark> for a confirmed Checkout Session via a Stripe webhook or[ GET Checkout Session](how-to-retrieve-checkout-session-details) details call which is provided by the plugin.



The demo page has a really simple example database structure, but you can always use your own. The following [demo page](https://bubble.io/page?name=index\&id=stripeconnectdemo\&tab=tabs-1) section demos the one-time payment integration:

![](https://3457273877-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTaz2BINn0eo6qDdccM8U%2Fuploads%2FHstr2inSXhqLhxkKndz2%2F%202022-04-04%20om%2018.38.50.png?alt=media\&token=5c4e37c7-2f49-45aa-ab78-f6c3b29c24b3)

## Step 2 - Create a Checkout Session

To create a Checkout Session we will run the 'Stripe Connect - Checkout Single Payment' workflow action. We will input all the necessary information, like the Connected <mark style="color:blue;background-color:blue;">account ID</mark> from the user we just onboarded. The Success URL is used to redirect the user when the transaction flow is finished and the a Cancel URL is used to redirect the user when the transaction flow is cancelled. **NOTE**: We still need to check if the payment succeeded when the user lands on the Success URL (you can read more about this further on).

![](https://3457273877-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTaz2BINn0eo6qDdccM8U%2Fuploads%2Fz1hS9AzeriS3GmMBtOFN%2F%202022-04-04%20om%2019.05.42.png?alt=media\&token=d88cb33f-80bb-425f-9511-18ab445417d6)

## Step 3 - Save Checkout Session details&#x20;

On the demo page we create a database item called 'One-time payment' to save the necessary Checkout to later check if the transaction succeeded and to get the transaction details. Important here is to save the <mark style="color:green;background-color:green;">Checkout ID</mark> (**ONLY** **old** Stripe API versions can also save the <mark style="color:orange;background-color:orange;">Payment Intent ID</mark> in this step, read more [**here**](#step-1-page-contents)).

![](https://3457273877-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTaz2BINn0eo6qDdccM8U%2Fuploads%2F3t7wHlnAUctDrWDGZw90%2F%202022-04-04%20om%2019.11.02.png?alt=media\&token=bb6b311a-cb75-472f-9f03-2cd76ad86495)

In the demo this data entry is saved to the user type:

![](https://3457273877-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTaz2BINn0eo6qDdccM8U%2Fuploads%2FkXYU9Jb5VD1e7WKYIzhx%2F%202022-04-04%20om%2020.11.16.png?alt=media\&token=b8d6aa30-a2e3-452d-a40f-3b2074c66940)

## Step 4 - Redirect user to Checkout URL

The 'Stripe Connect - Checkout Single Payment' workflow action also returns the Checkout URL to complete the payment. You will need to redirect the user to this URL like this:

![](https://3457273877-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTaz2BINn0eo6qDdccM8U%2Fuploads%2FKNlRu7DcMDI1zmUn61bb%2F%202022-04-04%20om%2020.20.01.png?alt=media\&token=f554badb-26d8-4e5d-bdd8-eab62745dfc3)

## Step 4.5 - Retrieve the Payment Intent ID

Previously we could just save the <mark style="color:orange;background-color:orange;">Payment Intent ID</mark> when creating a Checkout Session, but the latest Stripe API versions do no return the <mark style="color:orange;background-color:orange;">Payment Intent ID</mark> when creating a checkout session. You can get the <mark style="color:orange;background-color:orange;">Payment Intent ID</mark> **only** when a Checkout Session is **confirmed (payed).** You can get the <mark style="color:orange;background-color:orange;">Payment Intent ID</mark> for a confirmed Checkout Session via a Stripe webhook or[ GET Checkout Session](how-to-retrieve-checkout-session-details) details call which is provided by the plugin.

## Step 5 - Check if the payment succeeded

When the user is send back to your Success URL we need to check if the payment succeeded. For this we will use the 'GET Payment Intent Details' data call.

![](https://3457273877-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTaz2BINn0eo6qDdccM8U%2Fuploads%2FH1ziggPjVw1kcC7etrz1%2F%202022-04-04%20om%2020.24.11.png?alt=media\&token=d1acdacd-f49e-4595-9b1a-7035f95ca083)

For this call we need to enter the <mark style="color:orange;background-color:orange;">Payment Intent ID</mark> we saved to the database and the <mark style="color:blue;background-color:blue;">Account ID</mark> pointing to the onboarded user.&#x20;

**Next** we can look at the `status` field to see if it is set to "succeeded". You can read more about the different status fields here: [https://docs.stripe.com/payments/paymentintents/lifecycle#intent-statuses](https://docs.stripe.com/payments/paymentintents/lifecycle#intent-statuses)

You can display / use this information how you like in your app!

![](https://3457273877-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTaz2BINn0eo6qDdccM8U%2Fuploads%2FtvIx1IR8Bu5NfNzXUFE0%2F%202024-04-18%20om%2019.54.37.png?alt=media\&token=72635534-31b7-46cd-9ada-ed13a22f6238)

## Alternative step 5

Instead of checking if the Payment succeeded client side, you can also setup up a Stripe webhook inside Stripe to be notified if a user completes the Payment. Keep in mind that you need to be on a paid Bubble plan for this as you need to use a Backend workflow.
