Charge Controller

The Charge controller is the primary way you'll interact with Charge.

The main end point is charge/charge. From there you'll perform all new Charge requests.

charge/charge

The primary charge controller action endpoint

---

charge/charge #

The charge/charge action endpoint is where you'll point all your payment forms. It's the backbone of charge.

Your payment form will start off something like this :

<form method="post" id="charge_form">
    <input type="hidden" name="action" value="charge/charge"/>
    {{ getCsrfInput }}

    ..

The main charge/charge endpoint expects to receive a POST request, and collects all the data about the charge.

Required Params

opts generated by the setPaymentOptions method

This is the hidden encrypted array that defines the full charge details. Use the craft.charge.setPaymentOpitions(..) or craft.charge.setCheckoutOptions(..) to create this hidden input.

cardToken

The key payment token that's created by the jquery.charge.js handler. This is the single use, secure version of the card details the customer supplied.

Required Exceptions

You should never post card details directly to your server. This means your card inputs explicitly don't include the name attribute on them. Instead they should have a data-stripe attribute, which is picked up by the form javascript, and sent securely and directly to the stripe api.

For example - NEVER DO THIS.

Card Number
<input type="text" name="cardNumber"/> <!-- This is incorrect, never include the name attribute -->

Expiry
<input type="text" name="cardExpiry" placeholder="MM / YY"/> <!-- This is incorrect, never include the name attribute -->

CVC
<input type="text" name="cardCVC" placeholder="123"/> <!-- This is incorrect, never include the name attribute -->

The CORRECT form setup, excludes the name attributes, and instead has data-stripe attributes. Like this :

Card Number
<input type="text" data-stripe="number"/> <!-- correct usage of data attribute -->

Expiry
<input type="text" data-stripe="exp" placeholder="MM / YY"/> <!-- correct usage of data attribute -->

CVC
<input type="text"  data-stripe="cvc" placeholder="123"/> <!-- correct usage of data attribute -->