Using Charge
Taking your first payment with Charge is as simple as 3 steps:
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 →
