Stripe payment module for Vue Storefront

Overview

Stripe Payment module for Vue Storefront

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

Imgur

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'":

...

{{ $t('Payment method') }}

...
">
...
<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

    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.

    1. 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.
    2. 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.
    3. 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

    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

    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

    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

    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

    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)

    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

    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

    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. stripe-pay-button

    opened by vineeth030 1
  • After clicking on the

    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

    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

    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
Owner
Develo
Develo
Paypal payment module for Vue Storefront

This is the PayPal Payment module for Vue Storefront PayPal Payment Magento 1 & 2 module for vue-storefront Tested with VSF 1.12.x This module is for

Develo 46 Mar 19, 2022
💳 Adyen Payment Module for Nuxt.js

nuxt-adyen-module Adyen Module for Nuxt.js ?? Release Notes Setup Add nuxt-adyen-module dependency to your project yarn add nuxt-adyen-module # or npm

Jakub Andrzejewski 7 Dec 21, 2021
PrestaShop integration with Vue Storefront created by Binshops.

Vue Storefront 2 eCommerce integration with PrestaShop This repository is a PrestaShop integration for Vue Storefront 2. Beta version. Installation in

Binshops 8 Sep 17, 2021
Vue Storefront Layer0 Example

Vue Storefront Layer0 Example This Vue Storefront app uses CommerceTools and is configured to deploy on Layer0. Demo https://layer0-docs-layer0-vue-st

Andrew B. 1 Jun 4, 2022
Vue Storefront 2 integration with PrestaShop

Convert your traditional PrestaShop website into a fast, mobile friendly and modern website.

Vue Storefront - Community 38 Nov 21, 2022
A Vue Plugin for Paystack payment gateway

A Vue Plugin for Paystack payment gateway

t0nto 8 Oct 1, 2022
This helps you accept payment using Korapay’s Collection Modal in your Vue app

Korapay for Vue 2.x This helps you accept payment using Korapay’s Collection Modal in your Vue app Install Vue Install the npm package: npm install --

Oluwole Adebiyi 8 Jun 6, 2021
The simple Paypal payment method for magento2

DEPRECATED! Don't use this module! Now used out of the box Magento2 Paypal module as backend for VSF. The PayPal payment module for magento2 This API

Develo 2 Aug 12, 2020
Build an end-to-end e-commerce App with Vue, Nuxt, and appbase.io. Uses Auth0 for authentication, Stripe for checkout, and Heroku / Vercel for deployment.

Build an end-to-end e-commerce App with Vue, Nuxt, and appbase.io (for building search). Uses Auth0 for authentication, Stripe for checkout, and Heroku / Vercel for deployment.

null 11 Oct 13, 2022
A sample shop built with Nuxt, Stripe, Firebase and Serverless Functions

buefy-shop Demo production - dev Inspired by sample-vue-shop Serverless lambda function used for stripe Build Setup # install dependencies $ yarn inst

null 246 Oct 20, 2022
Loading wrapper for Stripe.js

Stripe.js ES Module Use Stripe.js as an ES module. Note: To be PCI compliant, you must load Stripe.js directly from https://js.stripe.com. You cannot

Stripe 429 Nov 28, 2022
Nuxt-Ecommerce - Ecommerce Store with Netlify Functions and Stripe

?? Ecommerce Store with Netlify Functions and Stripe A serverless function to pr

null 1 Mar 8, 2022
Cookie Store (Appwrite + Stripe)

Appwrite + Stripe integration showcase

Matej Bačo 7 Sep 4, 2022
WordPress module for Vue.js, PWA ready, with full support for Vuex Store, Vue Router, Vue SSR and Nuxt.js.

WordPress module for Vue.js, PWA ready, with full support for Vuex Store, Vue Router, Vue SSR and Nuxt.js.

Vue WordPress 26 Apr 9, 2022
A vue application which provides read-only function without authentication or post module

Elog mobile Elog mobile web pages developed and deployed at CSNS (China Spallation Neutron Source), it is a lightweight web application which provides

null 1 Jun 6, 2022
Vue module, which is used to convert html content into mosaic.

Vue module, which is used to convert html content into mosaic.

kidoki 7 Jul 21, 2022
The frontend service for developer module of EdgeGallery platform

developer-fe Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Ru

EdgeGallery 21 Jan 11, 2022
The frontend service for user management module of EdgeGallery platform.

user_management Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

EdgeGallery 22 Jan 5, 2022