All the Charge payment forms require javascript for payment card tokenisation.
The exact setup is flexible, and can be adjusted for your required usage and how you're building your front-end assets and templates
Using Stripe Checkout? You can skip the JS! When using Charge with Stripe Checkout you don't need to and any javascript to your pages. Charge will handle everything under the hood including all the public key setup and event binding. Just use the {{ craft.charge.setCheckoutOptions(..) }}
tag and we'll do the rest.
You need to add 4 javascript parts to your page. They are:
It'd look like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
{% includeJsResource('charge/js/stripe_v2.min.js') %}
{% includeJsResource('charge/js/jquery.charge.js') %}
{% includejs %}
$(this).charge();
{% endincludejs %}
You can define the Stripe Public Key on the page in two ways.
data-publicKey
on your payment form.We recommend assigning it via the data attribute to keep your on page js as clean as possible. This approach also allows you to fully enclose the js into any other packaged and minified site js libraries you might have.
This is the simplest way. With this approach your payment form opening tag would look like this:
<form id="charge-form" method="post" data-publicKey ="{{ craft.charge.publicKey }}">
...
Alternatively you can define it on page after you've loaded the Stripe library. That looks like this:
{% includejs %}
Stripe.setPublishableKey('{{ craft.charge.getPublicKey() }}');
$(this).charge();
{% endincludejs %}
By default the charge javascript library will look for the following default containers on the payment page:
charge-form
.payment-errors
.charge_indicator
.data-publicKey
.You can override these defaults by passing a config array to the $(this).charge();
method. Like so:
$(this).charge({
form : $('#some-other-form'),
error_container: $('#custom-errors'),
progress: $('.custom-progress')
publicKey: 'pk_xxxxxxxxxx'
});
Upgrading from 1.x? We've improved how our js library accepts it's options. The legacy approach of $(this).charge('#custom-form', '#customer-errors', '.custom-progress');
still works though!