Discuss

Getting Started with Stripe Integration in Wappler

On this page

Intro

Stripe is one of the top payment processing providers which allows you to create full e-commerce solutions. Thanks to the client and server-side Stripe integration in Wappler it's now easier than ever to add buy now buttons, checkout pages and even create entire stores.

Getting Started with Stripe

Stripe Account

The first think you need to do, in order to start using Stripe is to create an account. Go to: https://dashboard.stripe.com/register and create your account:

Screenshot_1|690x428

Then, log in using your newly created account.

Screenshot_11|690x428

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

Screenshot_13|690x428

Then under Business Settings select Account Details:

Screenshot_14|690x428

And enter an Account Name (Company name):

Screenshot_15|690x428

Setup the rest of the settings as you need and click Save when you are done:

Screenshot_16|690x428

Now you are ready to start selling products. Note that our account is in test mode currently, which means the payments won't be made - so it's like a sandbox. Once you setup and test everything you can verify your business and then you can go live.

Products and Prices

The next step is to create a product and add price to it. Click Products:

Screenshot_17|690x428

Here you can create new products or manage the existing ones. Click the Add product button:

Screenshot_1|690x428

Here you can enter your product information:

Screenshot_2|690x428

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

Screenshot_3|690x428

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

Screenshot_4|690x428

We are done with the product basic info:

Screenshot_6|690x428

Now, let's add a price for this item. Scroll down to Pricing and select the Pricing model. Select the Standard Pricing option if you charge the same price for each item:

Screenshot_7|690x428

Then select the currency you want to use:

Screenshot_8|690x428

Enter the price and select One time payment:

Screenshot_20|690x428

Click Save product:

Screenshot_2|690x428

And you have your first product ready for sale. You can see that an ID has been assigned to the product price we added. This ID will be used for the checkout process. You can add different prices in different currencies and use their IDs where needed:

Screenshot_21|690x428

Your products can be found in the Products menu:

Screenshot_22|690x428

Client-Side Integration

With the client-only integration, you define your products directly in the Stripe Dashboard and reference them by ID on the client side. This approach makes it possible to integrate Checkout into your website without any server-side code.

The client-only integration has several limitations:

  • Only card payments are supported. Other payment methods are not supported.
  • Coupons, Discounts, Promotion codes, and Tax rates are not supported.
  • Creating one-time payments with existing Customers is not supported.
  • Placing a hold on a card before charging it is not supported.
  • One-time and recurring payments in a single transaction is not supported.

Enabling Client-Only Integration

To start using the client-side integration, you need to enable it in the Settings. In Stripe Dashboard, click Settings:

Screenshot_4|690x428

Then click Checkout settings:

Screenshot_5|690x428

And enable client-only integration:

Screenshot_6|690x428

Click the Allow button, to confirm this:

Screenshot_7|690x428

And here you can add your live domains, which you want to be used when in Live Mode:

Screenshot_8|690x428

Here you can also customize the look and feel of your checkout page:

Screenshot_9|690x428

Single Product Purchases

The simplest way to sell a product with stripe's client-only integration is adding a Buy Now button on your page. Useful if you are selling a single item on your site so people just click the Buy Now button to purchase it.

In Wappler, we created a really simple containing an Image, Title and a Button. The content is static, so we added these manually. We will use the Buy Now button to purchase the product:

Screenshot_3|690x428

Add new component in App Structure:

Screenshot_10|690x428

Open the Stripe category and select Stripe:

Screenshot_11|690x428

First you need to add your API key. It can be found on https://dashboard.stripe.com/apikeys

Screenshot_12|690x428

You need to copy the Publishable key, and paste it in the Key field:

Screenshot_13|690x428

Then select the Flow Type - in this case we need Client Side Only:

Screenshot_14|690x428

Set the Mode to Payment:

Screenshot_15|690x428

And select two pages for success and cancel order URLs:

Screenshot_16|690x428

These are the URL where the users will be redirected after a successful payment or if they cancel the order during the checkout. Both are simple pages in our site:

Screenshot_17|690x428

