Charge Documentation

Using Charge

Taking your first payment with Charge is as simple as 3 steps:

  1. Set your Stripe API Keys
  2. Add the Payment Form
  3. Add the Form Javascript

1. Set your Stripe API Keys

Stripe has 2 modes you can run in, Live and Test. Each of the modes has a set of 2 unique keys, called your Publishable Key and Secret Key. In the Charge Module settings you'll see places to input all of those codes, as well as a toggle to change the stripe mode.

Your API keys are listed in the Stripe control panel, found under [Your Account] > [API Keys].

2. Add the Payment Form

The payment form is the main part of setting up Charge on your site. This form has a few simple required fields, and a few optional ones which you can use to customize the payments and customer information collected. At it's simplest we need fields for the user's Card, and an amount to take for the payment.

We use the {exp:charge:form} tag to wrap up the the form. There are a number of optional parameters you can specify on that tag to alter the default behaviour of Charge.

See what fields you'll need for the payment form.

3. Add the Form Javascript

To take simple card payments, Stripe uses javascript to intercept the form action and create a secure token of the payment card details.

You'll need to include the Stripe javascript library on the payment pages like so :

<script src="{exp:charge:stripe_js}"></script>

And our javascript to take over the form :

<script src="{exp:charge:js}"></script>

And finally, our public key, and specific setup values :

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

This is the simplest javascript setup, but of course you're able to extend or setup your own usage however you'd like.

Taking it Further

This is just the simplest way to use Charge on your site to take Stripe payments. There are lot more options available. Have a look at the examples to see what you could do →

Support

Having problems setting up and/or using Charge? Support is offered from 10am to 4pm EST weekdays. Send us an email at help@eeharbor.com and we will respond as quickly as we can.