{"id":13701453,"url":"https://github.com/ectoflow/vue-stripe-elements","last_synced_at":"2025-05-04T21:30:56.850Z","repository":{"id":42363508,"uuid":"82951122","full_name":"ectoflow/vue-stripe-elements","owner":"ectoflow","description":"A Vue 2 component collection for Stripe.js","archived":true,"fork":false,"pushed_at":"2024-02-20T08:31:59.000Z","size":386,"stargazers_count":530,"open_issues_count":0,"forks_count":124,"subscribers_count":29,"default_branch":"master","last_synced_at":"2024-11-13T07:35:57.231Z","etag":null,"topics":["checkout","payments","stripe","stripe-elements","vue","vue-component","vue-stripe"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ectoflow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://paypal.me/softbeehive"]}},"created_at":"2017-02-23T17:09:19.000Z","updated_at":"2024-07-16T17:51:47.000Z","dependencies_parsed_at":"2024-01-02T23:39:42.968Z","dependency_job_id":"31234cf6-5794-474d-b6c4-d4a7140926c4","html_url":"https://github.com/ectoflow/vue-stripe-elements","commit_stats":{"total_commits":50,"total_committers":13,"mean_commits":"3.8461538461538463","dds":0.5800000000000001,"last_synced_commit":"f79b90213b5a1ebd4dc5b80b26c1505e4a03cde6"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ectoflow%2Fvue-stripe-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ectoflow%2Fvue-stripe-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ectoflow%2Fvue-stripe-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ectoflow%2Fvue-stripe-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ectoflow","download_url":"https://codeload.github.com/ectoflow/vue-stripe-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252403814,"owners_count":21742446,"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":["checkout","payments","stripe","stripe-elements","vue","vue-component","vue-stripe"],"created_at":"2024-08-02T20:01:39.239Z","updated_at":"2025-05-04T21:30:56.492Z","avatar_url":"https://github.com/ectoflow.png","language":"JavaScript","funding_links":["https://paypal.me/softbeehive"],"categories":["JavaScript","Components \u0026 Libraries","Utilities [🔝](#readme)"],"sub_categories":["Utilities"],"readme":"# ⚠️ Deprecated ⚠️\nThis package is no longer maintained. Vue 2 [reached its end-of-life](https://blog.vuejs.org/posts/vue-2-eol) on December 31st, 2023.\n\n# Vue Stripe Elements\n- Vue 2: deprecated ❗️\n- Vue 3: use [vue-stripe-js](https://github.com/ectoflow/vue-stripe-js) ✅\n\n# Quickstart\n\n### 1. Install package:\n\n```bash\n# npm\nnpm i vue-stripe-elements-plus --save-dev\n\n# yarn\nyarn add vue-stripe-elements-plus --dev\n```\n\n### 2. Add Stripe.js library to the page:\n```\n\u003cscript src=\"https://js.stripe.com/v3/\"\u003e\u003c/script\u003e\n```\n\u003e Alternatively, you can load Stripe library dynamically. Just make sure it's ready before your components mount.\n\n### 3. Use built-in components\nCreate card\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"payment-simple\"\u003e\n    \u003cStripeElements\n      :stripe-key=\"stripeKey\"\n      :instance-options=\"instanceOptions\"\n      :elements-options=\"elementsOptions\"\n      #default=\"{ elements }\" // attention: important part!\n      ref=\"elms\"\n    \u003e\n      \u003cStripeElement\n        type=\"card\"\n        :elements=\"elements\"\n        :options=\"cardOptions\"\n        ref=\"card\"\n      /\u003e\n    \u003c/StripeElements\u003e\n    \u003cbutton @click=\"pay\" type=\"button\"\u003ePay\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { StripeElements, StripeElement } from 'vue-stripe-elements-plus'\n\nexport default {\n  name: 'PaymentSimple',\n\n  components: {\n    StripeElements,\n    StripeElement\n  },\n\n  data () {\n    return {\n      stripeKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', // test key, don't hardcode\n      instanceOptions: {\n        // https://stripe.com/docs/js/initializing#init_stripe_js-options\n      },\n      elementsOptions: {\n        // https://stripe.com/docs/js/elements_object/create#stripe_elements-options\n      },\n      cardOptions: {\n        // reactive\n        // remember about Vue 2 reactivity limitations when dealing with options\n        value: {\n          postalCode: ''\n        }\n        // https://stripe.com/docs/stripe.js#element-options\n      }\n    }\n  },\n\n  methods: {\n    pay () {\n      // ref in template\n      const groupComponent = this.$refs.elms\n      const cardComponent = this.$refs.card\n      // Get stripe element\n      const cardElement = cardComponent.stripeElement\n\n      // Access instance methods, e.g. createToken()\n      groupComponent.instance.createToken(cardElement).then(result =\u003e {\n        // Handle result.error or result.token\n      })\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### 4. Get advanced\nCreate multiple elements\n\n```html\n\u003cStripeElements\n  :stripe-key=\"stripeKey\"\n  :instance-options=\"instanceOptions\"\n  :elements-options=\"elementsOptions\"\n  #default=\"{ elements }\" // attention: important part!\n\u003e\n  \u003cStripeElement\n    type=\"cardNumber\"\n    :elements=\"elements\"\n    :options=\"cardNumberOptions\"\n  /\u003e\n  \u003cStripeElement\n    type=\"postalCode\"\n    :elements=\"elements\"\n    :options=\"postalCodeOptions\"\n  /\u003e\n\u003c/StripeElements\u003e\n```\n\n### 5. Go wild\nYou can even create multiple groups, don't ask me why. It's possible.\n\n```html\n\u003cStripeElements\n  :stripe-key=\"stripeKey1\"\n  :instance-options=\"instanceOptions1\"\n  :elements-options=\"elementsOptions1\"\n  #default=\"{ elements }\" // attention: important part!\n\u003e\n  \u003cStripeElement\n    :elements=\"elements\"\n    :options=\"cardOptions\"\n  /\u003e\n\u003c/StripeElements\u003e\n\u003cStripeElements\n  :stripe-key=\"stripeKey2\"\n  :instance-options=\"instanceOptions2\"\n  :elements-options=\"elementsOptions2\"\n  #default=\"{ elements }\" // attention: important part!\n\u003e\n  \u003cStripeElement\n    type=\"iban\"\n    :elements=\"elements\"\n    :options=\"ibanOptions\"\n  /\u003e\n\u003c/StripeElements\u003e\n```\n\n# Styles\nNo base style included. Main reason: overriding it isn't fun. Style as you wish via element options: [see details](https://stripe.com/docs/js/appendix/style).\n\n# API Reference\n\n## StripeElements.vue\nThink of it as of individual group of elements. It creates stripe instance and elements object.\n\n```js\nimport { StripeElements } from 'vue-stripe-elements-plus'\n```\n\n### props\n```js\n// https://stripe.com/docs/js/initializing#init_stripe_js-options\nstripeKey: {\n  type: String,\n  required: true,\n},\n// https://stripe.com/docs/js/elements_object/create#stripe_elements-options\ninstanceOptions: {\n  type: Object,\n  default: () =\u003e ({}),\n},\n// https://stripe.com/docs/stripe.js#element-options\nelementsOptions: {\n  type: Object,\n  default: () =\u003e ({}),\n},\n```\n\n### data\nYou can access `instance` and `elements` by adding ref to StripeElements component.\n```js\n// data of StripeElements.vue\ninstance: {},\nelements: {},\n```\n\n### default scoped slot\nElegant solution for props. Really handy because you can make `instance` and `elements` available to all children without adding extra code.\n\n```html\n\u003c!-- Isn't it cool? I really like it! --\u003e\n\u003cStripeElements #default=\"{elements, instance}\"\u003e\n  \u003cStripeElement :elements=\"elements\" /\u003e\n  \u003cCustomComponent :instance=\"instance\" /\u003e\n\u003c/StripeElements\u003e\n```\n\n## StripeElement.vue\nUniversal and type agnostic component. Create any element supported by Stripe.\n\n### props\n```js\n// elements object\n// https://stripe.com/docs/js/elements_object/create\nelements: {\n  type: Object,\n  required: true,\n},\n// type of the element\n// https://stripe.com/docs/js/elements_object/create_element?type=card\ntype: {\n  type: String,\n  default: () =\u003e 'card',\n},\n// element options\n// https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options\noptions: {\n  type: [Object, undefined],\n},\n```\n\n### data\n```js\nstripeElement\ndomElement\n```\n\n### options\nElement options are reactive. Recommendation: don't use v-model on `StripeElement`, instead pass value via options.\n\n```js\ndata() {\n  return {\n    elementOptions: {\n      value: {\n        postalCode: ''\n      }\n    }\n  }\n},\n\nmethods: {\n  changePostalCode() {\n    // will update stripe element automatically\n    this.elementOptions.value.postalCode = '12345'\n  }\n}\n```\n\n### events\nFollowing events are emitted on StripeElement\n- change\n- ready\n- focus\n- blur\n- escape\n\n```html\n\u003cStripeElement\n  :elements=\"elements\"\n  @blur=\"doSomething\"\n/\u003e\n```\n\n## Helpers\nIn case you like the manual gearbox. Check [stripeElements.js](src/stripeElements.js) for details.\n\n```js\nimport { initStripe, createElements, createElement } from 'vue-stripe-elements-plus'\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fectoflow%2Fvue-stripe-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fectoflow%2Fvue-stripe-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fectoflow%2Fvue-stripe-elements/lists"}