The next thing we need to do is to pass the product price ID to the checkout. We need to enter the price ID in the Line Items field:

Screenshot_18|690x428

Open Stripe Dashboard and load your products. Select the one you want to sell on the page:

Screenshot_19|690x428

Scroll down to the product price and copy the price ID to your clipboard:

Screenshot_20|690x428

Then paste it in the Line Items field:

Screenshot_21|690x428

We are done setting up the Stripe Component. Let's make the Buy Now button functional now. Select the button:

Screenshot_22|690x428

Add new Dynamic Event:

Screenshot_23|690x428

Select Mouse > Click:

Screenshot_24|690x428

And select a dynamic action:

Screenshot_25|690x428

Under the Stripe Component select Checkout:

Screenshot_26|690x428

Then click the Select button and you are done. You can preview the results in the browser:

purchase-single|690x450

Multi Products Purchase

Client-side integration also allows you to make multi-products / multi-quantity purchases. You can build a shopping cart using the Data Store component and pass the contents of the Data Store component to the Checkout page. This can be done again without any server-side code.

We created a simple page layout, containing 3 columns with Images, Titles and Add To Cart buttons. All of this is static (no dynamic data involved):

Screenshot_1|690x428

In order to be able to checkout multiple products with Stripe, we need to store the items in a shopping cart. We can create a shopping cart using the Data Store Component - this tutorial explains how to use dynamic data, but in this case it's similar - just adding static content.

First, we add the Data Store component on the page. Add new component in App Structure:

Screenshot_2|690x428

Open Data and select Data Store:

Screenshot_3|690x428

We add a name for the Data Store component (dsCart) and click Define Data Store Schema:

Screenshot_4|690x428

Add two variables:

Screenshot_6|690x428

They need to be called price and quantity and are used for the checkout. price will store the product price ID. quantity will store the quantity per each product.

Screenshot_8|690x428

Then you can add more variables, which can be used to show the shopping cart data on the page:

Screenshot_9|690x428

In our example - product_id, product_name and product_price which are only needed to show some info to the users (not required for the checkout):

Screenshot_9|690x428

Click Save:

Screenshot_10|690x428

The next step is to add the product to the Data Store. Select the Add To Cart button for the first product:

Screenshot_11|690x428

Click new dynamic event:

Screenshot_12|690x428

Select Mouse > Click:

Screenshot_13|690x428

And select a dynamic action:

Screenshot_14|690x428

Under Data Store component, select Update or Insert:

Screenshot_15|690x428

In the product_id enter 1 - as this is our first product:

Screenshot_16|690x428

The next thing we need to do is to pass the product price ID to the Data Store:

Screenshot_17|690x428

Open Stripe Dashboard and load your products. Select the one you want to sell on the page:

Screenshot_18|690x428

Scroll down to the product price and copy the price ID to your clipboard:

Screenshot_19|690x428

Then paste it in the price field in Data Store:

Screenshot_20|690x428

Then, quantity - as we are using Insert or Update (upsert) we need to update the quantity, if the same item is added twice. Click the dynamic data picker for the quantity:

Screenshot_22|690x428

Click Code:

Screenshot_23|690x428

And enter:

`quantity + 1`

Screenshot_24|690x428

The rest of the fields, as mentioned can vary as these will only be used to display the Data Store data on the page in the shopping cart page. We enter the Product Name and Price:

Screenshot_25|690x428

Click Select:

Screenshot_26|690x428

We do the same for the other two products, entering the corresponding product price IDs from stripe and the rest of the info for them:

Screenshot_27|690x428

As per creating a shopping cart using the Data Store Component we added a simple Shopping Cart page:

Screenshot_28|690x428

We added a dynamic table using the Data Store component as a source:

Screenshot_29|690x428

So please check the tutorial mentioned above.

Now, let's add the Stripe component on the page. Click Add New component in App Structure:

Screenshot_30|690x428

Open Stripe and select the Stripe Component:

Screenshot_31|690x428

Paste your Stripe API Key in the Key field:

Screenshot_32|690x428

It can be found on https://dashboard.stripe.com/apikeys

