Skip to content

Commit 6b58153

Browse files
author
Toyeeb
committed
init
0 parents  commit 6b58153

22 files changed

+13717
-0
lines changed

‎.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules
3+
4+
# local env files
5+
.env.local
6+
.env.*.local
7+
8+
# Log files
9+
npm-debug.log*
10+
yarn-debug.log*
11+
yarn-error.log*
12+
pnpm-debug.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw?

‎README.md‎

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
## 📝 Table of Contents
2+
3+
- [About](#about)
4+
- [Getting Started](#getting-started)
5+
- [Usage](#usage)
6+
- [Running tests](#test)
7+
- [Deployment](#deployment)
8+
- [Built Using](#build-tools)
9+
- [References](#references)
10+
11+
<a id="about"></a>
12+
## About
13+
14+
Flutterwave official Vue library to accept payment via Card, USSD, QrCode etc.
15+
16+
<a id="getting-started"></a>
17+
18+
## 🏁 Getting Started
19+
20+
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See [deployment](#deployment) for notes on how to deploy the project on a live system.
21+
See [references](#references) for links to dashboard and API documentation.
22+
23+
24+
### Prerequisites
25+
26+
```
27+
Vue version >= 2
28+
Flutterwave version 3 API Public keys
29+
```
30+
31+
### Installing
32+
33+
34+
Install the SDK
35+
36+
```bash
37+
$ npm install flutterwave-vue-v3
38+
# or
39+
$ yarn add flutterwave-vue-v3
40+
```
41+
42+
43+
<a id="usage"></a>
44+
45+
## 🔧 Usage
46+
47+
* Import the Flutterwave Library in the 'main.js' file.
48+
49+
* Add the Flutterwave flutterwave to your app passing in your Flutterwave Public Key (optional)
50+
51+
* NB: If Public key is not added you will have to pass in the public_key parameter to the provided payment component button and payment function
52+
53+
```javascript
54+
//main.js
55+
import Vue from 'vue'
56+
import App from './App.vue'
57+
import Flutterwave from 'flutterwave-vue-v3'
58+
59+
60+
Vue.use(Flutterwave, { publicKey: 'FLWPUBK_TESTXXXXXXXXXX' } )
61+
62+
new Vue({
63+
render: h => h(App),
64+
}).$mount('#app')
65+
66+
```
67+
68+
Use as component. Method 1
69+
70+
```html
71+
<!--
72+
Method 1: Pass in payment parameters individually as component attributes
73+
-->
74+
75+
<template>
76+
77+
<div>
78+
<flutterwave-pay-button
79+
:tx_ref="generateReference()"
80+
:amount=20
81+
currency='NGN'
82+
payment_options="card,ussd"
83+
redirect_url=""
84+
class="class-name"
85+
style=""
86+
:meta="{counsumer_id: '7898' ,consumer_mac: 'kjs9s8ss7dd' }"
87+
:customer="{ name: 'Demo Customer Name',
88+
email: 'customer@mail.com',
89+
phone_number: '0818450****' }"
90+
:customizations="{ title: 'Customization Title' ,
91+
description: 'Customization Description' ,
92+
logo : 'https://flutterwave.com/images/logo-colored.svg' }"
93+
:callback="makePaymentCallback"
94+
:onclose="closedPaymentModal"
95+
> Click To Pay </flutterwave-pay-button>
96+
</div>
97+
98+
</template>
99+
100+
<script>
101+
102+
export default {
103+
name: 'App',
104+
methods: {
105+
makePaymentCallback(response) {
106+
console.log("Payment callback", response)
107+
},
108+
closedPaymentModal() {
109+
console.log('payment modal is closed');
110+
},
111+
generateReference(){
112+
let date = new Date()
113+
return date.getTime().toString();
114+
}
115+
}
116+
}
117+
118+
</script>
119+
```
120+
121+
122+
Use as component. Method 2
123+
```html
124+
<!--
125+
Method 2: Pass in payment parameters as object to v-bind
126+
-->
127+
128+
<template>
129+
<div>
130+
<flutterwave-pay-button v-bind="paymentData" > Click To Pay </flutterwave-pay-button>
131+
</div>
132+
</template>
133+
134+
<script>
135+
136+
export default {
137+
name: 'App',
138+
data(){
139+
return {
140+
paymentData: {
141+
tx_ref: this.generateReference(),
142+
amount: 10,
143+
currency: 'NGN',
144+
payment_options: 'card,ussd',
145+
redirect_url: '',
146+
meta: {
147+
'counsumer_id': '7898',
148+
'consumer_mac': 'kjs9s8ss7dd'
149+
},
150+
customer: {
151+
name: 'Demo Customer Name',
152+
email: 'customer@mail.com',
153+
phone_number: '0818450***44'
154+
} ,
155+
customizations: {
156+
title: 'Customization Title',
157+
description: 'Customization Description',
158+
logo: 'https://flutterwave.com/images/logo-colored.svg'
159+
},
160+
callback: this.makePaymentCallback,
161+
onclose: this.closedPaymentModal
162+
}
163+
}
164+
} ,
165+
methods: {
166+
makePaymentCallback(response) {
167+
console.log("Pay", response)
168+
},
169+
closedPaymentModal() {
170+
console.log('payment is closed');
171+
},
172+
generateReference(){
173+
let date = new Date()
174+
return date.getTime().toString();
175+
}
176+
}
177+
}
178+
</script>
179+
180+
```
181+
182+
Use in code, using the 'payWithFlutterwave()' method
183+
184+
```html
185+
186+
<template>
187+
<div>
188+
<button @click="payViaService">Pay Using Code</button>
189+
</div>
190+
</template>
191+
192+
<script>
193+
194+
export default {
195+
name: 'App',
196+
data(){
197+
return {
198+
paymentData: {
199+
tx_ref: this.generateReference(),
200+
amount: 10,
201+
currency: 'NGN',
202+
payment_options: 'card,ussd',
203+
redirect_url: '',
204+
meta: {
205+
'counsumer_id': '7898',
206+
'consumer_mac': 'kjs9s8ss7dd'
207+
},
208+
customer: {
209+
name: 'Demo Customer Name',
210+
email: 'customer@mail.com',
211+
phone_number: '081845***044'
212+
} ,
213+
customizations: {
214+
title: 'Customization Title',
215+
description: 'Customization Description',
216+
logo: 'https://flutterwave.com/images/logo-colored.svg'
217+
},
218+
callback: this.makePaymentCallback,
219+
onclose: this.closedPaymentModal
220+
}
221+
}
222+
} ,
223+
methods: {
224+
payViaService() {
225+
this.payWithFlutterwave(this.paymentData)
226+
} ,
227+
makePaymentCallback(response) {
228+
console.log("Pay", response)
229+
},
230+
closedPaymentModal() {
231+
console.log('payment is closed');
232+
},
233+
generateReference(){
234+
let date = new Date()
235+
return date.getTime().toString();
236+
}
237+
238+
}
239+
}
240+
</script>
241+
242+
```
243+
244+
<a id="deployment"></a>
245+
## 🚀 Deployment
246+
247+
- Switch to Live Mode on the Dashboard settings page
248+
- Use the Live Public API key
249+
250+
<a id="build-tools"></a>
251+
## ⛏️ Built Using
252+
253+
- [Vue CLI](https://cli.vuejs.org/)
254+
- [Vue](https://vuejs.org/)
255+
- [Vue-sfc](https://www.npmjs.com/package/vue-sfc-rollup)
256+
257+
258+
<a id="references"></a>
259+
## 🎉 Flutterwave API References
260+
261+
- [Flutterwave API Doc](https://developer.flutterwave.com/docs)
262+
- [Flutterwave Inline Payment Doc](https://developer.flutterwave.com/docs/flutterwave-inline)
263+
- [Flutterwave Dashboard](https://dashboard.flutterwave.com/login)

‎babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const devPresets = ['@vue/babel-preset-app'];
2+
const buildPresets = ['@babel/preset-env'];
3+
module.exports = {
4+
presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
5+
};

0 commit comments

Comments
 (0)