Integrating the New Stripe Checkout
Stripe JavaScript PHPThe 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".
Configure products in the Stripe dashboard
Before configuring products in test mode, we need toggle the "Viewing test data" button at the dashboard menu.
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.
For example, we create two one-time products: avocado and kiwifruit, and the details are as below.
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="https://js.stripe.com/v3"></script>
Then, put the following code snippet in your web page where you want to show the "Checkout" button.
<button
style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
id="checkout-button"
role="link">Checkout
</button>
<div id="error-message"></div>
<script>
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
stripe.redirectToCheckout({
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;
}
});
});
</script>
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.
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.
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 full source code of this example can be downloaded from our GitHub repository example-stripe-payment-new