Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/develodesign/vsf-payment-stripe
Stripe payment module for Vue Storefront
https://github.com/develodesign/vsf-payment-stripe
Last synced: 2 months ago
JSON representation
Stripe payment module for Vue Storefront
- Host: GitHub
- URL: https://github.com/develodesign/vsf-payment-stripe
- Owner: develodesign
- License: mit
- Created: 2018-03-30T08:39:28.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-21T12:27:11.000Z (over 4 years ago)
- Last Synced: 2024-05-22T17:34:06.780Z (4 months ago)
- Language: Vue
- Homepage:
- Size: 81.1 KB
- Stars: 25
- Watchers: 6
- Forks: 17
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vuestorefront - Stripe Payment integration
README
# Stripe Payment module for Vue Storefront
Stripe Payment extension for [vue-storefront](https://github.com/DivanteLtd/vue-storefront), by [Develo Design](https://develodesign.co.uk).
## Installation
By hand (preferred):
```shell
git clone https://github.com/develodesign/vsf-payment-stripe.git ./vue-storefront/src/modules/payment-stripe
```
By yarn:
```shell
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.
```json
"stripe": {
"apiKey": "my_publishable_api_key"
}
```
## Registering the Stripe module
Add script import to `./src/modules/client.ts`
```js
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`
```js
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'"`:
```html
...
...
{{ $t('Payment method') }}
{{ getPaymentMethod().title }}
...
```
## Customization
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).
```json
"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](https://stripe.com/docs/js/elements_object/create_element?type=card)
```json
"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](https://stripe.com/docs/plugins/magento/install#download) 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:
```json
"stripe": {
"apiKey": "my_example_api_key",
"backendPlatform": "magento2",
"paymentMethodCode": "stripe_payments"
}
```