Discuss

Stripe Checkout with Custom Products

On this page

Intro

Sometimes you have your own products database which doesn't use products and prices defined in Stripe. You already know how to create a shopping cart using the Data Store Component and you can use your shopping cart built this way with Stripe Checkout.

Page Overview

We've built our page and use the Data Store Component to save the shopping cart items as explained in the tutorial above:

Screenshot_12|690x433

The Data Store has a column, which stores our product IDs:

Screenshot_14|690x433

Nothing unusual. What you need to do is to send these produc IDs to the server action and use them to filter a database query, which will then send the products to Stripe Checkout.

Server-side Setup

The first thing you need to do is to create a new API Action:

Screenshot_16|690x433

We call it cart_checkout:

Screenshot_17|690x433

Setup $_POST Variables

Now, right click the $_POST variables:

Screenshot_18|690x433

And add an Array:

Screenshot_19|690x433

This array should be called lineItems and not any other way:

Screenshot_20|690x433

Right click the Array we just added and add a variable inside it:

Screenshot_21|690x433

We call this variable the same way as the Data Store column storing the product ids is called. In our case (check the second screenshot in the tutorial) it is called product_id:

Screenshot_22|690x433

Setup Database Query

We will use a database query as a source for the checkout. It will be filtered by the items added in the Data Store - i.e. items added to the users shopping cart.

Right click steps:

Screenshot_55|690x432

Add a database query:

Screenshot_56|690x432

And open the Query Builder:

Screenshot_57|690x432

Add your products table in the builder:

Screenshot_26|690x433

Stripe checkout expects 4 values to be sent to it: title (mandatory) - The name of the product amount (mandatory) - The price of the product currency (optional) - The currency. If not provided it defaults to usd quantity (optional) - The quantity that should be added to the cart. If not provided, it defaults to 1

So, you need your database query to return at least the title and amount. Don't worry if your database table columns are not called like that. In such cases you can use the Alias column:

Screenshot_66|690x432

You can see our column is called name and we use an alias of title same for the price - we are using an alias of amount

Open the conditions tab and select a column to filter the products by. We want to filter by the product id column:

Screenshot_31|690x433

Select the IN operator:

Screenshot_32|690x433

And click the dynamic data picker:

Screenshot_33|690x433

Select the lineItems array under $_POST and click the formatter icon:

Screenshot_1|690x432

Then right click the array, open Collections and select Flatten:

Screenshot_2|690x432

In the property field, enter the variable used to pass the product ids, in our case we enter product_id, then click Select:

Screenshot_59|690x432

You are done setting up the database query. Now your database query will be filtered by the product ids stored in the data store component (in the shopping cart).

Checkout session

Now right click the database query step:

Screenshot_60|690x432

Select Stripe > Checkout and select Create Checkout Session:

Screenshot_61|690x432

Open the Items Type menu and select Custom Reference:

Screenshot_62|690x432

Then select the dynamic data picker icon:

Screenshot_64|690x432

Select your database query and click Select:

Screenshot_65|690x432

Setup the success and cancel URLs and you are done. Right click the Checkout Session step:

Screenshot_67|690x432

And add a Set Value step:

Screenshot_68|690x432

This step should be called id:

Screenshot_69|690x432

Select the dynamic data picker for its value:

Screenshot_70|690x432

And select id under Checkout Session step:

Screenshot_71|690x432

Make sure to enable output for the Set Value step:

Screenshot_72|690x432

Save your API Action:

Screenshot_73|690x432

Checkout Button

Close the Server Connect panel and Open App Connect. Add new component:

Screenshot_74|690x432

Open Stripe and select the Stripe Component:

Screenshot_75|690x432

Enter the Stripe Publishable Key, which can be found in your Stripe Dashboard:

Screenshot_76|690x432

Set the Flow Type to Server Side:

Screenshot_77|690x432

Then select your Session URL:

Screenshot_3|690x432

Select the API Action which we created in Server Connect panel:

Screenshot_4|690x432

And then select a source for the Line Items:

Screenshot_78|690x432

Select the data element under the Data Store component:

Screenshot_79|690x432

Finally select the checkout button and add new dynamic event:

Screenshot_80|690x432

Select Mouse > Click:

Screenshot_81|690x432

And pick a dynamic action:

Screenshot_82|690x432

Select and Add Checkout under the Stripe Component and click the Select button:

Screenshot_83|690x432

Save your page and you are done. The product ids stored in the data store will be sent to the server side, filter your database query and send the data to the Stripe checkout.