Stripe payment module for Vue Storefront

Last update: Nov 28, 2022

Overview

Stripe Payment module for Vue Storefront

Stripe Payment extension for vue-storefront, by Develo Design.

Installation

By hand (preferred):

git clone https://github.com/develodesign/vsf-payment-stripe.git ./vue-storefront/src/modules/payment-stripe

By yarn:

cd storefront/src/themes/default
yarn add https://github.com/develodesign/payment-stripe

Add the following Publishable API key also to your config/local.json and configure the stripe.apiKey to point to your Stripe details.

"stripe": {
    "apiKey": "my_publishable_api_key"
}

Registering the Stripe module

Add script import to ./src/modules/client.ts

import { PaymentStripeModule } from './payment-stripe'

export function registerClientModules () {
  ...
  registerModule(PaymentStripeModule)
}

Integrating the Stripe component with your theme

Go to storefront/src/themes/defalt/components/core/blocks/Checkout/Payment.vue

import { mapGetters } from 'vuex'
import PaymentStripe from 'src/modules/payment-stripe/components/PaymentStripe'

export default {
  components: {
    ...,
    PaymentStripe
  },
  computed: {
    ...mapGetters({
      paymentDetails: 'checkout/getPaymentDetails'
    })
  },

Then need add the component instance to template section with check on payment method v-if="paymentDetails.paymentMethod === 'stripe_payments'":

...

...
<div class="row fs16 mb35">
    <div class="col-xs-12 h4">
        ...
        <div class="col-xs-12">
            <h4>{{ $t('Payment method') }}h4>
        div>
        <div class="col-md-6 mb15">
            <label class="radioStyled"> {{ getPaymentMethod().title }}
            <input type="radio" value="" checked disabled name="chosen-payment-method">
            <span class="checkmark" />
            label>
        div>
        div>
    div>
    ...
    
    <div class="row mb35 stripe-container" v-if="paymentDetails.paymentMethod === 'stripe_payments'">
        <div class="col-xs-12">
            <payment-stripe/>
        div>
    div>
div>

Customization

You can also customize the appearance of Stripe elements using the style key using any of the official stripe style properties found here.

"stripe": {
    "apiKey": "my_example_api_key",
    "style": {
        "base": {
            "fontSize": "16px",
            "color": "#32325d"
        },
        "invalid": {
            "color": "#fa755a"
        }
    }
}

You can specifiy the card initialisation options with the options key. You can pass any the properites found here

"stripe": {
    "apiKey": "my_example_api_key",
    "style": {
        "base": {
            "fontSize": "16px",
            "color": "#32325d"
        },
        "invalid": {
            "color": "#fa755a"
        }
    },
    "options": {
        "hidePostalCode": true
    }
}

Backend Platform Support

Each back-end platform handles Stripe payment method processing in its own way. Due to this, it is difficult to support all platforms until each one has been specifically tested and accounted for. The following back-end platforms are supported.

We fully support the official Stripe module for Magento2, use the stripe_payments as method code.

To specify your backend platform for this module to handle it, if it is supported, add the backend_platform attribute in config/local.json. For example:

"stripe": {
    "apiKey": "my_example_api_key",
    "backendPlatform": "magento2",
    "paymentMethodCode": "stripe_payments"
}

Comments

Back-end Platform Compatibility
I understand that this module handles the payment side directly with Stripe and simply passes the token to the back-end platform of Vue Storefront on place order. But I'm curious what platforms this module currently supports? In order for it to support a back-end platform it would need to send the payment method code and data according to the platform's requirements.

I notice that the payment method "Stripe" (code stripe) is hard-coded to be injected as a payment method with this module. Shouldn't this be coming from the back-end platform's allowed payment methods? There are a few concerns with this approach.

Stripe might not always be available. For example we have restrictions of payment methods based on the storeview and the billing/shipping address. This logic for us is handled in Magento 2 (our VSF back-end platform) and the available payment methods returned from the API is updated accordingly.

The code used stripe isn't what Stripe's official Magento 2 module uses as the payment method code. They use stripe_payments for the Credit Card method, and they have a series of other methods available as well.

Duplicate Stripe payment methods - If our backend platform has Stripe Credit Card payment method enabled then it's going to add it to the list of payment methods returned when calling the API. In this situation we have two Stripe payment methods - the one from back-end and the one hard-coded in this module.

This does add some level of complexity to this if the methods are to be handled dynamically. For starters, the method code might be different for Magento 2 Stripe module vs some other e-commerce platform with Stripe support. I'm not sure if they make this consistent across all platforms or not. Additionally this means the module would need to have some way of ensuring only supported methods via Stripe are utilized. This could be as simple as a disclaimer in the README I suppose, stating which methods are currently supported. But then the logic in the module would need to check the method codes and know what to expect for each one that is supported based on what the platform uses.

I don't have a clear question in this issue (other than what back-end platforms are currently supported if any), and there is no clear answer to all my rambling. But I think this is a good start to a conversation and potential roadmap for this module.
opened by rain2o 4
Support for Payment Intents

Closes #21

Disclaimer - I have added some support for Magento 2 as far as how the token data should be formatted (discussed in #17 ) as part of this since we had to modify the way Stripe initiates the transaction. However, the Stripe Magento 2 module doesn't work via API in its current state, so these changes support as much as this module can, but now it depends on the back-end platforms to handle the rest. I have started conversations with Stripe to discuss the changes necessary on their module for supporting API checkout. I will try to update the issue linked above when I have any updates.

Due to the above disclaimer, I don't know if you'd prefer to wait on this or not. As it stands this module doesn't work with Magento 2 anyway (in my testing) so it's not like it breaks anything as far as M2 goes. I don't know about the other platforms already in use with this module.

opened by rain2o 3
Magento Error Array To String Conversion

Hey, when I want to pay with stripe Account, I got the following error in my Magento 2 log: main.CRITICAL: Report ID: webapi-5cd423334fe8e; Message: Notice: Array to string conversion in /opt/bitnami/apps/magento/htdocs/vendor/magento/framework/Reflection/TypeProcessor.php on line 473 {"exception":"[object] (Exception(code: 0): Report ID: webapi-5cd423334fe8e; Message: Notice: Array to string conversion in /opt/bitnami/apps/magento/htdocs/vendor/magento/framework/Reflection/TypeProcessor.php on line 473 at /opt/bitnami/apps/magento/htdocs/vendor/magento/framework/Webapi/ErrorProcessor.php:206, Exception(code: 0): Notice: Array to string conversion in /opt/bitnami/apps/magento/htdocs/vendor/magento/framework/Reflection/TypeProcessor.php on line 473 at /opt/bitnami/apps/magento/htdocs/vendor/magento/framework/App/ErrorHandler.php:61)"} []

opened by PatrickKluwig 3
Issue with Place Order button stuck

After installing and setup all its not creating order. Its got stuck while clicking on Place Order. No console errors are there. Please check the screenshot : http://prntscr.com/q8cqfp

opened by rohitrics 2

Outdated beforeRegistration signature

See in console:

You are using outdated signature for beforeRegistration hook that soon will be deprecated and module will stop working properly. Please update to the new signature that can be found in our docs: https://docs.vuestorefront.io/guide/modules/introduction.html#beforeregistration stripe

opened by dimasch 2

Payment Intents support

The notification at the top of Stripe's documentation for Elements indicates that Payment Intents should be used starting September 2019 for all business in Europe https://stripe.com/docs/stripe-js/elements/quickstart.

Additional information on using Payment Intents can be found here https://stripe.com/docs/payments/payment-intents/quickstart.

It looks like all integrations with Stripe should migrate to using this process as soon as possible. I did a quick look on Magento's module and it looks like they are already using Payment Intents. This should make things easier if anything changes with how back-end expects data.

opened by rain2o 2
In vuestorefront , After selected stripe payment option (did not display the input payment details like card-number..etc)

I'm trying stripe-payment integration in Vuestorefront, I follow the steps through this link: "https://github.com/develodesign/vsf-payment-stripe" But The strip payment option is displayed correctly on Vuestorefront, but after the selected stripe payment option (it did not display the required input payment details, such as card number ..etc) How to solve it?

opened by manojibcarockers 2
Stripe options

Enable the Stripe initialisation optons to be customised via the local.json file. See https://stripe.com/docs/js/elements_object/create_element?type=card

opened by paulpartington-cti 1
Stripe 'Pay' button is hidden inside iframe

I have done everything according to the instructions. And when I run the app, I can see the field to input card number, expire date, cvv, postal code.

But the button is hidden. Please help me to make the button visible. I`m stuck on this last step.

opened by vineeth030 1
After clicking on the "Place the order" button, the page loading icon appears and immediately disappears.

After clicking on the "Place the order" button, the page loading icon appears and immediately disappears. After the icon disappears, it takes up to 7 seconds until the success page opens. It’s not clear from the user whether the payment method works.
enhancement

opened by dimasch 1
In vuestorefront , After stripe-payment payment integration " order not placing issue "

I trying stripe-payment integration with vuestorefront i complete integration follow through this link:" https://github.com/develodesign/vsf-payment-stripe " After integration, I try to check payment process so i use test-card for payment. But payment is show two notification error: 1,Error: Error placing an order 2,The order can not be transfered because of server error. Order has been queued Do you know anything about this issue?

opened by manojibcarockers 1
Add 3DS Auth support for Cards

Add 3DS Auth support for Cards. I've already implemented it In some project like a year ago. Here you could find my commits: https://github.com/new-fantastic/vsf-payment-stripe/commits/master

Look from 25. Feb 2020

opened by Fifciu 12