A simple plugin that provides a checkout button and simple backend integration with the the awesome Stripe service for payment handling on any OctoberCMS site.
- Create a free account on Stripe.
- Login to Stripe once you have confirmed your email address.
- Visit https://dashboard.stripe.com/account/apikeys and make a copy of both your Secret and Publishable keys. Make sure to use the pair relevant to what you are doing, aka, testing or working on your live server.
- Visit https://dashboard.stripe.com/account/webhooks and create a URI where you wish to recieve webhooks from Stripe. This is basically where Stripe would send various events for you to handle. Make a note of this URI as it will be needed later on during setting preferences for the plugin in your site's backend.
- Visit your own site's backend panel and keep reading.
- For now, this plugin has a dependency on the RainLab.User plugin. Hopefully we will be able to change that in the near future.
- Create a folder called "sublimearts" in your project's "plugins" directory.
- Clone or download this repo inside the directory you created above. Make sure this new cloned/downloaded directory is renamed to "sublimestripe". Your directory structure should look something like
OctoberSite\plugins\sublimearts\sublimestripe. - Login to the Backend and visit Settings. Look for Sublime Stripe under MISC or just search for "Stripe" in the left sidebar on the Settings page.
- Set your API keys in the fields provided. Move on to other tabs.
- Visit every tab in Sublime Stripe Settings, pay attention to comments under each field and make sure you do not miss anything.
- Visit your project root in the terminal and run
php artisan plugin:refresh SublimeArts.SublimeStripe.
Sublime Stripe provides 2 components, both of which are required.
- Include the "stripeJS" component and the
{% scripts %}tag in any layout that needs to host a page where the checkout button might need to appear. Make sure the component is included BEFORE the{% scripts %}tag. Your setup should look something like this:
description = "Master layout"
[stripeJS]
==
<!DOCTYPE html>
<html>
<head>
<title>Demo site for SublimeStripe Plugin</title>
<link rel="stylesheet" href="{{ 'assets/css/vendor.css'|theme }}">
<link rel="stylesheet" href="{{ 'assets/css/theme.css'|theme }}">
</head>
<body>
<!-- Content -->
<section id="layout-content" class="container-fluid">
{% page %}
</section>
<!-- Scripts -->
<script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>
<script src="{{ 'assets/vendor/bootstrap.js'|theme }}"></script>
{% component "stripeJS" %}
{% framework extras %}
{% scripts %}
</body>
</html>- Hunt down the plugin/component that provides your product listing. In that component add "stripeCheckoutButton" component as a dependency by adding the following line in your component's
init()method like so:
public function init()
{
$this->addComponent('SublimeArts\SublimeStripe\Components\CheckoutButton', 'checkoutButton', []);
}- Now when you need to display a button to kick off the Stripe Payment handling process, just include the "stripeCheckoutButton" component and pass your products' id to the
productIdcomponent property. Example:
{% component "checkoutButton" productId=product.id %}- Too much to list here. This is still very much a work in progress. I will keep updating this list in the coming days.
- Write tests!!!
- Clean up CheckoutRequest. Very hacky right now.
- Account for Subscriptions.
- Setup more useful backend pages.
- Figure out integration with User models. Either add a dependency on RainLab.User or allow for any custom User model to be used which might end up being tricky.
- Stripe webhooks integration.
- Add transactional email and some mail templates.