Taking the First Payment

Taking your first payment is a painless experience, and you can get up and running in just a few minutes.

For the first payment we'll use Stripe Checkout as it's the simplest way to get started.

We'll start with a payment form, with a hidden action input of charge/charge.

<form method="post">
    <input type="hidden" name="action" value="charge/charge"/>
    ..
</form>

Next we need to define what we're charging, and supply the actual checkout button. That's as simple as using the charge.setCheckoutOptions method. Like this:

<form method="post">
    <input type="hidden" name="action" value="charge/charge"/>
    {% set options = { planAmount : 99.99} %}
    {{ craft.charge.setCheckoutOptions(options) }}
</form>

The charge.setCheckoutOptions sets all the appropriate markers for both Charge and Stripe Checkout, and gets ready to setup the modal javascript too.

Finally, before we're done we'll just add a few extra options for the checkout modal so it'll show a bit more information for our customers. For that, we'll just update our options array.

<form method="post">
    <input type="hidden" name="action" value="charge/charge"/>
    {% set options = { 
               planAmount : 99.99, 
               description : 'This is an extra description', 
               checkout : {
                   name: 'Acme Corp', 
              } } %}
    {{ craft.charge.setCheckoutOptions(options) }}
</form>

Bingo! That's all there is to it.

See this setup in action right now #

When a user clicks the payment button the Checkout modal will show, and Charge will handle the rest.


What's next? #

Stripe Checkout is great for simple setups, but has limits to the functionality and level of integration you can offer.

For more options using Checkout, check the full reference, and for next steps using Stripe.js and your own fully integrated payment forms, read on.