{"id":16085688,"url":"https://github.com/iamraphson/vue-paystack","last_synced_at":"2025-04-06T17:12:59.588Z","repository":{"id":45926514,"uuid":"109301957","full_name":"iamraphson/vue-paystack","owner":"iamraphson","description":"Paystack Vue Plugin for Vue 2.X ","archived":false,"fork":false,"pushed_at":"2023-07-12T15:23:41.000Z","size":409,"stargazers_count":119,"open_issues_count":16,"forks_count":45,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T15:08:52.302Z","etag":null,"topics":["cdn","payment","payment-gateway","paystack","vuejs2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-paystack","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/iamraphson.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":"2017-11-02T18:12:36.000Z","updated_at":"2024-09-05T06:57:49.000Z","dependencies_parsed_at":"2024-06-19T05:22:28.534Z","dependency_job_id":"9ab9e81f-da8e-4213-a987-5063c486d338","html_url":"https://github.com/iamraphson/vue-paystack","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamraphson%2Fvue-paystack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamraphson%2Fvue-paystack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamraphson%2Fvue-paystack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamraphson%2Fvue-paystack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamraphson","download_url":"https://codeload.github.com/iamraphson/vue-paystack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247517916,"owners_count":20951719,"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":["cdn","payment","payment-gateway","paystack","vuejs2"],"created_at":"2024-10-09T13:08:57.634Z","updated_at":"2025-04-06T17:12:59.547Z","avatar_url":"https://github.com/iamraphson.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Paystack Component for Vue 3.x\n\nA Vue Plugin for Paystack payment gateway.\n\n### Demo\n\n![Demo Image](vue-paystack.png?raw=true \"Demo Image\")\n\n### Install\n\n#### NPM\n\n```\nnpm install vue vue-paystack --save\n```\n\n#### Javascript via CDN\n\n```javascript 1.8\n\u003c!-- Vue --\u003e\n  \u003cscript src=\"https://unpkg.com/vue@next\"\u003e\u003c/script\u003e\n\u003c!-- Vue-Paystack --\u003e\n\u003cscript src=\"https://unpkg.com/vue-paystack/dist/paystack.umd.min.js\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\n#### Via NPM\n\n###### my-compnent.vue sample\n\n```vue\n\u003ctemplate\u003e\n  \u003cpaystack\n    :amount=\"amount\"\n    :email=\"email\"\n    :paystackkey=\"paystackkey\"\n    :reference=\"reference\"\n    :callback=\"callback\"\n    :close=\"close\"\n    :embed=\"false\"\n  \u003e\n    \u003ci class=\"fas fa-money-bill-alt\"\u003e\u003c/i\u003e\n    Make Payment\n  \u003c/paystack\u003e\n\u003c/template\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\nimport paystack from \"vue-paystack\";\nexport default {\n  components: {\n    paystack,\n  },\n  data() {\n    return {\n      paystackkey: \"pk_test_xxxxxxxxxxxxxxxxxxxxxxx\", //paystack public key\n      email: \"foobar@example.com\", // Customer email\n      amount: 1000000, // in kobo\n    };\n  },\n  computed: {\n    reference() {\n      let text = \"\";\n      let possible =\n        \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n\n      for (let i = 0; i \u003c 10; i++)\n        text += possible.charAt(Math.floor(Math.random() * possible.length));\n\n      return text;\n    },\n  },\n  methods: {\n    callback: function (response) {\n      console.log(response);\n    },\n    close: function () {\n      console.log(\"Payment closed\");\n    },\n  },\n};\n\u003c/script\u003e\n```\n\n[Usage Example via NPM or Yarn](examples/commonjs/App.vue)\n\n#### via CDN\n\n```javascript\nconst app = Vue.createApp({\n  components: { PayStack: Paystack.default },\n  setup() {\n    const paystackkey = Vue.ref(\"pk_test_xxxxxxxxxxxxxxxxxxxxxx\");\n    const email = Vue.ref(\"foobar@example.com\");\n    const amount = Vue.ref(1000000);\n    let reference = Vue.computed(() =\u003e {\n      let text = \"\";\n      let possible =\n        \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n\n      for (let i = 0; i \u003c 10; i++)\n        text += possible.charAt(Math.floor(Math.random() * possible.length));\n\n      return text;\n    });\n    let callback = (response) =\u003e {\n      console.log({ response });\n    };\n    let close = () =\u003e {\n      console.log(\"payment closed\");\n    };\n    return {\n      reference: reference,\n      callback: callback,\n      close: close,\n      paystackkey: paystackkey.value,\n      email: email.value,\n      amount: amount.value,\n    };\n  },\n});\n\napp.mount(\"#app\");\n```\n\n[Usage Example via CDN](examples/index.html)\n\nPlease checkout [Paystack Documentation](https://paystack.com/docs/payments/accept-payments#popup) for other available options you can add to the\n\n## Deployment\n\nREMEMBER TO CHANGE THE KEY WHEN DEPLOYING ON A LIVE/PRODUCTION SYSTEM\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b feature-name`\n3. Commit your changes: `git commit -am 'Some commit message'`\n4. Push to the branch: `git push origin feature-name`\n5. Submit a pull request 😉😉\n\n## How can I thank you?\n\nWhy not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or Any Social Media? Spread the word!\n\nDon't forget to [follow me on twitter](https://twitter.com/iamraphson)!\n\nThanks!\nAyeni Olusegun.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamraphson%2Fvue-paystack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamraphson%2Fvue-paystack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamraphson%2Fvue-paystack/lists"}