{"id":13745896,"url":"https://github.com/develodesign/vsf-payment-stripe","last_synced_at":"2025-04-30T17:04:27.389Z","repository":{"id":57394161,"uuid":"127404189","full_name":"develodesign/vsf-payment-stripe","owner":"develodesign","description":"Stripe payment module for Vue Storefront","archived":false,"fork":false,"pushed_at":"2020-06-21T12:27:11.000Z","size":83,"stargazers_count":25,"open_issues_count":3,"forks_count":15,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-30T17:04:14.746Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/develodesign.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-30T08:39:28.000Z","updated_at":"2023-08-17T21:49:41.000Z","dependencies_parsed_at":"2022-09-26T17:00:31.194Z","dependency_job_id":null,"html_url":"https://github.com/develodesign/vsf-payment-stripe","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/develodesign%2Fvsf-payment-stripe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/develodesign%2Fvsf-payment-stripe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/develodesign%2Fvsf-payment-stripe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/develodesign%2Fvsf-payment-stripe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/develodesign","download_url":"https://codeload.github.com/develodesign/vsf-payment-stripe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251748946,"owners_count":21637417,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T06:00:40.338Z","updated_at":"2025-04-30T17:04:27.357Z","avatar_url":"https://github.com/develodesign.png","language":"Vue","funding_links":[],"categories":["Resources for Vue Storefront 1","Resources for Vue Storefront"],"sub_categories":["Official Resources - v1","External Resources"],"readme":"# Stripe Payment module for Vue Storefront\n\nStripe Payment extension for [vue-storefront](https://github.com/DivanteLtd/vue-storefront), by [Develo Design](https://develodesign.co.uk).\n\n![Imgur](https://i.imgur.com/nLbTi6N.png)\n\n## Installation\n\nBy hand (preferred):\n```shell\ngit clone https://github.com/develodesign/vsf-payment-stripe.git ./vue-storefront/src/modules/payment-stripe\n```\n\nBy yarn:\n```shell\ncd storefront/src/themes/default\nyarn add https://github.com/develodesign/payment-stripe\n```\n\nAdd the following **Publishable** API key also to your `config/local.json` and configure the `stripe.apiKey` to point to your Stripe details.\n\n```json\n\"stripe\": {\n    \"apiKey\": \"my_publishable_api_key\"\n}\n```\n\n## Registering the Stripe module\n\nAdd script import to `./src/modules/client.ts`\n\n```js\nimport { PaymentStripeModule } from './payment-stripe'\n\nexport function registerClientModules () {\n  ...\n  registerModule(PaymentStripeModule)\n}\n```\n\n## Integrating the Stripe component with your theme\n\nGo to `storefront/src/themes/defalt/components/core/blocks/Checkout/Payment.vue`\n\n```js\nimport { mapGetters } from 'vuex'\nimport PaymentStripe from 'src/modules/payment-stripe/components/PaymentStripe'\n\nexport default {\n  components: {\n    ...,\n    PaymentStripe\n  },\n  computed: {\n    ...mapGetters({\n      paymentDetails: 'checkout/getPaymentDetails'\n    })\n  },\n```\n\nThen need add the component instance `\u003cpayment-stripe/\u003e` to template section with check on payment method `v-if=\"paymentDetails.paymentMethod === 'stripe_payments'\"`:\n\n```html\n...\n\u003cdiv class=\"row fs16 mb35\"\u003e\n    \u003cdiv class=\"col-xs-12 h4\"\u003e\n        ...\n        \u003cdiv class=\"col-xs-12\"\u003e\n            \u003ch4\u003e{{ $t('Payment method') }}\u003c/h4\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"col-md-6 mb15\"\u003e\n            \u003clabel class=\"radioStyled\"\u003e {{ getPaymentMethod().title }}\n            \u003cinput type=\"radio\" value=\"\" checked disabled name=\"chosen-payment-method\"\u003e\n            \u003cspan class=\"checkmark\" /\u003e\n            \u003c/label\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    ...\n    \u003c!-- The stripe method integration --\u003e\n    \u003cdiv class=\"row mb35 stripe-container\" v-if=\"paymentDetails.paymentMethod === 'stripe_payments'\"\u003e\n        \u003cdiv class=\"col-xs-12\"\u003e\n            \u003cpayment-stripe/\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Customization\n\nYou 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).\n```json\n\"stripe\": {\n    \"apiKey\": \"my_example_api_key\",\n    \"style\": {\n        \"base\": {\n            \"fontSize\": \"16px\",\n            \"color\": \"#32325d\"\n        },\n        \"invalid\": {\n            \"color\": \"#fa755a\"\n        }\n    }\n}\n```\n\nYou 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)\n```json\n\"stripe\": {\n    \"apiKey\": \"my_example_api_key\",\n    \"style\": {\n        \"base\": {\n            \"fontSize\": \"16px\",\n            \"color\": \"#32325d\"\n        },\n        \"invalid\": {\n            \"color\": \"#fa755a\"\n        }\n    },\n    \"options\": {\n        \"hidePostalCode\": true\n    }\n}\n```\n\n## Backend Platform Support\nEach 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.\n\nWe fully support the official [Stripe](https://stripe.com/docs/plugins/magento/install#download) module for Magento2, use the `stripe_payments` as method code.\n\nTo 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:\n```json\n\"stripe\": {\n    \"apiKey\": \"my_example_api_key\",\n    \"backendPlatform\": \"magento2\",\n    \"paymentMethodCode\": \"stripe_payments\"\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelodesign%2Fvsf-payment-stripe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevelodesign%2Fvsf-payment-stripe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelodesign%2Fvsf-payment-stripe/lists"}