├── .browserslistrc
├── .github
    └── workflows
    │   └── release.-package.yml
├── .gitignore
├── LICENSE.md
├── README.md
├── babel.config.js
├── build
    └── rollup.config.js
├── dev
    ├── serve.js
    └── serve.vue
├── documentation
    ├── docs
    │   ├── .vuepress
    │   │   ├── config.js
    │   │   └── public
    │   │   │   └── images
    │   │   │       ├── metadata.png
    │   │   │       └── vue3paystack_logo.png
    │   ├── README.md
    │   └── guide
    │   │   └── README.md
    ├── package-lock.json
    └── package.json
├── package-lock.json
├── package.json
├── src
    ├── entry.esm.js
    ├── entry.js
    └── vue3-paystack.vue
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | current node
2 | last 2 versions and > 2%
3 | ie > 10
4 | 


--------------------------------------------------------------------------------
/.github/workflows/release.-package.yml:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somteacodes/vue3-paystack/f6229c061a36526c8699c2a7ccea3366501b81fc/.github/workflows/release.-package.yml


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Anunobi Somto
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue3-Paystack
 2 | 
 3 | vue3-paystack allows you to accept payments in your vue application created with vue 3.
 4 | The component is easily customisable.
 5 | 
 6 | ### NPM
 7 | ```npm
 8 | npm i vue3-paystack
 9 | ```
