This tag acts as some syntactic sugar for Stripe Checkout. It simplifies your templates.
The server-side processing is up to you.
A shortcut to placing Stripe.js on your page. Put this at the bottom of your layout.
{{ stripe:js }}
Outputs:
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
A shortcut for generating a Stripe Checkout form.
Can be used as a single tag, or tag pair. When using as a tag pair, the content between the
tags will be injected inside the generated <form>. This is useful for adding hidden
fields that your server side processing would need.
{{ stripe:checkout action="/my-action" amount="500" description="T-shirt" }}
<input type="hidden" name="foo" value="bar" />
{{ /stripe:checkout }}
Outputs:
<form action="/my-action" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-amount="500"
data-name="My Company"
data-description="T-shirt"
data-image="/logo.png"
...
></script>
<input type="hidden" name="foo" value="bar" />
</form>
The action parameter specifies where the form will POST to after receiving a token from Stripe.
The server-side logic is up to you to develop with your own addon.
Any configuration option listed in the Stripe Checkout docs are available to you on the tag
without the data- prefix, and with underscores instead of dashes.
For example, where in the docs it says data-zip-code="true", you'd use zip_code="true".
You may create a site/addons/stripe.yaml file containing any parameters that should be used by
all {{ stripe:checkout }} tags on your site.
A great example would be to include your key, company name, logo image, etc.
name: Statamic
image: http://site.com/logo.png
key: pk_test_123456789