├── CHANGELOG.md
├── LICENSE
├── README.md
├── components
    └── PaymentStripe.vue
├── index.ts
└── package.json


/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | All notable changes to this project will be documented in this file.
 3 | 
 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 6 | 
 7 | ## [2.6.2] - 6.05.2020
 8 | - Added options for stripe customization - @paulpartington-cti
 9 | - Fixed readme - @ianrushton88
10 | - Added support translation for title of payment method - @dimasch
11 | 
12 | ## [2.6.1] - 13.04.2020
13 | 
14 | - Fixed placing order (event bus registration)
15 | 
16 | ## [2.6.0] - 12.04.2020
17 | 
18 | - Compatibility with VSF 1.11.x, updated documentation. - @dimasch (#43)
19 | 
20 | ## [2.5.3] - 09.12.2019
21 | 
22 | - Hide loader if we have card input validation errors. - @dimasch (#37)
23 | 
24 | ## [2.5.2] - 08.12.2019
25 | 
26 | - Fixed after clicking on the "Place the order" button, the page loading icon appears and immediately disappears - @dimasch (#35)
27 | 
28 | ## [2.5.1] - 01.12.2019
29 | 
30 | - Load the stripe dependencies on component mount level - prevent load on home page and etc. - @dimasch (#33)
31 | 
32 | ## [2.5.0] - 12.11.2019
33 | 
34 | ### New feature
35 | - Compatibility with the official Stripe magento2 module - @dimasch (#20)
36 | 
37 | ## [2.4.1] - 10.11.2019
38 | 
39 | ### Fixed
40 | - Added support the custom payment method code - @dimasch (#30)
41 | 
42 | ## [2.4.0] - 5.11.2019
43 | 
44 | ### Fixed
45 | - Added VSF module signature for beforeRegistration hook - @dimasch (#28)


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Develo Design.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Stripe Payment module for Vue Storefront
  2 | 
  3 | Stripe Payment extension for [vue-storefront](https://github.com/DivanteLtd/vue-storefront), by [Develo Design](https://develodesign.co.uk).
  4 | 
  5 | ![Imgur](https://i.imgur.com/nLbTi6N.png)
  6 | 
  7 | ## Installation
  8 | 
  9 | By hand (preferred):
 10 | ```shell
 11 | git clone https://github.com/develodesign/vsf-payment-stripe.git ./vue-storefront/src/modules/payment-stripe
 12 | ```
 13 | 
 14 | By yarn:
 15 | ```shell
 16 | cd storefront/src/themes/default
 17 | yarn add https://github.com/develodesign/payment-stripe
 18 | ```
 19 | 
 20 | Add the following **Publishable** API key also to your `config/local.json` and configure the `stripe.apiKey` to point to your Stripe details.
 21 | 
 22 | ```json
 23 | "stripe": {
 24 |     "apiKey": "my_publishable_api_key"
 25 | }
 26 | ```
 27 | 
 28 | ## Registering the Stripe module
 29 | 
 30 | Add script import to `./src/modules/client.ts`
 31 | 
 32 | ```js
 33 | import { PaymentStripeModule } from './payment-stripe'
 34 | 
 35 | export function registerClientModules () {
 36 |   ...
 37 |   registerModule(PaymentStripeModule)
 38 | }
 39 | ```
 40 | 
 41 | ## Integrating the Stripe component with your theme
 42 | 
 43 | Go to `storefront/src/themes/defalt/components/core/blocks/Checkout/Payment.vue`
 44 | 
 45 | ```js
 46 | import { mapGetters } from 'vuex'
 47 | import PaymentStripe from 'src/modules/payment-stripe/components/PaymentStripe'
 48 | 
 49 | export default {
 50 |   components: {
 51 |     ...,
 52 |     PaymentStripe
 53 |   },
 54 |   computed: {
 55 |     ...mapGetters({
 56 |       paymentDetails: 'checkout/getPaymentDetails'
 57 |     })
 58 |   },
 59 | ```
 60 | 
 61 | Then need add the component instance `<payment-stripe/>` to template section with check on payment method `v-if="paymentDetails.paymentMethod === 'stripe_payments'"`:
 62 | 
 63 | ```html
 64 | ...
 65 | <div class="row fs16 mb35">
 66 |     <div class="col-xs-12 h4">
 67 |         ...
 68 |         <div class="col-xs-12">
 69 |             <h4>{{ $t('Payment method') }}</h4>
 70 |         </div>
 71 |         <div class="col-md-6 mb15">
 72 |             <label class="radioStyled"> {{ getPaymentMethod().title }}
 73 |             <input type="radio" value="" checked disabled name="chosen-payment-method">
 74 |             <span class="checkmark" />
 75 |             </label>
 76 |         </div>
 77 |         </div>
 78 |     </div>
 79 |     ...
 80 |     <!-- The stripe method integration -->
 81 |     <div class="row mb35 stripe-container" v-if="paymentDetails.paymentMethod === 'stripe_payments'">
 82 |         <div class="col-xs-12">
 83 |             <payment-stripe/>
 84 |         </div>
 85 |     </div>
 86 | </div>
 87 | ```
 88 | 
 89 | ## Customization
 90 | 
 91 | You can also customize the appearance of Stripe elements using the `style` key using any of the official stripe style properties found [here](https://stripe.com/docs/stripe-js/reference#stripe-elements).
 92 | ```json
 93 | "stripe": {
 94 |     "apiKey": "my_example_api_key",
 95 |     "style": {
 96 |         "base": {
 97 |             "fontSize": "16px",
 98 |             "color": "#32325d"
 99 |         },
100 |         "invalid": {
101 |             "color": "#fa755a"
102 |         }
103 |     }
104 | }
105 | ```
106 | 
107 | You can specifiy the card initialisation options with the `options` key. You can pass any the properites found [here](https://stripe.com/docs/js/elements_object/create_element?type=card)
108 | ```json
109 | "stripe": {
110 |     "apiKey": "my_example_api_key",
111 |     "style": {
112 |         "base": {
113 |             "fontSize": "16px",
114 |             "color": "#32325d"
115 |         },
116 |         "invalid": {
117 |             "color": "#fa755a"
118 |         }
119 |     },
120 |     "options": {
121 |         "hidePostalCode": true
122 |     }
123 | }
124 | ```
125 | 
126 | ## Backend Platform Support
127 | 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.
128 | 
129 | We fully support the official [Stripe](https://stripe.com/docs/plugins/magento/install#download) module for Magento2, use the `stripe_payments` as method code.
130 | 
131 | 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:
132 | ```json
133 | "stripe": {
134 |     "apiKey": "my_example_api_key",
135 |     "backendPlatform": "magento2",
136 |     "paymentMethodCode": "stripe_payments"
137 | }
138 | ```
139 | 


--------------------------------------------------------------------------------
/components/PaymentStripe.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 
  3 |   <div class="mb15 mt20 vsf-stripe-container">
  4 |     <h4 class="mt0">
  5 |       <label for="vsf-stripe-card-element">
  6 |         Credit or debit card
  7 |       </label>
  8 |     </h4>
  9 |     <div class="bg-cl-secondary px20 py20">
 10 |       <form action="" id="payment-form">
 11 |         <div class="form-row">
 12 | 
 13 |           <div id="vsf-stripe-card-element">
 14 |             &nbsp;
 15 |             <!-- A Stripe Element will be inserted here. -->
 16 |           </div>
 17 | 
 18 |           <!-- Used to display Element errors. -->
 19 |           <div id="vsf-stripe-card-errors" role="alert">
 20 |             &nbsp;
 21 |           </div>
 22 |         </div>
 23 |       </form>
 24 |     </div>
 25 |   </div>
 26 | 
 27 | </template>
 28 | 
 29 | <script>
 30 | import { mapState } from 'vuex'
 31 | import i18n from '@vue-storefront/i18n'
 32 | import EventBus from '@vue-storefront/core/compatibility/plugins/event-bus'
 33 | 
 34 | export default {
 35 |   name: 'PaymentStripe',
 36 |   data () {
 37 |     return {
 38 |       stripe: {
 39 |         instance: null,
 40 |         elements: null,
 41 |         card: null
 42 |       }
 43 |     }
 44 |   },
 45 |   computed: mapState({
 46 |     stripeConfig: state => state.config.stripe
 47 |   }),
 48 |   beforeMount () {
 49 |     EventBus.$on('order-after-placed', this.onAfterPlaceOrder)
 50 |     // Ready to place order, handle anything we need to, generating, validating stripe requests & tokens ect.
 51 |     EventBus.$on('checkout-before-placeOrder', this.onBeforePlaceOrder)
 52 |   },
 53 |   beforeDestroy () {
 54 |     EventBus.$off('order-after-placed', this.onAfterPlaceOrder)
 55 |     EventBus.$off('checkout-before-placeOrder', this.onBeforePlaceOrder)
 56 |   },
 57 |   mounted () {
 58 |     // Load the stripe.js elements script.
 59 |     // As it's callback, Configure stripe to run.
 60 |     this.loadStripeDependencies(this.configureStripe)
 61 | 
 62 |     // Ready to place order, handle anything we need to, generating, validating stripe requests & tokens ect.
 63 |     EventBus.$on('checkout-payment-method-changed', (paymentMethodCode) => {
 64 |       if (paymentMethodCode !== this.stripeConfig.paymentMethodCode) {
 65 |         // unregister the extension placeorder handler
 66 |         EventBus.$off('checkout-before-placeOrder', this.onBeforePlaceOrder)
 67 |       }
 68 |     })
 69 |   },
 70 |   methods: {
 71 |     onAfterPlaceOrder () {
 72 |       // Stop display loader
 73 |       EventBus.$emit('notification-progress-stop')
 74 |     },
 75 |     onBeforePlaceOrder () {
 76 |       this.processStripeForm()
 77 |     },
 78 |     loadStripeDependencies (callback) {
 79 |       let stripeJsUrl = 'https://js.stripe.com/v3/'
 80 |       let docHead = document.getElementsByTagName('head')[0]
 81 |       let docScript = document.createElement('script')
 82 |       docScript.type = 'text/javascript'
 83 |       docScript.src = stripeJsUrl
 84 | 
 85 |       // When script is ready fire our callback.
 86 |       docScript.onreadystatechange = callback
 87 |       docScript.onload = callback
 88 |       docHead.appendChild(docScript)
 89 |     },
 90 |     configureStripe () {
 91 |       if (!this.stripeConfig.hasOwnProperty('apiKey')) {
 92 |         return false
 93 |       }
 94 | 
 95 |       // Create a new Stripe client.
 96 |       this.stripe.instance = window.Stripe(this.stripeConfig.apiKey)
 97 | 
 98 |       // Create an instance of Elements.
 99 |       this.stripe.elements = this.stripe.instance.elements()
100 | 
101 |       // Create the stripe elements card
102 |       this.createElements()
103 | 
104 |       // Add the event listeners for stripe.
105 |       this.bindEventListeners()
106 |     },
107 |     createElements () {
108 |       let style = this.stripeConfig.hasOwnProperty('style') ? this.stripeConfig.style : {}
109 |       let options = this.stripeConfig.hasOwnProperty('options') ? this.stripeConfig.options : {};
110 |       let cardOptions = {};
111 |       cardOptions.style = style;
112 |       Object.keys(options).forEach(function (option) {
113 |         cardOptions[option] = options[option];
114 |       });
115 |       // Create an instance of the card Element.
116 |       this.stripe.card = this.stripe.elements.create('card', cardOptions)
117 | 
118 |       // Add an instance of the card Element into the `card-element` <div>.
119 |       this.stripe.card.mount('#vsf-stripe-card-element')
120 |     },
121 |     bindEventListeners () {
122 |       // Handle real-time validation errors from the card Element.
123 |       this.stripe.card.addEventListener('change', this.onStripeCardChange)
124 |     },
125 |     onStripeCardChange (event) {
126 |       let displayError = document.getElementById('vsf-stripe-card-errors')
127 |       displayError.textContent = event.error ? event.error.message : ''
128 |     },
129 |     beforeDestroy () {
130 |       this.unbindEventListeners()
131 |     },
132 |     unbindEventListeners () {
133 |       this.stripe.card.removeEventListener('change', this.onStripeCardChange)
134 |     },
135 |     processStripeForm () {
136 |       let self = this
137 | 
138 |       // Start display loader
139 |       EventBus.$emit('notification-progress-start', [i18n.t('Placing Order'), '...'].join(''))
140 | 
141 |       // Create payment method with Stripe
142 |       this.stripe.instance.createPaymentMethod('card', this.stripe.card).then((result) => {
143 |         if (result.error) {
144 |           // Inform the user if there was an error.
145 |           let errorElement = document.getElementById('vsf-stripe-card-errors')
146 | 
147 |           errorElement.textContent = result.error.message
148 | 
149 |           // Stop display loader
150 |           EventBus.$emit('notification-progress-stop')
151 |         } else {
152 |           self.placeOrderWithPayload(this.formatTokenPayload(result.paymentMethod))
153 |         }
154 |       })
155 |     },
156 |     placeOrderWithPayload (payload) {
157 |       EventBus.$emit('checkout-do-placeOrder', payload)
158 |     },
159 |     formatTokenPayload (token) {
160 |       let platform = this.stripeConfig.hasOwnProperty('backendPlatform') ? this.stripeConfig.backendPlatform : 'default'
161 |       if (platform === 'magento2') {
162 |         return {
163 |           cc_save: false,
164 |           cc_stripejs_token: `${token.id}:${token.card.brand}:${token.card.last4}`
165 |         }
166 |       } else {
167 |         return token
168 |       }
169 |     }
170 |   }
171 | }
172 | </script>
173 | 
174 | <style lang="scss" scoped>
175 | 
176 |   .vsf-stripe-container {
177 |     label {
178 |       font-weight: 500;
179 |       font-size: 14px;
180 |       display: block;
181 |       margin-bottom: 8px;
182 |       color: #818992;
183 |     }
184 | 
185 |     .StripeElement {
186 |       background-color: white;
187 |       padding: 10px 12px;
188 |       border-radius: 4px;
189 |       border: 1px solid transparent;
190 |       box-shadow: 0 1px 3px 0 #e6ebf1;
191 |       -webkit-transition: box-shadow 150ms ease;
192 |       transition: box-shadow 150ms ease;
193 |     }
194 | 
195 |     .StripeElement--focus {
196 |       box-shadow: 0 1px 3px 0 #cfd7df;
197 |     }
198 | 
199 |     .StripeElement--invalid {
200 |       border-color: #fa755a;
201 |     }
202 | 
203 |     .StripeElement--webkit-autofill {
204 |       background-color: #fefde5 !important;
205 |     }
206 |   }
207 |   #vsf-stripe-card-errors {
208 |     margin: 8px auto 0;
209 |     color: #fa755a;
210 |   }
211 | </style>
212 | 


--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
 1 | import { StorefrontModule } from '@vue-storefront/core/lib/modules'
 2 | import i18n from '@vue-storefront/i18n';
 3 | 
 4 | export const PaymentStripeModule: StorefrontModule = function ({store, router, appConfig}) {
 5 | 
 6 |   const VSF_PAYMENT_CODE = appConfig.stripe.paymentMethodCode || 'stripe'
 7 | 
 8 |   // Update the methods
 9 |   let paymentMethodConfig = {
10 |     'title': i18n.t('Pay by Card (Stripe)'),
11 |     'code': VSF_PAYMENT_CODE,
12 |     'cost': 0,
13 |     'costInclTax': 0,
14 |     'default': false,
15 |     'offline': false,
16 |     'is_server_method': false
17 |   }
18 |   store.dispatch('checkout/addPaymentMethod', paymentMethodConfig)
19 | 
20 | }
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@develodesign/vsf-payment-stripe",
 3 |   "version": "2.6.2",
 4 |   "description": "A Stripe extension built for vue-storefront, by Develo Design.",
 5 |   "main": "lib/index.js",
 6 |   "directories": {
 7 |     "lib": "lib"
 8 |   },
 9 |   "scripts": {
10 |     "test": "echo \"Error: no test specified\" && exit 1"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/develodesign/vsf-payment-stripe.git"
15 |   },
16 |   "keywords": [
17 |     "vue-storefront-stripe",
18 |     "vsf-payment-stripe",
19 |     "develodesign/vue-storefront-stripe",
20 |     "develodesign",
21 |     "vue-storefront",
22 |     "divanteltd/vue-storefront"
23 |   ],
24 |   "author": "Mike Sheward <mike@develodesign.co.uk> (https://www.develodesign.co.uk)",
25 |   "maintainers": [
26 |     "Luke Collymore <luke@develodesign.co.uk> (https://www.develodesign.co.uk)",
27 |     "Mike Sheward <mike@develodesign.co.uk> (https://www.develodesign.co.uk)",
28 |     "Dmitry Schegolikhin <d.shegolihin@gmail.com> (https://www.develodesign.co.uk)"
29 |   ],
30 |   "license": "MIT",
31 |   "bugs": {
32 |     "url": "https://github.com/develodesign/vsf-payment-stripe/issues"
33 |   },
34 |   "homepage": "https://github.com/develodesign/vsf-payment-stripe#readme"
35 | }
36 | 


--------------------------------------------------------------------------------