Flutterwave Vue.JS (Vue2) Library
Table of Contents
About
Flutterwave official Vue(v2) library to accept payment via Card, USSD, QrCode etc with support for Typescript.
Getting Started
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. See references for links to dashboard and API documentation.
Prerequisites
Vue version = 2.x.x
Flutterwave version 3 API Public keys
Installing
Install the SDK
$ npm install flutterwave-vue-v3
# or
$ yarn add flutterwave-vue-v3Usage
-
For Typescript project sample, please see the project in the example directory of the project repository.
-
Import the Flutterwave Library in the 'main.js' file.
-
Add the Flutterwave plugin to your app passing in your Flutterwave Public Key (optional)
-
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
//main.js
import Vue from 'vue'
import App from './App.vue'
import Flutterwave from 'flutterwave-vue-v3'
Vue.use(Flutterwave, { publicKey: 'FLWPUBK_TESTXXXXXXXXXX' } )
new Vue({
render: h => h(App),
}).$mount('#app')Use as component. Method 1
<!--
Method 1: Pass in payment parameters individually as component attributes
-->
<template>
<div>
<flutterwave-pay-button
:tx_ref="generateReference()"
:amount=20
currency='NGN'
payment_options="card,ussd"
redirect_url=""
class="class-name"
style=""
:meta="{counsumer_id: '7898' ,consumer_mac: 'kjs9s8ss7dd' }"
:customer="{ name: 'Demo Customer Name',
email: 'customer@mail.com',
phone_number: '0818450****' }"
:customizations="{ title: 'Customization Title' ,
description: 'Customization Description' ,
logo : 'https://flutterwave.com/images/logo-colored.svg' }"
:callback="makePaymentCallback"
:onclose="closedPaymentModal"
> Click To Pay </flutterwave-pay-button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
makePaymentCallback(response) {
console.log("Payment callback", response)
},
closedPaymentModal() {
console.log('payment modal is closed');
},
generateReference(){
let date = new Date()
return date.getTime().toString();
}
}
}
</script>Use as component. Method 2
<!--
Method 2: Pass in payment parameters as object to v-bind
-->
<template>
<div>
<flutterwave-pay-button v-bind="paymentData" > Click To Pay </flutterwave-pay-button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
paymentData: {
tx_ref: this.generateReference(),
amount: 10,
currency: 'NGN',
payment_options: 'card,ussd',
redirect_url: '',
meta: {
'counsumer_id': '7898',
'consumer_mac': 'kjs9s8ss7dd'
},
customer: {
name: 'Demo Customer Name',
email: 'customer@mail.com',
phone_number: '0818450***44'
} ,
customizations: {
title: 'Customization Title',
description: 'Customization Description',
logo: 'https://flutterwave.com/images/logo-colored.svg'
},
callback: this.makePaymentCallback,
onclose: this.closedPaymentModal
}
}
} ,
methods: {
makePaymentCallback(response) {
console.log("Pay", response)
},
closedPaymentModal() {
console.log('payment is closed');
},
generateReference(){
let date = new Date()
return date.getTime().toString();
}
}
}
</script>Use in code, using the 'payWithFlutterwave()' method
<template>
<div>
<button @click="payViaService">Pay Using Code</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
paymentData: {
tx_ref: this.generateReference(),
amount: 10,
currency: 'NGN',
payment_options: 'card,ussd',
redirect_url: '',
meta: {
'counsumer_id': '7898',
'consumer_mac': 'kjs9s8ss7dd'
},
customer: {
name: 'Demo Customer Name',
email: 'customer@mail.com',
phone_number: '081845***044'
} ,
customizations: {
title: 'Customization Title',
description: 'Customization Description',
logo: 'https://flutterwave.com/images/logo-colored.svg'
},
callback: this.makePaymentCallback,
onclose: this.closedPaymentModal
}
}
} ,
methods: {
payViaService() {
this.payWithFlutterwave(this.paymentData)
} ,
makePaymentCallback(response) {
console.log("Pay", response)
},
closedPaymentModal() {
console.log('payment is closed');
},
generateReference(){
let date = new Date()
return date.getTime().toString();
}
}
}
</script>Use in code, using the 'asyncPayWithFlutterwave()' method
<template>
<div>
<button @click="asyncPay">Pay Using Async method</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
paymentData: {
tx_ref: this.generateReference(),
amount: 10,
currency: 'NGN',
payment_options: 'card,ussd',
redirect_url: '',
meta: {
'counsumer_id': '7898',
'consumer_mac': 'kjs9s8ss7dd'
},
customer: {
name: 'Demo Customer Name',
email: 'customer@mail.com',
phone_number: '081845***044'
} ,
customizations: {
title: 'Customization Title',
description: 'Customization Description',
logo: 'https://flutterwave.com/images/logo-colored.svg'
},
onclose: this.closedPaymentModal
}
}
} ,
methods: {
asyncPay() {
this.asyncPayWithFlutterwave(this.paymentData).then(
(response) => {
console.log(response)
}
)
} ,
closedPaymentModal() {
console.log('payment is closed');
},
generateReference(){
let date = new Date()
return date.getTime().toString();
}
}
}
</script>Programmatically Close Payment Modal, using the "closePaymentModal()" method
<template>
<div>
<flutterwave-pay-button
:tx_ref="generateReference()"
:amount=20
currency='NGN'
payment_options="card,ussd"
redirect_url=""
class="class-name"
style=""
:meta="{counsumer_id: '7898' ,consumer_mac: 'kjs9s8ss7dd' }"
:customer="{ name: 'Demo Customer Name',
email: 'customer@mail.com',
phone_number: '0818450****' }"
:customizations="{ title: 'Customization Title' ,
description: 'Customization Description' ,
logo : 'https://flutterwave.com/images/logo-colored.svg' }"
:callback="makePaymentCallback"
:onclose="closePaymentCallback"
> Click To Pay </flutterwave-pay-button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
makePaymentCallback(response) {
console.log("Payment callback", response)
// Close modal in payment callback
this.closePaymentModal()
},
closePaymentCallback() {
console.log('payment modal is closed');
},
generateReference(){
let date = new Date()
return date.getTime().toString();
}
}
}
</script>Payment option parameters and descriptions:
| Parameter | Always Required ? | Description |
|---|---|---|
| public_key | True | Your API public key |
| tx_ref | True | Your transaction reference. This MUST be unique for every transaction |
| amount | True | Amount to charge the customer. |
| currency | False | currency to charge in. Defaults to NGN |
| integrity_hash | False | This is a sha256 hash of your FlutterwaveCheckout values, it is used for passing secured values to the payment gateway. |
| payment_options | True | This specifies the payment options to be displayed e.g - card, mobilemoney, ussd and so on. |
| payment_plan | False | This is the payment plan ID used for Recurring billing |
| redirect_url | False | URL to redirect to when a transaction is completed. This is useful for 3DSecure payments so we can redirect your customer back to a custom page you want to show them. |
| customer | True | This is an object that can contains your customer details: e.g - 'customer': {'email': 'example@example.com','phonenumber': '08012345678','name': 'Takeshi Kovacs' } |
| subaccounts | False | This is an array of objects containing the subaccount IDs to split the payment into. Check our Split Payment page for more info |
| meta | False | This is an object that helps you include additional payment information to your request e.g {'consumer_id': 23,'consumer_mac': '92a3-912ba-1192a' } |
| customizations | True | This is an object that contains title, logo, and description you want to display on the modal e.g{'title': 'Pied Piper Payments','description': 'Middleout isn't free. Pay the price','logo': 'https://assets.piedpiper.com/logo.png' } |
| callback (function) | False | This is the function that runs after payment is completed |
| close (function) | False | This is the function that runs after payment modal is closed |
Methods provided by Flutterwave plugin and descriptions:
| Method Name | Parameters | Returns | Description |
|---|---|---|---|
| payWithFlutterwave() | InlinePaymentOptions : Object | Null | This methods allows you to setup and open the payment modal via code |
| asyncPayWithFlutterwave() | AsyncPaymentOptions : Object | Promise | This methods allows you to setup and open the payment modal via code and returns a promise containing the payment response |
| closePaymentModal() | waitDuration : number (Optional, default = 0) | Null | This methods allows you to close the payment modal via code. You can setup the wait time before modal close |
Deployment
- Switch to Live Mode on the Dashboard settings page
- Use the Live Public API key