Stripe Checkout Plugin
The Stripe Checkout Plugin is an extension for Grav CMS.
This plugin is simple and extensible, this means that there is very little mandatory items for you. You are free to use any HTML elements, structure and styling you so wish.a
The plugin requires some use of the stripe dashboard which will be covered below. This is done for a few reasons, mainly, so that all customer data is stored only in Stripe, making it far easier to comply with GDPR rules as well as increasing security. The downside is that you need to work with both Stripe dashboard and Grav together.
Installing the Stripe Checkout plugin can be done in one of three ways: The GPM (Grav Package Manager) installation method lets you quickly install the plugin with a simple terminal command, the manual method lets you do so via a zip file, and the admin method lets you do so via the Admin Plugin.
GPM Installation (Preferred)
To install the plugin via the GPM, through your system's terminal (also called the command line), navigate to the root of your Grav-installation, and enter:
bin/gpm install stripe-checkout
This will install the Stripe Checkout plugin into your
/user/plugins-directory within Grav. Its files can be found under
To install the plugin manually, download the zip-version of this repository and unzip it under
/your/site/grav/user/plugins. Then rename the folder to
stripe-checkout. You can find these files on GitHub or via GetGrav.org.
You should now have all the plugin files under
NOTE: This plugin is a modular component for Grav which may require other plugins to operate, please see its blueprints.yaml-file on GitHub.
If you use the Admin Plugin, you can install the plugin directly by browsing the
Plugins-menu and clicking on the
Before configuring this plugin, you should copy the
user/config/plugins/stripe-checkout.yaml and only edit that copy.
Here is the default configuration and an explanation of available options:
enabled: true key: 'pk_test_xxxxxxxxxxxxxxxxxx' # Your public key from stripe is all that is required success_url: 'https://example.com/checkout?result=success' # The return url when ur payments are successful. It can be any url you desire, handling the display is up to you. cancel_url: 'https://example.com/checkout?result=canceled' # The return url when ur payments are unsuccessful. It can be any url you desire, handling the display is up to you. checkout_route: '/checkout'
Note that if you use the Admin Plugin, a file with your configuration named stripe-checkout.yaml will be saved in the
user/config/plugins/-folder once the configuration is saved in the Admin.
Preparation for Plugin in Stripe Dashboard
Before using the plugin in the Grav, you must also setup your Stripe account. I will assume you have already made a stripe account, and as such, first step is to go to your checkout settings.
Step 1: Checkout Settings Enable Checkout client-only integration. Optional: Set up your domains for security, enable apple pay and google pay.
Step 2: Create a new product Create a Product
Step 3: Create some SKUs under the product. Setup their price, image and name.
The way you organize your Products, Skus is entirely up to you and your needs.
Example, create a product called
Helmet X, and 3 SKUs called
Now that we have most of Stripe configuration completed, we move over to the Grav Site.
Configure the plugin, you will need to add your Stripe public key, a
cancel_url and a
cancel_url are used after the user completes payments. You can keep the original plugin locations or modify them to any page you wish. The
checkout_route is a custom page that the plugin builds so that you can customize your checkout without having it show in your
/user/pages - to avoid clients making modifications to the checkout page.
Create a page in Grav that you wish to use to sell products. You can test and see the plugin's example by making a page of type
example_product.md. In the frontmatter, I recommend adding two options:
--- title: My Product X price: 15 sku: sku_GUElmyYEy14yb5 ---
Now, all the plugin needs is the SKU, however the price is useful for displaying it prior to reaching stripe checkout.
I recommend looking at the
example_product.html.twig to see how to add the preset buttons for the plugin. There is no requirement to use these buttons/elements however they have instructions on them and good examples on how you can further expand your own customizations.
StripeCheckout.items. There are a number of useful methods you can use to manage your plugin. You can see all the available methods in
base.js as well as examples of how to use them in
Message me on the Grav Discord Server using @Ricardo if you have some questions, suggestions or in need of help.
I am currently working on a much more advanced version of this plugin, which is currently in progress. You can find it on SQUIDCART, it is not yet functional. However it will have many more features.