Stripe Checkout plugin for Craft CMS 3.x
Bringing the power of Stripe Checkout to your Craft templates.
Requirements
This plugin requires Craft CMS 3.0.0-RC11 or later.
Installation
To install the plugin, follow these instructions.
-
Open your terminal and go to your Craft project:
cd /path/to/project
-
Then tell Composer to load the plugin:
composer require lukeyouell/craft3-stripecheckout
-
In the Control Panel, go to Settings → Plugins and click the “Install” button for Stripe Checkout.
Stripe Checkout Overview
Stripe Checkout is the best payment flow on web and mobile. It provides your users with a streamlined, mobile-ready payment experience that is constantly improving.
Configuring Stripe Checkout
Account Mode
Easily switch between test & live modes.
Default Currency
The default currency to be used, this can be overridden in your templates.
Test Credentials
Your test publishable & secret keys sourced from your Stripe dashboard.
Live Credentials
Your live publishable & secret keys sourced from your Stripe dashboard.
Stripe Webhook
For Stripe Checkout to function properly, you will need to create a Stripe webhook from within the Stripe Dashboard. Simply fire all Stripe events to https://www.yoursite.com/actions/stripe-checkout/webhook
Using Stripe
Setup
Setting up Stripe Checkout is very similar to using Stripe.js, except for the following:
- Set your form's
action
value tostripe-checkout/charge
Basic Example
<form action="" method="post">
<input type="hidden" name="action" value="stripe-checkout/charge">
<input type="hidden" name="redirect" value="{{ 'success?status={status}&id={id}'|hash }}">
{{ craft.stripeCheckout.checkoutOptions({
amount: 999
}) }}
</form>
checkoutOptions
will create a hidden encrypted input with all of the relevant details, along with the Stripe Checkout button and javascript.
Checkout Options
All of the standard Stripe Checkout parameters are supported, simply add them to your checkoutOptions
request.
Parameter | Expected value |
---|---|
amount |
Amount (in pence) |
locale |
User's preferred language |
name |
Name of your company or website |
description |
Description of what is being purchased |
image |
URL pointing to a square image. |
currency |
3-letter currency ISO code |
email |
Email address of your user |
label |
Text to be shown on the blue button |
panelLabel |
Label of the payment button in the Checkout form |
zipCode |
Whether Checkout should validate the billing postal code (true or false) |
billingAddress |
Whether Checkout should collect the user's billing address (true or false) |
shippingAddress |
Whether Checkout should collect the user's shipping address (true or false) |
allowRememberMe |
Whether to include the option to "Remember Me" for future purchases (true or false) |
metadata |
An array of additional input field names to pass as charge metadata |
Metadata
It's possible to pass additional data as charge metadata, simply supply the input field names in an array using the metadata
checkout option.
<input type="text" name="shippingComments">
{{ craft.stripeCheckout.checkoutOptions({
metadata: ['shippingComments']
}) }}
Full Example
<form action="" method="post">
<input type="hidden" name="action" value="stripe-checkout/charge">
<input type="hidden" name="redirect" value="{{ 'success?status={status}&id={id}'|hash }}">
<label>Size</label>
<select name="sizes[]" multiple>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
<label>Shipping comments</label>
<textarea name="shippingComments"></textarea>
{{ craft.stripeCheckout.checkoutOptions({
amount: 10000,
locale: 'auto',
name: 'Demo',
description: 'This is a demo',
image: 'https://www.yourwebsite.com/images/checkout.png',
currency: 'gbp',
email: 'joe.bloggs@yourwebsite.com',
label: 'Pay with Card',
panelLabel: 'Pay',
zipCode: true,
billingAddress: true,
shippingAddress: true,
allowRememberMe: true,
metadata: ['sizes', 'shippingComments']
}) }}
</form>
Redirecting
Once submitted, the user will be redirected to the location specified in the redirect
input, which must contain a hashed value.
The full Stripe charge object will be available to pass along in the url.
Displaying Stripe Charge
Post submission
The Stripe charge object is passed as flash data and can be accessed by using the following:
{% set charge = craft.app.session.hasFlash('charge') %}
Stripe Roadmap
Some things to do, and ideas for potential features:
- Refunds from the CP
- Multi environment support
Brought to you by Luke Youell