Checkout vs Stripe.js

There are two primary methods of triggering the payments with Charge - via Stripe Checkout or Stripe.js.

It's important to understand how they work, the advantages and limitations of each.

TL;DR Checkout is simpler and quicker to setup initially, but Stripe.js gives move control and options. We recommend using Stripe.js for most situations.

Stripe Checkout #

Stripe Checkout is the payment modal you'll see in action here.

Checkout is the simplest way to setup the payments form - the fields, card tokenisations and all form interactions are out of your hands. You simply have to set a few options and a triggering elements, and Charge and Stripe will do the rest.

How it works with Charge #

To use Checkout, you need to use the craft.charge.setCheckoutOptions() method in your template. You pass in the same options array as when using Stripe js with the optional addition of some checkout specific parameters to modify how the modal appears.

Under the hood we encrypt the options you set just the same as when using setPaymentOptions() and include them as a hidden input named opts on the form.

The Checkout modal only covers the payment tokenisation. Once the customer submits their details in the modal, the rest of the flow is identical to the main Stripe.js flow. The tokenised card details are added to the form, and it submits to our charge controller.

Advantages #

  • Stripe Checkout can be very quick to setup. All the card inputs are in the modal, so you don't need to add anything beyond the button
  • Customers can be more familiar and comfortable using the Checkout modal if they've used it before
  • Checkout adds the option for returning customers to use an authentication code sent via sms instead of reentering all their payment details. This is a global setup, so if they've used and saved their payment details previously an any other checkout modal, they'll be able to do that here too
  • It's optimised for all mobile and touch devices, and includes nice UI touches such as card type images
  • It's dynamic and updated by Stripe. When they add new support or improvements to the checkout setup you'll automatically get them on your setup.

Disadvantages #

  • You have no control over how the modal appears beyond a basic name, description and icon. The payment inputs are explicitly out of your control
  • You can't offer the option to customers to save their card, and reuse it.
  • When errors occur as part of the payment flow it can be harder to smoothly recover and usually means the customer has to start the payment process again.
  • The level of integration to your site is very limited.

Stripe.js #

Stripe.js is the classic way of using Stripe payments. You have full control over all the payment forms, and can customised and alter things completely as you need, and integrate them tightly with the site build.

You can see a fully working demo using Stripe.js here

How it works with Charge #

Just like Stripe Checkout, to use Stripe.js you must specify your payment options on the payment form. In this case you'd use the charge.craft.setPaymentOptions() method.

Again, this encrypts the details, and includes them as a hidden opts input on the form.

In addition to the setPaymentOptions() you have to include the actual card inputs on the form, with specific data-stripe attributes, and also add our included stripe.js and jquery.charge.js to the page, along with an init js statement.

The jquery.charge.js attaches to the payment form, and triggers on submit. When the form is submitted, our javascript pulls out the card details via the data-stripe attributes, tokenises them using stripe.js and then adds the newly tokenised details to the form, for submission to the charge/charge controller.

Advantages #

  • Allows complete control over the form setup, and a level of integration not possible with Checkout
  • Lets you handle error states, form submission problems and edge cases smoothly and with the minimum of required user interaction.
  • Gives access to the full set of extra payment features in Charge, such as save my card and card reuse features.

Disadvantages #

  • Requires more setup on page - you have to add all the card inputs and javascript directly
  • Could have an effect on some customers who dislike entering their card details on a site

Conclusion #

We strongly recommend using Stripe.js in place of Checkout for all but the simplest of setups.

While it is technically possible to use most of the features of Charge with Stripe Checkout, because the majority of the form interactions are out of your control, you're limited to options.

You'll see all our demo forms which are included in the plugin use Stripe.js over the Checkout approach.