Wednesday, 21 August 2019

Integrating the New Stripe Checkout

Stripe  JavaScript  PHP 

The legacy Stripe checkout needs both client-side and server-side code snippets to handle the payment. However, the new Stripe checkout allow you to manage the products in your Stripe dashboard. A small section of javascript is only needed in client-side to create the payment for you automatically and no server integration is required.

Enable checkout in the Stripe dashboard

Log into your Stripe account, navigate to the "Checkout settings" and enable the "Checkout client integration".

Enable the Checkout client Integration

Configure products in the Stripe dashboard

Before configuring products in test mode, we need toggle the "Viewing test data" button at the dashboard menu.

Toggle the Viewing test data button

To create a new product, navigate to the "Products" section at the dashboard menu and click the button "New". A dialog box is prompted for you to input the product details.

Create a new product

For example, we create two one-time products: avocado and kiwifruit, and the details are as below.

The avocado product settings

The kiwifruit product settings

We can see that each product has a SKU(Stock Keeping Units). The SKU is used in the client-side javascipt code snippet for referring to the product.

Integrate checkout in your web page

In your web page, put the following code within <head></head> tags. It will refer to the new Stripe checkout function.

<script src=""></script>

Then, put the following code snippet in your web page where you want to show the "Checkout" button.

      style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  <div id="error-message"></div>
      var stripe = Stripe('pk_test_key');

      var checkoutButton = document.getElementById('checkout-button');
      checkoutButton.addEventListener('click', function () {
          //when the button is clicked, redirect your customer to Checkout

              items: [{sku: 'sku_FeKyXj88G0YvZ9', quantity: 2},
                      {sku: 'sku_FeTfkk7wz6zZ0P', quantity: 4}],

              successUrl: "http://localhost/success.html",
              cancelUrl: "http://localhost/cancel.html",
              customerEmail: "<?php echo $customerEmail; ?>",
          .then(function (result) {
              if (result.error) {
                  // If `redirectToCheckout` fails due to a browser or network
                  // error, display the error message to your customer.
                  var displayError = document.getElementById('error-message');
                  displayError.textContent = result.error.message;

In line 8, put your Stripe account's publishable key. In line 15, you can list the products by using the SKU id and the relevant selected amount. For the successful payment, you can define the page in the parameter successUrl in line 18 for the customer. You can also define the page in cancelUrl in case the payment is cancelled. If you have the customer email and want prefill it on the Checkout page, put it in the parameter customerEmail. That's it! The integration is done.

Now, let's open a browser to access the web page. We can see the Stripe's blue "Checkout" button.

The Stripe's Checkout button

After clicking the "Checkout" button, the customer is redirected to the Stripe's Checkout page. Here, we can see that the customer email is already prefilled.

The Stripe's Checkout page

For testing the credit card payment, we can use the testing card number 4242 4242 4242 4242 with any expiration date and CVC number as what you want. Then, click the blue "Pay" button, the payment is submitted and the customer is redirected to the successful page that is already defined in the successUrl parameter. The page looks like as bellow.

The successful page

The full source code of this example can be downloaded from our GitHub repository example-stripe-payment-new