{"id":32956248,"url":"https://github.com/ectoflow/vue-stripe-js","last_synced_at":"2026-01-11T23:03:10.889Z","repository":{"id":40346790,"uuid":"366112646","full_name":"ectoflow/vue-stripe-js","owner":"ectoflow","description":"Vue 3 components for Stripe.js","archived":false,"fork":false,"pushed_at":"2025-08-23T08:41:44.000Z","size":472,"stargazers_count":180,"open_issues_count":0,"forks_count":22,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-30T02:25:53.330Z","etag":null,"topics":["checkout","payments","stripe","stripe-api","stripe-checkout","stripe-elements","stripe-js","vue","vue-stripe","vue3"],"latest_commit_sha":null,"homepage":"https://vue-stripe-js.netlify.app","language":"TypeScript","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":"CODE_OF_CONDUCT.md","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,"zenodo":null},"funding":{"custom":["https://paypal.me/softbeehive"]}},"created_at":"2021-05-10T16:48:14.000Z","updated_at":"2025-10-29T03:10:25.000Z","dependencies_parsed_at":"2024-01-02T23:39:42.375Z","dependency_job_id":"117343a8-efe0-4d18-a530-ac7949c9dcab","html_url":"https://github.com/ectoflow/vue-stripe-js","commit_stats":{"total_commits":28,"total_committers":4,"mean_commits":7.0,"dds":0.1071428571428571,"last_synced_commit":"f32ad226911c597689351e73bdd1c53be78bd205"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/ectoflow/vue-stripe-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ectoflow%2Fvue-stripe-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ectoflow%2Fvue-stripe-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ectoflow%2Fvue-stripe-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ectoflow%2Fvue-stripe-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ectoflow","download_url":"https://codeload.github.com/ectoflow/vue-stripe-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ectoflow%2Fvue-stripe-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28326166,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-11T22:11:01.104Z","status":"ssl_error","status_checked_at":"2026-01-11T22:10:58.990Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-api","stripe-checkout","stripe-elements","stripe-js","vue","vue-stripe","vue3"],"created_at":"2025-11-12T23:00:19.023Z","updated_at":"2026-01-11T23:03:10.883Z","avatar_url":"https://github.com/ectoflow.png","language":"TypeScript","funding_links":["https://paypal.me/softbeehive"],"categories":["Components \u0026 Libraries"],"sub_categories":["Utilities"],"readme":"# Vue Stripe.js\n\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/ectoflow/vue-stripe-js/ci.yml?branch=main)](https://github.com/ectoflow/vue-stripe-js/actions)\n[![npm](https://img.shields.io/npm/v/vue-stripe-js)](https://www.npmjs.com/package/vue-stripe-js)\n[![npm monthly downloads](https://img.shields.io/npm/dm/vue-stripe-js)](https://www.npmjs.com/package/vue-stripe-js)\n[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://vshymanskyy.github.io/StandWithUkraine)\n\nVue 3 components for Stripe. Build advanced payment integrations quickly. Easy\nto start, friendly DX, minimal abstractions, and full control. It's a glue\nbetween Stripe.js and Vue component lifecycle. Works with Nuxt 3.\n\n🟢 **[Live demo](https://vue-stripe-js.netlify.app/)**\n\n## Health 💜\n\nConsider supporting efforts to make this project healthy and sustainable. Thank\nyou!\n\n- **[Donate via PayPal](https://paypal.me/softbeehive)**\n\n## Quickstart ⚡️\n\n### Upgrade\n\n- **[Upgrade guide](docs/UPGRADE_V1_TO_V2.md)**\n- **[Docs v1](https://github.com/ectoflow/vue-stripe-js/tree/v1.0.4)**\n\n### 1. Install\n\n```bash\nnpm i vue-stripe-js @stripe/stripe-js\n```\n\n### 2. Load Stripe.js\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { onBeforeMount, ref } from \"vue\"\nimport { loadStripe, type Stripe } from \"@stripe/stripe-js\"\n\nconst publishableKey = '' // use your publishable key\nconst stripe = ref\u003cStripe | null\u003e(null)\n\nonBeforeMount(async() =\u003e {\n  stripe.value = await loadStripe(publishableKey)\n})\n\u003c/script\u003e\n```\n\nAlternatively, include a script tag. Make sure Stripe.js is loaded before you\nmount Vue components.\n\n```html\n\u003cscript src=\"https://js.stripe.com/v3/\"\u003e\u003c/script\u003e\n```\n\n### 3. Payment Element\n\nBased on –\n[deferred payment guide](https://docs.stripe.com/payments/accept-a-payment-deferred?type=payment)\n\n```vue\n\u003ctemplate\u003e\n  \u003cform\n    v-if=\"stripeLoaded\"\n    @submit.prevent=\"handleSubmit\"\n  \u003e\n    \u003cStripeElements\n      :stripe-key=\"stripeKey\"\n      :instance-options=\"stripeOptions\"\n      :elements-options=\"elementsOptions\"\n      ref=\"elementsComponent\"\n    \u003e\n      \u003cStripeElement\n        type=\"payment\"\n        :options=\"paymentElementOptions\"\n        ref=\"paymentComponent\"\n      /\u003e\n    \u003c/StripeElements\u003e\n    \u003cbutton\n      type=\"submit\"\n    \u003e\n      Submit\n    \u003c/button\u003e\n  \u003c/form\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { onBeforeMount, ref } from \"vue\"\nimport { loadStripe } from \"@stripe/stripe-js\"\nimport { StripeElements, StripeElement } from \"vue-stripe-js\"\n\nimport type {\n  StripeElementsOptionsMode,\n  StripePaymentElementOptions,\n} from \"@stripe/stripe-js\"\n\nconst stripeKey = \"pk_test_f3duw0VsAEM2TJFMtWQ90QAT\" // use your publishable key\nconst stripeOptions = ref({\n  // https://stripe.com/docs/js/initializing#init_stripe_js-options\n})\nconst elementsOptions = ref\u003cStripeElementsOptionsMode\u003e({\n  // https://stripe.com/docs/js/elements_object/create#stripe_elements-options\n  mode: \"payment\",\n  amount: 1099,\n  currency: \"usd\",\n  appearance: {\n    theme: \"flat\",\n  },\n})\nconst paymentElementOptions = ref\u003cStripePaymentElementOptions\u003e({\n  // https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options\n})\nconst stripeLoaded = ref(false)\nconst clientSecret = ref(\"\")\n\n// Define component refs\nconst elementsComponent = ref()\nconst paymentComponent = ref()\n\nonBeforeMount(() =\u003e {\n  loadStripe(stripeKey).then(() =\u003e {\n    stripeLoaded.value = true\n\n    // Good place to call your backend to create PaymentIntent\n    // Skipping to the point when you got client_secret\n\n    // clientSecret.value = client_secret\n  })\n})\n\nasync function handleSubmit() {\n  // Confirm the PaymentIntent using the details collected by the Payment Element\n  const stripeInstance = elementsComponent.value?.instance\n  const elements = elementsComponent.value?.elements\n\n  if (stripeInstance) {\n    const { error } = await stripeInstance.confirmPayment({\n      elements,\n      clientSecret: clientSecret.value,\n      confirmParams: {\n        return_url: \"https://example.com/order/123/complete\",\n      },\n    })\n\n    if (error) {\n      // This point is only reached if there's an immediate error when\n      // confirming the payment. Show the error to your customer (for example, payment details incomplete)\n      console.log(error)\n    } else {\n      // Your customer is redirected to your `return_url`. For some payment\n      // methods like iDEAL, your customer is redirected to an intermediate\n      // site first to authorize the payment, then redirected to the `return_url`.\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## Examples 🌿\n\nThanks to the Provider Pattern used in StripeElements, you get minimalist tools\nwith full access to Stripe.js methods and properties. This results in better\ndeveloper experience (DX), simpler code, and fewer bugs.\n\nThese examples use Vue Composition API and TypeScript.\n\n- [All](examples/)\n- [Payment](examples/PaymentElementDeferred.vue)\n- [Card](examples/CardElement.vue)\n- [Express Checkout](examples/ExpressCheckoutElement.vue)\n\n### Screenshot\n\n![Vue Stripe.js demo screenshot](examples/demo/demo_screenshort.png)\n\n## Advanced integration 🏗️\n\nAll features of Stripe.js are available in two components. The benefits of Vue\nsolution: element is created and destroyed automatically, options are reactive,\nevent listeners are attached to StripeElement. Simple and future-proof.\n\n🥇 **Most important property is type** 🥇\n\n```html\n\u003cStripeElements\u003e\n  \u003cStripeElement type=\"payment\" /\u003e\n\u003c/StripeElements\u003e\n```\n\nAvailable types\n\n```ts\ntype StripeElementType =\n  | \"address\"\n  | \"affirmMessage\"\n  | \"afterpayClearpayMessage\"\n  | \"auBankAccount\"\n  | \"card\"\n  | \"cardNumber\"\n  | \"cardExpiry\"\n  | \"cardCvc\"\n  | \"currencySelector\"\n  | \"epsBank\"\n  | \"expressCheckout\"\n  | \"fpxBank\"\n  | \"iban\"\n  | \"idealBank\"\n  | \"p24Bank\"\n  | \"payment\"\n  | \"paymentMethodMessaging\"\n  | \"paymentRequestButton\"\n  | \"linkAuthentication\"\n  | \"shippingAddress\"\n  | \"issuingCardNumberDisplay\"\n  | \"issuingCardCvcDisplay\"\n  | \"issuingCardExpiryDisplay\"\n  | \"issuingCardPinDisplay\"\n  | \"issuingCardCopyButton\";\n\n// Check actual element types in @stripe/stripe-js\n```\n\n## Events\n\n```html\n\u003cStripeElement @blur=\"doSomething\" /\u003e\n```\n\nFollowing events are emitted on StripeElement\n\n- change\n- ready\n- focus\n- blur\n- click\n- escape\n- loaderror\n- loaderstart\n\n## Styling\n\nAdd classes to components\n\n```html\n\u003cStripeElements class=\"border\"\u003e\n  \u003cStripeElement class=\"p-4\" type=\"card\" :options=\"cardOptions\" /\u003e\n\u003c/StripeElements\u003e\n```\n\nStyle element via options -\n[read documentation](https://stripe.com/docs/js/appendix/style)\n\n```ts\nconst cardOptions = ref\u003cStripeCardElementOptions\u003e({\n  style: {\n    base: {\n      iconColor: \"green\",\n    },\n    invalid: {\n      iconColor: \"red\",\n    },\n  },\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fectoflow%2Fvue-stripe-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fectoflow%2Fvue-stripe-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fectoflow%2Fvue-stripe-js/lists"}