37

Product support

Get help in the plugin support forum.

  • Added on May 1, 2019
  • Current version: 1.0.5
  • Compatibility
    October CMS v3.x not tested
    October CMS v2.x use latest
    October CMS v1.x use latest
  • License: Regular / Extended
  • Created by

Categories

Stripe Payment Gateway for Shopaholic plugin

Installation guide

Add omnipay/stripe and ignited/laravel-omnipay packages to the composer.json of your project.

{
    "require": [
     ...
        "ignited/laravel-omnipay": "3.*",
        "omnipay/stripe": "^3.1"
    ],

Execute below at the root of your project.

composer update

Setting up the payment method

In Settings > Catalog Configuration > Payment Methods create new payment method. Choose Stripe payment gateway and create.

Enter your Stripe public key in "API Key public" field and your secret key in "apiKey" fields.

PaymentCardForm component

Collecting user bank card details to process the order.

You have 2 options: make payment request right after order is created (using MakeOrder component) or first create the order, then collect card details for payment request and finally do the payment request (using OrderPage component).

Payment using MakeOrder component

In this approach you need to integrate stripe payment form (Stripe.js quickstart) with PaymentCardForm component and MakeOrder form and generate a stripe token from the user's input. Don't forget to insert your public Stripe API key into sample stripe js code. Then you need to save this token to the order record into the payment_token field using 'shopaholic.order.after_create' event.

Also if the Stripe is default gateway your application uses - you can set auto assigning Stripe payment method to every order created.

Example of front-end implementation:

stripe.createToken(card).then(function(result) {
    if (result.error) {
        // Inform the user if there was an error.
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
    } else {
        // Send the token to your server.
        stripeTokenHandler(result.token);
    }
});

function stripeTokenHandler(token) {
    makeOrder({
        'stripeToken': token.id,
        'order': {
            'payment_method_id': $('[name="order[payment_method_id]"]').val()
        }
    });
}

function makeOrder(data_additional) {
    var data = {
        'order': {
            'property': {
                'address': $('#address-field').val(),
                'city': $('#city-field').val(),
                'message': $('#message-field').val()
            }
        },
        'user': {
            'email': $('#email-field').val(),
            'name': $('#name-field').val()
        }
    };
    let data_merged = {...data, ...data_additional};

    $.request('MakeOrder::onCreate', {
        'data': data_merged
    });
}

Payment using OrderPage component

This approach allows to first create the order and then to collect user's card details separately. Here you need to use PaymentCardForm independently also integrating with (Stripe.js bank card form). PaymentCardForm onUpdateToken method will save generated token to the order (expecting stripeToken post parameter).

[PaymentCardForm]
mode = "ajax"
redirect_on = 1
redirect_page = "order_success"
slug = "{{ :slug }}"
slug_required = 1
==
{% if PaymentCardForm.get() %}
<form method="post" id="payment-form">
    <div class="form-row">
        <label for="card-element">
            Credit or debit card
        </label>
        <div id="card-element">
            <!-- A Stripe Element will be inserted here. -->
        </div>

        <!-- Used to display form errors. -->
        <div id="card-errors" role="alert"></div>
    </div>

    <button>Submit Payment</button>
</form>
{% endif %}

<script>
// js code from Stripe.js quickstart link replacing public Stripe API key with your own
var stripe = Stripe({{ PaymentCardForm.get().payment_method.getObject.getProperty('api_key_public') }});
</script>

Then using OrderPage component and it's method onPurchase you can trigger the payment request to Stripe using saved token as payment source.

Payment Intent example (thanks to Vojta Svoboda)

New method PaymentCardForm.getPaymentIntentClientSecret() available from v1.0.4.

title = "Order complete"
url = "/checkout/:slug"
layout = "eshop"
is_hidden = 0

[OrderPage]
slug = "{{ :slug }}"
slug_required = 1

[PaymentCardForm]
mode = "ajax"
redirect_on = 1
redirect_page = "order-complete"
slug = "{{ :slug }}"
slug_required = 1
==
{% set order = PaymentCardForm.get() %}
{% set payment = order.payment_method.getObject() %}

{% if order.status_id == 1 and payment.gateway_id == "Stripe\\Checkout" %}
    <form method="post" id="payment-form">
        <button>Submit payment</button>
    </form>

    <script>
      $('#payment-form').on('submit', function (e) {
        $.request('OrderPage::onPurchase');
      });
    </script>
{% endif %}

License

© 2019, under Commercial License.

Developed by Art Gek.

1.0.5

Stripe payment method to Stripe Charge; Stripe Payment Intents and Stripe Checkout methods added

Feb 14, 2022

1.0.4

Payment Intent method with example

Jan 30, 2022

1.0.3

apiKey field back: called Client Secret

Jan 10, 2022

1.0.2

Omnipay v3 | clientSecret field

Jan 10, 2022

1.0.1

Fix compatibility with OctoberCMS v2. Ability to Stripe select payment gateway in payment method form.

Jan 10, 2022

1.0.0

Initialize plugin.

May 01, 2019