10 | ## Usage
11 | ```javascript
12 | <template>
13 |      <paystack
14 |         buttonClass="'button-class btn btn-primary'"
15 |         buttonText="Pay Online"
16 |         :publicKey="publicKey"
17 |         :email="email"
18 |         :amount="amount"
19 |         :reference="reference"
20 |         :onSuccess="onSuccessfulPayment"
21 |         :onCancel="onCancelledPayment">
22 |     </paystack>
23 | </template>
24 | 
25 |  <script>
26 | import paystack from "vue3-paystack";
27 | 
28 | export default {
29 |   components: {
30 |     paystack,
31 |   },
32 | }
33 |   </script>
34 |  
35 | ```
36 | 
37 | ## Documentation
38 | A more detailed guide can be found [here](https://vue3paystack.netlify.app/)
39 | 
40 | ## Want to say thanks?
41 | If this has been helpful, kindly share the link to other and a star on the github repo would be helpful too
42 | 
43 | 
44 | ## License
45 | Licensed under MIT License. [Click](https://github.com/somteacodes/vue3-paystack/blob/master/LICENSE.md) for details.


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | const devPresets = ['@vue/babel-preset-app'];
 2 | const buildPresets = [
 3 |   [
 4 |     '@babel/preset-env',
 5 |     // Config for @babel/preset-env
 6 |     {
 7 |       // Example: Always transpile optional chaining/nullish coalescing
 8 |       // include: [
 9 |       //   /(optional-chaining|nullish-coalescing)/
10 |       // ],
11 |     },
12 |   ],
13 | ];
14 | module.exports = {
15 |   presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
16 | };
17 | 


--------------------------------------------------------------------------------
/build/rollup.config.js:
--------------------------------------------------------------------------------
  1 | // rollup.config.js
  2 | import fs from 'fs';
  3 | import path from 'path';
  4 | import vue from 'rollup-plugin-vue';
  5 | import alias from '@rollup/plugin-alias';
  6 | import commonjs from '@rollup/plugin-commonjs';
  7 | import resolve from '@rollup/plugin-node-resolve';
  8 | import replace from '@rollup/plugin-replace';
  9 | import babel from '@rollup/plugin-babel';
 10 | import PostCSS from 'rollup-plugin-postcss';
 11 | import { terser } from 'rollup-plugin-terser';
 12 | import minimist from 'minimist';
 13 | 
 14 | // Get browserslist config and remove ie from es build targets
 15 | const esbrowserslist = fs.readFileSync('./.browserslistrc')
 16 |   .toString()
 17 |   .split('\n')
 18 |   .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
 19 | 
 20 | // Extract babel preset-env config, to combine with esbrowserslist
 21 | const babelPresetEnvConfig = require('../babel.config')
 22 |   .presets.filter((entry) => entry[0] === '@babel/preset-env')[0][1];
 23 | 
 24 | const argv = minimist(process.argv.slice(2));
 25 | 
 26 | const projectRoot = path.resolve(__dirname, '..');
 27 | 
 28 | const baseConfig = {
 29 |   input: 'src/entry.js',
 30 |   plugins: {
 31 |     preVue: [
 32 |       alias({
 33 |         entries: [
 34 |           {
 35 |             find: '@',
 36 |             replacement: `${path.resolve(projectRoot, 'src')}`,
 37 |           },
 38 |         ],
 39 |       }),
 40 |     ],
 41 |     replace: {
 42 |       'process.env.NODE_ENV': JSON.stringify('production'),
 43 |     },
 44 |     vue: {
 45 |     },
 46 |     postVue: [
 47 |       resolve({
 48 |         extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 49 |       }),
 50 |       // Process only `<style module>` blocks.
 51 |       PostCSS({
 52 |         modules: {
 53 |           generateScopedName: '[local]___[hash:base64:5]',
 54 |         },
 55 |         include: /&module=.*\.css$/,
 56 |       }),
 57 |       // Process all `<style>` blocks except `<style module>`.
 58 |       PostCSS({ include: /(?<!&module=.*)\.css$/ }),
 59 |       commonjs(),
 60 |     ],
 61 |     babel: {
 62 |       exclude: 'node_modules/**',
 63 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 64 |       babelHelpers: 'bundled',
 65 |     },
 66 |   },
 67 | };
 68 | 
 69 | // ESM/UMD/IIFE shared settings: externals
 70 | // Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
 71 | const external = [
 72 |   // list external dependencies, exactly the way it is written in the import statement.
 73 |   // eg. 'jquery'
 74 |   'vue',
 75 | ];
 76 | 
 77 | // UMD/IIFE shared settings: output.globals
 78 | // Refer to https://rollupjs.org/guide/en#output-globals for details
 79 | const globals = {
 80 |   // Provide global variable names to replace your external imports
 81 |   // eg. jquery: '$'
 82 |   vue: 'Vue',
 83 | };
 84 | 
 85 | // Customize configs for individual targets
 86 | const buildFormats = [];
 87 | if (!argv.format || argv.format === 'es') {
 88 |   const esConfig = {
 89 |     ...baseConfig,
 90 |     input: 'src/entry.esm.js',
 91 |     external,
 92 |     output: {
 93 |       file: 'dist/vue3-paystack.esm.js',
 94 |       format: 'esm',
 95 |       exports: 'named',
 96 |     },
 97 |     plugins: [
 98 |       replace(baseConfig.plugins.replace),
 99 |       ...baseConfig.plugins.preVue,
100 |       vue(baseConfig.plugins.vue),
101 |       ...baseConfig.plugins.postVue,
102 |       babel({
103 |         ...baseConfig.plugins.babel,
104 |         presets: [
105 |           [
106 |             '@babel/preset-env',
107 |             {
108 |               ...babelPresetEnvConfig,
109 |               targets: esbrowserslist,
110 |             },
111 |           ],
112 |         ],
113 |       }),
114 |     ],
115 |   };
116 |   buildFormats.push(esConfig);
117 | }
118 | 
119 | if (!argv.format || argv.format === 'cjs') {
120 |   const umdConfig = {
121 |     ...baseConfig,
122 |     external,
123 |     output: {
124 |       compact: true,
125 |       file: 'dist/vue3-paystack.ssr.js',
126 |       format: 'cjs',
127 |       name: 'Vue3Paystack',
128 |       exports: 'auto',
129 |       globals,
130 |     },
131 |     plugins: [
132 |       replace(baseConfig.plugins.replace),
133 |       ...baseConfig.plugins.preVue,
134 |       vue(baseConfig.plugins.vue),
135 |       ...baseConfig.plugins.postVue,
136 |       babel(baseConfig.plugins.babel),
137 |     ],
138 |   };
139 |   buildFormats.push(umdConfig);
140 | }
141 | 
142 | if (!argv.format || argv.format === 'iife') {
143 |   const unpkgConfig = {
144 |     ...baseConfig,
145 |     external,
146 |     output: {
147 |       compact: true,
148 |       file: 'dist/vue3-paystack.min.js',
149 |       format: 'iife',
150 |       name: 'Vue3Paystack',
151 |       exports: 'auto',
152 |       globals,
153 |     },
154 |     plugins: [
155 |       replace(baseConfig.plugins.replace),
156 |       ...baseConfig.plugins.preVue,
157 |       vue(baseConfig.plugins.vue),
158 |       ...baseConfig.plugins.postVue,
159 |       babel(baseConfig.plugins.babel),
160 |       terser({
161 |         output: {
162 |           ecma: 5,
163 |         },
164 |       }),
165 |     ],
166 |   };
167 |   buildFormats.push(unpkgConfig);
168 | }
169 | 
170 | // Export config
171 | export default buildFormats;
172 | 


--------------------------------------------------------------------------------
/dev/serve.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import Dev from './serve.vue';
3 | 
4 | const app = createApp(Dev);
5 | app.mount('#app');
6 | 


--------------------------------------------------------------------------------
/dev/serve.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { defineComponent } from 'vue';
 3 | import Vue3Paystack from '@/vue3-paystack.vue';
 4 | 
 5 | export default defineComponent({
 6 |   name: 'ServeDev',
 7 |   components: {
 8 |     Vue3Paystack
 9 |   }
10 | });
11 | </script>
12 | 
13 | <template>
14 |   <div id="app">
15 |     <vue3-paystack buttonText="Hello Paynow">
16 |       <slot>
17 |         <img
18 |           style="width: 40px;"
19 |           src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D"
20 |         />
21 |         VuePaystack with slot
22 |       </slot>
23 |     </vue3-paystack><br /><br />
24 |     <vue3-paystack buttonText="Vue Paystack without slot" /><br /><br />
25 |     <vue3-paystack />
26 |   </div>
27 | </template>
28 | 


--------------------------------------------------------------------------------
/documentation/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | const pkg = require('../../../package.json')
 2 | module.exports={
 3 |     title: `${pkg.name} (${pkg.version})`,
 4 |     description: `${pkg.description}`,
 5 |     themeConfig: {
 6 |         nav:[
 7 |             {text:'Home', link:'/'},
 8 |             {text:'Guide', link:'/guide/'},
 9 |             {text:'About me', link:'https://github.com/somteacodes'},
10 |         ],
11 |         logo: '/images/vue3paystack_logo.png',
12 |         sidebar:'auto'
13 |     }
14 | }


--------------------------------------------------------------------------------
/documentation/docs/.vuepress/public/images/metadata.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somteacodes/vue3-paystack/f6229c061a36526c8699c2a7ccea3366501b81fc/documentation/docs/.vuepress/public/images/metadata.png


--------------------------------------------------------------------------------
/documentation/docs/.vuepress/public/images/vue3paystack_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somteacodes/vue3-paystack/f6229c061a36526c8699c2a7ccea3366501b81fc/documentation/docs/.vuepress/public/images/vue3paystack_logo.png


--------------------------------------------------------------------------------
/documentation/docs/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | home: true
 3 | heroImage: /images/vue3paystack_logo.png
 4 | heroText: Paystack Plugin for Vue 3
 5 | tagline: Accept payments in your Vue 3 app using paystack
 6 | actionText: Get Started →
 7 | actionLink: /guide/
 8 | features:
 9 | - title: Vue 3 Support
10 |   details: A Paystack plugin that works for Vue 3.
11 | - title: Inline v2
12 |   details: Migrated from Inline Version 1 to Inline Version 2
13 | - title: Customisable
14 |   details: Easily Customisable.
15 | footer: MIT Licensed | Copyright © 2021-present Somteacodes
16 | ---
17 | 
18 |  
19 | 
20 | 


--------------------------------------------------------------------------------
/documentation/docs/guide/README.md:
--------------------------------------------------------------------------------
  1 | # Guide
  2 | 
  3 | vue3-paystack allows you to accept payments in your vue application created with vue 3.
  4 | The component is easily customisable.
  5 | 
  6 | ## Installation
  7 | 
  8 | ### NPM
  9 | 
 10 | ```npm
 11 | npm i vue3-paystack
 12 | ```
 13 | 
 14 | ## Usage
 15 | 
 16 | ```javascript
 17 | import paystack from "vue3-paystack";
 18 | ```
 19 | 
 20 | ## component sample
 21 | 
 22 | ```javascript
 23 | 
 24 | <template>
 25 |             <paystack
 26 |                 buttonClass="'button-class btn btn-primary'"
 27 |                 buttonText="Pay Online"
 28 |                 :publicKey="publicKey"
 29 |                 :email="email"
 30 |                 :amount="amount"
 31 |                 :reference="reference"
 32 |                 :onSuccess="onSuccessfulPayment"
 33 |                 :onCanel="onCancelledPayment"
 34 |               ></paystack>
 35 | </template>
 36 |  <script>
 37 | import paystack from "vue3-paystack";
 38 | import { nanoid } from "nanoid"; //if using nanoid
 39 | 
 40 | export default {
 41 |   components: {
 42 |     paystack,
 43 |   },
 44 |   data() {
 45 |     return{
 46 |         publicKey:'pk_test_0000',
 47 |         amount:1000, //Expressed in lowest demonitation, so 1000kobo is equivalent to 10Naira
 48 |         email:'somteacodes@gmail.com',
 49 |         firstname:'Somtea', //optional field remember to pass as a prop of firstname if needed
 50 |         lastname:'Codes' //optional field remember to pass as a prop of lastname if needed
 51 |     }
 52 |   },
 53 | 
 54 |   // computed
 55 |   computed: {
 56 |     reference: function() {
 57 |         // if using nanoid to generate randomRef
 58 |         // comment this out if not using nano id
 59 |       return nanoid(15);
 60 | 
 61 |     //   you can use plain JS to generate random ref ID, just uncomment this section if you
 62 |     /*
 63 |         let randomRef = "";
 64 |         let characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 65 | 
 66 |         for( let i=0; i < 15; i++ )
 67 |           text += characters.charAt(Math.floor(Math.random() * characters.length));
 68 | 
 69 |         return randomRef;
 70 | 
 71 |         */
 72 |     },
 73 |   },
 74 |   // methods
 75 |   methods: {
 76 | 
 77 |     onSuccessfulPayment: function(response) {
 78 |       console.log(response);
 79 |     },
 80 |     onCancelledPayment: function() {
 81 |       console.log("Payment cancelled by user");
 82 |     },
 83 |   },
 84 | };
 85 | </script>
 86 | 
 87 | ```
 88 | 
 89 | ## Props
 90 | 
 91 | | Name                   | Type       | Description                                                  | Default                                                                 |
 92 | | ---------------------- | ---------- | ------------------------------------------------------------ | ----------------------------------------------------------------------- |
 93 | | `buttonClass`          | `String`   | CSS class names for the button, to style the component       | `""`                                                                    |
 94 | | `buttonText`           | `String`   | Displayed text for the button                                | `"Pay Now"`                                                             |
 95 | | `publicKey` _required_ | `String`   | Public key from your paystack API                            |                                                                         |
 96 | | `email` _required_     | `String`   | required                                                     |  
 97 | | `amount` _required_    | `Number`   | required                                                     |                                                                         |
 98 | | `reference` _required_ | `String`   | a randomly generated code, made up of characters and numbers |                                                                         |
 99 | | `firstname`             | `String`   |      | First name to be stored in your receipts|
100 | | `lastname`             | `String`   |      | Last name to be stored in your receipts|
101 | | `currency`             | `String`   | required                                                     | `"NGN"`                                                                 |
102 | | `onSuccess`            | `Function` |                                                              | `function() { console.log(response); }`                                 |
103 | | `onCancel`             | `Function` |                                                              | `function() { console.log("payment closed"); }`                         |
104 | | `channels`             | `Array`    |                                                              | `function() { return ["card", "bank", "ussd", "qr", "mobile_money"]; }` |
105 | | `metadata`             | `Object`   |                                                              | `{   "custom_fields":[{"display_name":"Cart Items",  "variable_name":"Invoice ID", "value":209}] }`                                             |
106 | | `label`                | `String`   |                                                              | `""`                                                                    |
107 | 
108 | ## Customization with slot
109 | 
110 | Vue-paystack offers customization of the component using a single `slot`. This provides you the ability to fully customize how the button look to the user. Note that this overrides the `buttonText` props.
111 | 
112 | ## Metadata (optional)
113 | 
114 | The metadata prop is a good way to add additional information to information stored in your records.
115 | The meta data is of a JSON type and it has a reserved objecy key called `custom_fields`, that when used correctly displays nicely in your stored receipts.
116 | 
117 | Custom fields have 3 keys: `display_name`, `variable_name` and `value`.
118 | The display name will be the title for the value when displaying it on your receipts
119 | 
120 | An example is
121 | 
122 | ```
123 | "metadata":{
124 |    "custom_fields":[
125 |     {
126 |       "display_name":"Country",
127 |       "variable_name":"country_name",
128 |       "value":"Nigeria"
129 |     },
130 |     {
131 |       "display_name":"Cart Items",
132 |       "variable_name":"cart_items",
133 |       "value":"3 bananas, 12 mangoes"
134 |     }
135 |   ]
136 | }
137 | 
138 | ```
139 | 
140 | Custom fields used can be seen in your paystack dashboard
141 | ![Image](/images/metadata.png)
142 | 
143 | <!-- ## Data
144 | 
145 | | Name              | Type      | Description | Initial value |
146 | | ----------------- | --------- | ----------- | ------------- |
147 | | `hasScriptLoaded` | `boolean` |             | `false`       |
148 | 
149 | ## Methods
150 | 
151 | ### mountScript()
152 | 
153 | **Syntax**
154 | 
155 | ```typescript
156 | async mountScript(): Promise<unknown>
157 | ```
158 | 
159 | ### payWithPaystack()
160 | 
161 | **Syntax**
162 | 
163 | ```typescript
164 | payWithPaystack(): void
165 | ``` -->
166 | 
167 | ## Other Considerations
168 | 
169 | This is not an official plugin from [paystack](https://paystack.com/).
170 | 
171 | You should defintely check out the official [paystack](https://paystack.com/developers) documentation for more information
172 | 


--------------------------------------------------------------------------------
/documentation/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "documentation",
 3 |   "version": "1.0.0",
 4 |   "description": "Guide on how to use vue3-paystack",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "docs:dev": "vuepress dev docs",
 9 |     "docs:build": "vuepress build docs"
10 |   },
11 |   "author": "",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "vuepress": "^1.8.2"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-paystack",
 3 |   "version": "0.0.6",
 4 |   "description": "Paystack Plugin for Vue 3",
 5 |   "main": "dist/vue3-paystack.ssr.js",
 6 |   "browser": "dist/vue3-paystack.esm.js",
 7 |   "module": "dist/vue3-paystack.esm.js",
 8 |   "unpkg": "dist/vue3-paystack.min.js",
 9 |   "files": [
10 |     "dist/*",
11 |     "src/**/*.vue"
12 |   ],
13 |   "sideEffects": false,
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/somteacodes/vue3-paystack"
17 |   },
18 |   "keywords": [
19 |     "Paystack",
20 |     "Vue",
21 |     "Vue 3",
22 |     "Payment Gateway"
23 |   ],
24 |   "author": "Anunobi Somto (https://github.com/somteacodes)",
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/somteacodes/vue3-paystack/issues"
28 |   },
29 |   "homepage": "https://vue3paystack.netlify.app/",
30 |   "scripts": {
31 |     "serve": "vue-cli-service serve dev/serve.js",
32 |     "prebuild": "rimraf ./dist",
33 |     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
34 |     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
35 |     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
36 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
37 |   },
38 |   "dependencies": {},
39 |   "devDependencies": {
40 |     "@babel/core": "^7.14.6",
41 |     "@babel/preset-env": "^7.14.7",
42 |     "@rollup/plugin-alias": "^3.1.2",
43 |     "@rollup/plugin-babel": "^5.3.0",
44 |     "@rollup/plugin-commonjs": "^14.0.0",
45 |     "@rollup/plugin-node-resolve": "^9.0.0",
46 |     "@rollup/plugin-replace": "^2.4.2",
47 |     "@vue/cli-plugin-babel": "^4.5.13",
48 |     "@vue/cli-service": "^4.5.13",
49 |     "@vue/compiler-sfc": "^3.0.11",
50 |     "cross-env": "^7.0.3",
51 |     "minimist": "^1.2.5",
52 |     "postcss": "^8.2.10",
53 |     "rimraf": "^3.0.2",
54 |     "rollup": "^2.52.8",
55 |     "rollup-plugin-postcss": "^4.0.0",
56 |     "rollup-plugin-terser": "^7.0.2",
57 |     "rollup-plugin-vue": "^6.0.0",
58 |     "vue": "^3.0.5"
59 |   },
60 |   "peerDependencies": {
61 |     "vue": "^3.0.5"
62 |   },
63 |   "engines": {
64 |     "node": ">=12"
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/entry.esm.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // Import vue component
 3 | import component from '@/vue3-paystack.vue';
 4 | 
 5 | // Default export is installable instance of component.
 6 | // IIFE injects install function into component, allowing component
 7 | // to be registered via Vue.use() as well as Vue.component(),
 8 | export default /*#__PURE__*/(() => {
 9 |   // Get component instance
10 |   const installable = component;
11 | 
12 |   // Attach install function executed by Vue.use()
13 |   installable.install = (app) => {
14 |     app.component('Vue3Paystack', installable);
15 |   };
16 |   return installable;
17 | })();
18 | 
19 | // It's possible to expose named exports when writing components that can
20 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
21 | // export const RollupDemoDirective = directive;
22 | 


--------------------------------------------------------------------------------
/src/entry.js:
--------------------------------------------------------------------------------
 1 | // iife/cjs usage extends esm default export - so import it all
 2 | import component, * as namedExports from '@/entry.esm';
 3 | 
 4 | // Attach named exports directly to component. IIFE/CJS will
 5 | // only expose one global var, with named exports exposed as properties of
 6 | // that global var (eg. plugin.namedExport)
 7 | Object.entries(namedExports).forEach(([exportName, exported]) => {
 8 |   if (exportName !== 'default') component[exportName] = exported;
 9 | });
10 | 
11 | export default component;
12 | 


--------------------------------------------------------------------------------
/src/vue3-paystack.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import { defineComponent } from 'vue';
  3 | 
  4 | export default /*#__PURE__*/defineComponent({
  5 |   name: 'Vue3Paystack', // vue component name
  6 |    props: {
  7 |     // styles
  8 |     buttonClass: {
  9 |       type: String,
 10 |       default: "",
 11 |     },
 12 |     buttonText: {
 13 |       type: String,
 14 |       default: "Pay Now",
 15 |     },
 16 |     // payment operations
 17 | 
 18 |     publicKey: {
 19 |       type: String,
 20 |       requird: true,
 21 |     }, //required
 22 |     email: {
 23 |       type: String,
 24 |       required: true,
 25 |     }, //required
 26 |      firstname: {
 27 |       type: String,
 28 |       default: "",
 29 |     },
 30 |     lastname: {
 31 |       type: String,
 32 |       default: "",
 33 |     },
 34 |     amount: {
 35 |       type: Number,
 36 |       required: true,
 37 |     }, //required
 38 |     reference: {
 39 |       type: String,
 40 |       required: true,
 41 |     }, //required
 42 |     currency: {
 43 |       type: String,
 44 |       default: "NGN",
 45 |     },
 46 |     onSuccess: {
 47 |       type: Function,
 48 |       default: function(response) {
 49 |         console.log(response);
 50 |       },
 51 |     },
 52 |     onCancel: {
 53 |       type: Function,
 54 |       default: function() {
 55 |         console.log("payment closed");
 56 |       },
 57 |     },
 58 |     channels: {
 59 |       type: Array,
 60 |       default: function() {
 61 |         return ["card", "bank", "ussd", "qr", "mobile_money"];
 62 |       },
 63 |     },
 64 |     metadata: {
 65 |       type: Object,
 66 |       default: function() {
 67 |         return {};
 68 |       },
 69 |     },
 70 |     label: {
 71 |       type: String,
 72 |       default: "",
 73 |     },
 74 |  
 75 |   },
 76 |   async created() {
 77 |     this.mountScript()
 78 |     .then(()=>{
 79 |        this.hasScriptLoaded = true
 80 |     })
 81 |   },
 82 |   data() {
 83 |     return {
 84 |       hasScriptLoaded:false
 85 |     }
 86 |   },
 87 |   methods: {
 88 |     async mountScript( ) {
 89 |      return new Promise((res,rej)=>{
 90 |         const script = document.createElement("script");
 91 |       //  add script source
 92 |       script.setAttribute("src", "https://js.paystack.co/v2/inline.js");
 93 |       script.setAttribute("type", "text/javascript");
 94 |       document.head.appendChild(script);
 95 |       // check if script is ready
 96 |        script.onload=()=>res()
 97 |        script.onerror=()=>rej()
 98 |      })
 99 |     },
100 |     payWithPaystack() {
101 |       //  options
102 |       const paymentOptions = {
103 |         // general options
104 | 
105 |         key: this.publicKey, //required
106 |         email: this.email, //required
107 |         amount: this.amount, //required
108 |         reference: this.reference, //required
109 |         currency: this.currency,
110 |         channels: this.channels,
111 |         metadata: this.metadata,
112 |         label: this.label,        
113 |         firstname: this.firstname,
114 |         lastname: this.lastname,
115 |         onSuccess: (response) => {
116 |           this.onSuccess(response);
117 |         },
118 |         onCancel: () => {
119 |           this.onCancel();
120 |         },
121 |         // onBankTransferConfirmationPending: function(response) {
122 |         //   this.onBankTransferConfirmationPending(response);
123 |         // },
124 |         // single split payments
125 |         //subaccount:this.subaccount,  //required for single split
126 |         //transaction_charge:this.transaction_charge,
127 |         //bearer:this.bearer,
128 |         // multi-split payments
129 |         //split_code:this.split_code, //required for multi-split
130 |         // subscriptionss
131 |         // plan: this.plan, //required for subscriptions
132 |         // quantity: this.quantity,
133 |       };
134 | 
135 |       const paystack = new window.PaystackPop();
136 |       paystack.newTransaction(paymentOptions);
137 |     },
138 |   },
139 | });
140 | </script>
141 | 
142 | <template>
143 |   <button 
144 |   :disabled="!hasScriptLoaded"
145 |   :class="buttonClass" @click="payWithPaystack">
146 |   <slot>
147 |     {{ buttonText }}
148 |   </slot>
149 |   </button>
150 | </template>
151 | 
152 |  
153 | 
154 | 


--------------------------------------------------------------------------------