Charge Upgrade Documentation

Javascript Setup

Payments with Charge are all javascript dependent as Stripe depends on javascript.

To setup Charge, the javascript is broken into 4 broad parts :

1. A javacript framework - in our examples jQuery
2. The Stripe javascript library
3. The Charge javascript library
4. Specific on-page initialization

1. Javascript Framework

JQuery is used in all our examples, and the bundled Charge library depends on it also. The Stripe library is framework agnostic, and all our examples can be made to work with any library (or no library) of your choosing.

2. Stripe Library

The Stripe.js library is included as part of the Charge addon. The path to this library is available with the simple {exp:charge:stripe_js} tag.

If you'd prefer to use your own copy of the Stripe.js library, it's available from the Stripe docs.

Full Details about Stripe.js

3. Charge Library

To make the process of setting up Charge simpler, we've abstracted the main work of setting up stripe to work with your form into our own simple library. This is called from the page with the .charge() function, as shown in the next part.

You're encouraged to check the Charge library directly and make your own copy as needed. The charge library is intended only as a starter to cover the basic setup.

Note: If you do need to modify the library, be sure to make a local copy and modify the copy, not the original so you won't loose any changes when you update the Charge addon

Note: Our Charge library makes use of the data attributes as described in the Stripe.js docs. Just add an attribute of 'data-stripe' to all the card inputs, and it'll do the rest.

The Charge library makes some assumptions on your form setup, and requires two variables passed to correctly attach to your form, as shown in the next part.

4. Specific on-page initialization

This is a simple as (a) Setting your Stripe Publishable Key, and calling our Charge Library with your chosen ids. Like so :

<script>
(function(window, undefined) {
        Stripe.setPublishableKey('{exp:charge:public_key}');
        $(this).charge('#charge-form', '#payment-errors');
})(window);
</script>

In this case we have our form with an id of 'charge-form' (the default), and an error container with an id of 'payment-errors'.