Using Stripe Checkout

Stripe Checkout is a wonderfully simple option for setting up your payment form.

Charge supports the simple Stripe Checkout modal, to help you get up and running quickly. There are a few inherent limitations when using Stripe Checkout vs. Stripe.js, so it'll only be useful if you're looking at a more basic setup.

Setup #

Setting up Charge with Checkout follows much the same as using Stripe.js. The key differences are as follows:

  • Change the charge form action to point to charge/charge
  • Use the craft.charge.setCheckoutOptions() tag in place of the setPaymentOptions() tag
  • Remove any extra form inputs outside of the checkout button

For more details on configuring the checkout modal see: Checkout Options

How simple can it be?

Really simple. Here's the most basic (but fully working) Checkout setup with Charge :

<form method="post" action="">
    {{ forms.hidden({ name : 'action', value: 'charge/charge' }) }}
    {{ forms.hidden({ name : 'redirect', value: 'charge/success/{hash}' }) }}

    {{ craft.charge.setCheckoutOptions({ planAmount : 99.99 }) }}
</form>

That's it. The setCheckoutOptions() tag will create a hidden encrypted input with all the appropriate details, along with the Stripe Checkout button and javascript. You don't even need to supply any additional on page javascript like you do with the standard Stripe.js usage. It's all self contained.

With it setup, you'll see a payment button, and when activated, the standard Checkout modal :

What does setCheckoutOptions() do? Two things - first it internally calls the same logic as setPaymentOptions() and second it wraps up the extra Checkout button parameters for the page.

What's Happening Under the Hood? Once the user completes the checkout modal, the request passes down to the same processing as the standard Stripe.js payment flow. The modal only creates a payment token, just like Stripe.js. Charge is still responsible for actually taking the payment in exactly the same way.

Limitations of Checkout vs. Stripe.js #

Checkout doesn't support dynamic plan amounts or settings

Unlike the standard usage, you have to supply a specific amount and plan interval details during the Checkout setup. The end result of this means the customer can't pick and choose their payment amounts or intervals.

One option for this with Checkout is to present multiple checkout buttons on the same page if needed for customers, which can help if you want to present a number of set payment values/options.

Checkout can't collect extra information

Checkout will only collect the customer's email. Unlike Stripe.js which will let you collect as much data as you need from the customer, including name, meta data, and extra craft fields that you've attached to the Charge element.

Checkout can't apply coupons

If you need coupon support you'll have to use the standard Stripe.js method

Benefits of Checkout vs. Stripe.js #

It's not all bad. There are some very good reasons for using Checkout over Stripe.js.

It's quicker to setup

By offsetting all the payment inputs to a modal, you don't have to worry about general setup, styling or integration with the rest of your site. You can drop in the checkout tag and be done.

This can be a great way to get some placeholder logic in place to test a payment flow before going for a more custom setup later.

It's Optimised for Mobile

Checkout automatically changes the behaviour of the modal depending on the device details. The mobile checkout form is really impressive and can be a great conversion tool for mobile builds.

It's in Active Development

By using Checkout's modal, when Stripe make future improvements to it's behaviour, these changes will automatically be updated on your site. You won't have to make any direct changes to get them later.

Checkout's Remember Me / Saved Card Details option is great

The Remember Me / Saved Card Details feature is something that's only available to Stripe Checkout. This works at the Stripe level, and isn't directly exposed to for normal Stripe.js usage.

It enables customers to effectively save their payment details across vendors. Their customer details are tied to their email, and when returning they can receive an SMS verification code direct from Stripe to enable their repeat card details usage.

This is completely out of the hands from your site or Stripe account - if a customer has saved their card for any site using Stripe Checkout, they'll be able to reuse it on your site too.

Checkout can be more familar

Because you have no style controls for the checkout modal itself the it looks and behaves the same for all customers across all sites through the Stripe network. This can help remove some uncertainty from customers when they come to enter their payment details.

It can run side by side with Stripe.js too

There's no express limit that locks you to using Checkout or Stripe.js on your site. If you want, you can run them tougher, or in separate parts of the site with no trouble. It can be a good way to get started, and you can run a/b tests against conversions as you go if needed.

It's automatically localized

Checkout is translated into English, French, Spanish, Dutch, Italian, German, Japanese and Chinese so that customers around the world get a localized experience.

In the future, there'll be some bonus options

While we don't support it with Charge today, Checkout makes it easy to support Alipay and Bitcoin, with more types of payment coming soon. If you are interested in those options, get in touch right now, we've love to hear from you.