Requires Craft 2.5+, running php 5.5.9+
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 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.
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.
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
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
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
jquery.charge.js to the page, along with an init js statement.
data-stripe attributes, tokenises them using
stripe.js and then adds the newly tokenised details to the form, for submission to the
save my cardand card reuse features.
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.