{"id":19481504,"url":"https://github.com/anthonylan/vuesaga","last_synced_at":"2025-07-26T04:09:30.273Z","repository":{"id":176256246,"uuid":"655225446","full_name":"anthonylan/vuesaga","owner":"anthonylan","description":"Vue component  for Stripe Element \u0026 Checkout Integration + Partial server-side validation","archived":false,"fork":false,"pushed_at":"2023-07-01T16:59:05.000Z","size":508,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T17:37:13.566Z","etag":null,"topics":["stripe","stripe-payments","vue","vue-stripe","vue-stripe-checkout"],"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/anthonylan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2023-06-18T09:16:22.000Z","updated_at":"2023-07-04T06:01:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"f28f966a-201e-4880-bcd3-1d53931c0a78","html_url":"https://github.com/anthonylan/vuesaga","commit_stats":null,"previous_names":["anthonylan/vuesaga"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/anthonylan/vuesaga","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2Fvuesaga","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2Fvuesaga/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2Fvuesaga/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2Fvuesaga/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anthonylan","download_url":"https://codeload.github.com/anthonylan/vuesaga/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2Fvuesaga/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267116499,"owners_count":24038624,"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","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["stripe","stripe-payments","vue","vue-stripe","vue-stripe-checkout"],"created_at":"2024-11-10T20:05:08.480Z","updated_at":"2025-07-26T04:09:30.265Z","avatar_url":"https://github.com/anthonylan.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VueSaga: Stripe + Vue integration\n\n![demo screen](./demo/Screenshot%202023-07-01%20at%206.58.05%20PM.png)\nSeamlessly integrate Stripe payments and card handling into your Vue.js applications with minimal code. \n\n[![npm version](https://img.shields.io/npm/v/vuesaga.svg?style=flat-square)](https://www.npmjs.org/package/vuesaga)\n\n[`github`](https://github.com/anthonylan/vuesaga)\n\n\n\n\n## Table of Contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n- [Events](#events)\n- [Server](#server)\n- [Examples](#examples)\n\n\n\n\n### Features\n\n- Integration with Stripe Elements: Easily embed Stripe Elements for secure payment input forms.\n- Integration with Stripe Checkout: Streamline the checkout process using Stripe Checkout for a smooth payment experience.\n- Customizable appearance: Customize the appearance of Stripe Elements and Checkout to match your application's design.\n- Simplified API interactions: Handle API requests to create payment intents and confirm payments with ease.\n- Event-driven architecture: Emit events to notify the parent component about the payment status and provide real-time feedback.\n\n\n### Installation\n\nYou can install the VueSaga Library via npm:\n\n\n```bash\nnpm install vuesaga\n```\n\nAdditionally, you need to include the Stripe JavaScript library in your project. Add the following script tag to your index.html file:\n\n```html\n\u003cscript src=\"https://js.stripe.com/v3/\"\u003e\u003c/script\u003e\n```\n\n\n### Usage\nTo use the library in your Vue.js project, follow these steps:\n1. Import the desired components:\n\n```javascript\nimport { StripeElement, StripeCheckout } from 'vuesaga'\n```\n\n2. Register the components in your Vue component:\n\n```javascript\ncomponents: {\n    StripeElement,\n    StripeCheckout,\n},\n```\n3. Define the required props and options for the components:\n\n```javascript\n  data: () =\u003e ({\n     pk: 'pk_test_xxx',\n     options:{\n      server_url: 'example.com/api/create-setup',\n      amount: 2000 //required for checkout \u0026 elements when mode == 'payment'\n    }\n  })\n```\n4. Implement the components in your template:\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cStripeElement :pk=\"pk\" :options=\"options\" @verify=\"handler\" /\u003e\n        \u003cStripeCheckout :pk=\"pk\" :options=\"options\" @verify=\"handler\" /\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n```\n5. Implement the event handler for the verify event emitted by the components:\n\n```javascript\nmethods:{\n  handler(feed) {\n    console.log(feed);\n }\n}\n```\n6. Required for StripeElement ONLY: Trigger the form submission:\n```javascript\n  data: () =\u003e ({\n    btnTaps: 1\n  })\n```\n... now update your template:\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cStripeElement :pk=\"pk\" :tap=\"btnTaps\" :options=\"options\" @verify=\"handler\" /\u003e\n        \u003ca-button @click=\"btnTaps++\"\u003eSubmit\u003c/a-button\u003e\n\n        \u003cStripeCheckout :pk=\"pk\" :options=\"options\" @verify=\"handler\" /\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n```\n\n### Props\nVuesaga accepts the following props:\n\n- `pk` (String, required):  The Stripe publishable key.\n- `tap` (Number, required)[Elements ONLY]: A reactive property that triggers the submission of the payment form when its value changes.\n- `options` (Object, required): An object containing the configuration options for Stripe Elements / Checkount. It includes the following properties:\n  - `mode` (String, default: 'setup'): The mode of the integration, either 'setup' or 'payment'. This determines whether you are setting up a payment method or processing a payment.\n  - `currency` (String, default: 'usd'): The currency to use for the payment.\n  - `amount` (Number, default: 1000): The payment amount in cents. This is only applicable for checkount and when element the `mode` is set to 'payment'.\n  - `r_url` (String): The return URL after the payment is completed.\n  - `server_url` (String, required): The URL where you handle the server-side processing of the payment or setup.\n  - `appearance` (Object): An object containing appearance-related options:\n    - `labels` (String, default: 'above'): The position of the labels in the payment form.\n    - `theme` (String, default: 'flat'): The theme of the payment form.\n\n\n### Events\n- `verify`: An event emitted by the component to notify the parent component about the payment / setup verification status. It provides an object with the following properties:\n\n  - `chain` (String): The chain of events or components where the verification occurred.\n\n  - `error` (Boolean): Indicates whether an error occurred or not.\n\n  - `data` (Object): Additional data related to the verification process.\n\n\n### Server\n#### `server_url` Prop\nThe `options.server_url` prop is an important property used in both the StripeElement and StripeCheckout components. It specifies the server endpoint URL where the library will make API requests to handle payment / setup intents and confirmations with Stripe.\n\nWhen a payment is submitted, VueSaga sends a request to the specified server_url endpoint to confirm the setup or payment. Your server is expected to provide a client_secret in JSON format as a response. Here's an example of the expected JSON format:\n\n```javascript\n{ \n  secret: \"your_client_secret_value\"\n}\n```\nMake sure to include the `secret` field with the appropriate value in the JSON response from your server to enable seamless integration with VueSaga.\n\n-----\nSetupIntent and PaymentIntent for various programming languages:\n\n- Setup: https://stripe.com/docs/api/setup_intents/create\n- Payment and checkout: https://stripe.com/docs/api/payment_intents/create\n\nIMPORTANT: Always enable `automatic_payment_methods` in your server code.\n\n-----\n\n#### Data Sent to the Server\nThe data sent to the `server_url` endpoint depends on the specific component and mode of operation.\n\nFor the StripeElement (mode:payment) component \u0026 checkout, when submitting the payment form, the library sends a POST request to the `server_url` with the following JSON payload:\n\n```javascript\n{\n    \"currency\": \"\u003ccurrency_code\u003e\",\n    \"amount\": \u003cpayment_amount\u003e\n}\n```\n\nWhere:\n\n- \u003ccurrency_code\u003e is the currency code specified in the options prop (or the default if not provided).\n- \u003cpayment_amount\u003e is the payment amount specified in the options prop (or the default if not provided).\n\nOn the other hand, for the StripeElement with mode: setup, an empty body is sent to the server_url endpoint\n\n#### Server Response\nThe server endpoint specified by the `server_url` prop should handle the incoming requests and communicate with Stripe's API to create or retrieve the necessary information.\n\nUpon receiving the request, the server should perform the following steps:\n\n- Interact with Stripe's API to create or retrieve a payment intent, depending on the mode of operation (payment or setup).\n- Retrieve the client_secret from the payment intent created or retrieved from Stripe.\n- Return the client_secret in the server's response.\n\nThe server's response should have the following structure:\n\n```javascript\n{\n  \"secret\": \"\u003cclient_secret\u003e\"\n}\n```\n\nWhere \u003cclient_secret\u003e is the value obtained from the payment / setup intent.\n\nVueSaga will use this client_secret to confirm the payment intent with Stripe and complete the payment process.\n\nIt's important to ensure that your server-side code securely communicates with Stripe's API, validates requests, and handles errors gracefully.\n\n----\n\nPlease note that the exact implementation details of the server-side code are beyond the scope of this library's documentation, as it depends on your specific server environment and programming language. Consult Stripe's official documentation and relevant server-side resources for guidance on implementing the server-side integration.\n\n----\n\n### Examples\nHere's an example of how you can implement the server-side code using Express.js:\n\n\n#### Example 1: StripeElement(setup)\nVue: \n```javascript\n\u003cscript\u003e\n  import { StripeElement } from 'vuesaga'\n\n  export default{\n    components: { StripeElement },\n    data: () =\u003e ({\n      public_key: 'pk_test_xxx',\n      tap: 1\n      options: {\n        server_url: '/create-setup-intent',\n      }\n    }),\n    methods:{\n      handlder(feed){\n        console.log(feed) //Do something else with this info\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n```html\n\u003ctemplate\u003e\n  \u003cStripeElement :pk=\"public_key\" :tap=\"tap\" :options=\"options\" @verify=\"handler\"  /\u003e\n  \u003cbutton @click=\"tap++\"\u003eSave Card\u003c/button\u003e\n\u003c/template\u003e\n```\n\nExpress.js:\n```javascript\nconst express = require('express');\nconst app = express();\nconst stripe = require('stripe')('YOUR_STRIPE_SECRET_KEY');\n\napp.use(express.json());\n\n//Ref: (https://stripe.com/docs/api/payment_intents/create)\napp.post('/create-setup-intent', async (req, res) =\u003e {\n\n    const setupIntent = await stripe.setupIntents.create({\n        automatic_payment_methods: { enabled: true }\n    })\n\n    res.status(200).json({\n        secret: setupIntent['client_secret']\n    })\n})\n\napp.listen(3000, () =\u003e {\n  console.log('Server listening on port 3000');\n});\n```\n\n\n#### Example 2: StripeElement(payment) and StripeCheckout\nVue:\n\n```javascript\n\u003cscript\u003e\n  import { StripeElement, StripeCheckout } from 'vuesaga'\n\n  export default{\n    components: { \n      StripeElement, StripeCheckout\n   },\n    data: () =\u003e ({\n      public_key: 'pk_test_xxx',\n      tap: 1\n      options: {\n        server_url: '/create-payment-intent',\n        mode: 'payment',\n        amount: 3000\n      }\n    }),\n    methods:{\n      handlder(feed){\n        console.log(feed) //Do something else with this info\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n```html\n\u003ctemplate\u003e\n  \u003cStripeElement :pk=\"public_key\" :tap=\"tap\" :options=\"options\" @verify=\"handler\"  /\u003e\n  \u003cbutton @click=\"tap++\"\u003ePay $30.00\u003c/button\u003e\n\n  \u003cbr /\u003e\n  \u003cStripeCheckout :pk=\"public_key\" :options=\"options\" @verify=\"handler\"  /\u003e\n\u003c/template\u003e\n```\n\nExpress.js:\n```javascript\nconst express = require('express');\nconst app = express();\nconst stripe = require('stripe')('YOUR_STRIPE_SECRET_KEY');\n\napp.use(express.json());\n\n//Ref: (https://stripe.com/docs/api/payment_intents/create)\napp.post('/create-payment-intent', async (req, res) =\u003e {\n    const data = req.body\n\n    const paymentIntent = await stripe.paymentIntents.create({\n        amount: data.amount,\n        currency: data.currency,\n        automatic_payment_methods: { enabled: true },\n    })\n\n    res.status(200).json({\n        secret: paymentIntent['client_secret']\n    })\n})\n\napp.listen(3000, () =\u003e {\n  console.log('Server listening on port 3000');\n});\n```\n\n### Attr\nBy abstracting away complex implementation details, VueSaga simplifies the integration process, allowing developers to seamlessly leverage the full functionality of Stripe's payment infrastructure.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonylan%2Fvuesaga","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthonylan%2Fvuesaga","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonylan%2Fvuesaga/lists"}