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 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.
save my card
and 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.