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 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 most simplest we need fields for the user's Card, and a value to take for the payment.

Set up a standard html form, and simply add a few required fields. 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="{{ resourceUrl('charge/js/stripe_v2.min.js') }}"></script>

And our javascript to take over the form :

<script src="{{ resourceUrl('charge/js/jquery.charge.js') }}"></script>

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

<script>
(function(window, undefined) {
        Stripe.setPublishableKey('{{ craft.charge.getPublicKey() }}');
        $(this).charge('#charge-form', '#payment-errors', '#progress-indicator');
})(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 →