Then enter the other options - Flow Type: client side; Mode: payment; and select the success and cancel URLs, where the users should be redirected:

Screenshot_33|690x428

Click the dynamic data picker for the Line Items. This is where we send the items from our shopping cart to the checkout page:

Screenshot_34|690x428

Select the data element under Data Store:

Screenshot_35|690x428

And then add a checkout button on the page. Add a dynamic event for it:

Screenshot_36|690x428

Select Mouse > Click:

Screenshot_37|690x428

Select dynamic action picker:

Screenshot_38|690x428

Under Stripe, select Checkout:

Screenshot_39|690x428

Click Select and you are done.

You can preview the results:

purchase-multi|690x471

Server-Side Integration

You can also create a server-side checkout it gives more flexibility and options than the client-side integration.

First, let's create a server action. Right click API in the Server Connect and add API Action:

Screenshot_2|690x428

We call it stripe_checkout.

Then select Server Connect Settings:

Screenshot_7|690x428

Open the Stripe Tab:

Screenshot_36|690x431

Here you need to enter your Stripe API Secret Key, which can be found on https://dashboard.stripe.com/test/apikeys Copy the Secret Key:

Screenshot_9|690x428

Paste it in the Secret Key field and click Save:

Screenshot_37|690x431

Then right steps:

Screenshot_5|690x428

Expand Stripe, select Checkout and click Create Checkout Session:

Screenshot_6|690x428

Scroll down the properties and add a cancel URL - the URL when the users should be redirected, when they cancel the checkout. Note this needs to be a full site URL:

Screenshot_13|690x428

Then do the same for the success URL - the URL when the users should be redirected, after a successful payment Note this needs to be a full site URL:

Screenshot_16|690x428

Then right click the Create Checkout Session step:

Screenshot_14|690x428

Add a Set Value step:

Screenshot_15|690x428

You should call it id:

Screenshot_17|690x428

Select a dynamic value for it:

Screenshot_18|690x428

Under the Create Checkout Session step, select id. Make sure to enable the Output option for this step.

Screenshot_19|690x428

As we are done setting up the checkout step, lets setup the error handling. Under catch right click Steps:

Screenshot_21|690x428

And add a Set Value step:

Screenshot_22|690x428

We call it error:

Screenshot_25|690x432

Then we enter There was an error:

Screenshot_26|690x432

And click the dynamic data binding to select the error:

Screenshot_27|690x432

Select $_ERROR and click Select:

Screenshot_26|690x428

Save your server action and close server connect panel:

Screenshot_27|690x428

We use the same cart page as shown in the static steps of this tutorial. Add new component in App Structure:

Screenshot_28|690x428

Open Stripe and select the Stripe Component:

Screenshot_29|690x428

Then enter your Public API Key. It can be found on https://dashboard.stripe.com/apikeys

Screenshot_30|690x428

Open the Flow Type menu, and select Server Side:

Screenshot_31|690x428

Then click the dynamic data picker for the Session URL option:

Screenshot_32|690x428

And select the Server Action which we already created:

Screenshot_33|690x428

And then select the Line Items:

Screenshot_34|690x428

This should be the data element of the Data Store component on the page:

Screenshot_35|690x428

Save your page and you are done.

Capturing Payment Errors

If an error occurs when the checkout button is clicked, you can display it on your page. In our example we will show you how to show the error in a notification.

First, add the Notifications Component on the page:

Screenshot_3|690x428

Select Components > Notifications:

Screenshot_4|690x428

Then select the Stripe Component on the page:

Screenshot_5|690x428

Add new dynamic event:

Screenshot_6|690x428

Select Stripe > Error:

Screenshot_7|690x428

And select the Dynamic Action:

Screenshot_8|690x428

Add Danger Notification:

Screenshot_9|690x428

And click the dynamic data picker for the notification text:

Screenshot_10|690x428

Select lastError under the Stripe Component:

Screenshot_11|690x428

Click Select:

Screenshot_12|690x428

And save your page. If there's an error with clicking the checkout button, it will be displayed on the page.