Using Stripe Embedded Checkout

[Teodor]

Intro

Stripe's Embedded Checkout Form offers a powerful solution, allowing you to integrate a customizable and responsive payment form directly into your website. This enhances the user experience and ensures secure transactions.

The Stripe Embedded Checkout Form simplifies the payment process for customers, allowing them to complete their purchases without being redirected to an external site. Whether you are running a small business, an online store, or a large enterprise, Stripe’s Embedded Checkout Form can be tailored to fit your specific needs and branding requirements.

Stripe Embedded Checkout supports one-time payments and subscriptions and accepts over 40 local payment methods.

Here's a diagram, which explains the checkout flow:

---
title: Checkout lifecycle
---
sequenceDiagram
  participant Client
  participant Server
  participant Stripe API
  participant Stripe Checkout
  
  Client->>+Server: Send order information
  Server->>+Stripe API: Create Checkout Session
  Stripe API->>-Server: Return Checkout Session
  Server->>-Client: Return Checkout Session client secret
  Client->>Stripe Checkout: Render Checkout component
  Note right of Stripe Checkout: Customer completes payment
  Stripe Checkout->>Client: Customer returns to website

1. The embedded checkout component sends order information to a server action.
2. The server action creates a Checkout Session with ui_mode set to embedded.
3. Store client secret in a variable and return it to the client.
4. The embedded checkout component renders the checkout page with the client secret
5. The customer enters their payment details on the checkout page and complete the transaction.
6. The customer is returns to the website (to the defined return_url).

Optionally you can use the checkout.session.completed event in webhooks to add the order in your database.

Getting Started

Account

In order to start using Stripe you need an account. If you don't have one go to: https://dashboard.stripe.com/register and create your account.

Then you need to give your business a name. This is required so that you can sell your products.

Products

The next step is to create a product and add price to it. Open the Products Catalog:

Here you can find all your products and add more:

Click the Add New Product button in order to create a product:

Here you can enter your product information:

Enter the Name of your product and add an optional Description. Both of these will be displayed on the checkout page:

You can also add an image for your product, which will also be displayed on the checkout page:

We are done with the product basic info:

Now, let’s add a price for this product. Select One-off:

Enter the price and select the currency:

Click Add Product and you are done:

You can see your product in the product catalog. Click it:

This will open the product details page. Open the dropdown next to the price:

And select Copy price ID. This ID is needed for the checkout process, so if you are using database to store your products, save it there along with the rest of the product info.

That's pretty much everything required for the products on the Stripe Dashboard.

Custom Shopping Cart

You can build your own shopping cart using the Data Store component as explained in the docs: Creating a Shopping Cart with the Data Store Component
There are two mandatory properties required for the checkout: price and quantity, which must be available when initiating the checkout process.

price is the price ID which we copied earlier from the stripe dashboard.
quantity is the quantity of the products that will be purchased.

the rest of the shopping cart properties can be whatever you need for your shopping cart look and feel.

Server Side

The server side flow requires us to create a checkout session. For this we need to create a server action. Open Server Connect and create a new Server Action:

Add a name to it:

And then we use the special Create Embedded Checkout Session Template. Add it to the server action steps:

And you can see it adds all the required steps for the checkout session creation:

Click the Create Checkout Session step and you can see its properties. First add the Payment methods which you want to use:

We select card:

Then setup the redirect URL, which will be loaded after a successful or cancelled payment. You can see that it contains the dynamic {CHECKOUT_SESSION_ID} which is the Checkout Session ID:

The UI Mode should be set to Embedded for Embedded Checkout:

Save your server action and you are done.

Client Side

You need to create a page where the Embedded Checkout Form will be displayed. In our case we are using the data store component for a shopping cart, so we added it on an empty page:

Add a new component > Stripe > Stripe Embedded Checkout:

You need to add your stripe publishable key here. Click the little info icon that opens the stripe dashboard so you can copy it:

Copy the publishable key:

And paste it in the Key input:

Then click the dynamic data picker to select the Session URL:

This is the checkout_session server action which we just created:

The next step is to send the shopping cart items to the checkout.
Add new dynamic attribute > Stripe > Line Items:

Click the dynamic data picker to select the line items:

This is the Data Store component's data array, which contains the price and quantity properties, which me mentioned in the beginning:

And you are done. Save your page and let's preview the results:

From our shopping cart we are redirected to the Stripe Embedded Checkout page, where we can pay for the products:

[sitestreet]

I have created a cart using Data Store (all working beautifully) but it looks like I have to create a product in the Stripe dashboard and get the price ID from it but this means the details of the product (name and price) aren't coming from my cart but are coming from the Stripe product.

@Teodor

price is the price ID which we copied earlier from the stripe dashboard.
quantity is the quantity of the products that will be purchased.

There must be a way around this? I just want to either send an order ID and total price to Stripe to process the payment or, better still, the entire cart details.

How do I achieve this?

[mebeingken]

I'm not sure about the Embed part, but Stripe allows for line_items to be a custom list, among other things.

Here's a reference doc for a Create Checkout call: Create a Session | Stripe API Reference

Here is what it looks like in Wappler (the example again is for Create Checkout Session):

Under the Invoice Creation you can set Line Items to a Custom List. You then provide a Title, Amount (in cents), Currency, and Quantity for each line item.

[sitestreet]

Thanks Ken. I literally just found that in amongst the Checkout Session Properties.

How would I set it to be everything in the array? The lineItems array (POST) contains the details, I want them all to go into the Line Items in the Checkout Session.

It looks like I have to add them one item at a time but that is no good as the cart could have any number of items.

[mebeingken]

I believe I used a Custom Reference somewhere before:

You can build the array either manually or using the Array actions.

[sitestreet]

Yep, you're 3 minutes ahead of me! Looks like that's what I want.

Once you know it's really easy!

UPDATE: Custom Reference is the way to go. And I'm pleased to see that the tooltips within Wappler gave enough info to make this straightforward and working. So long as the array (data store in my case) contains the fields title, currency, amount and quantity it works like a charm.

Thanks @mebeingken for your help.