Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
flutterwave-vue-v3
Advanced tools
Flutterwave official Vue library to accept payment via Card , USSD, QrCode etc.
Flutterwave official Vue library to accept payment via Card, USSD, QrCode etc.
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.
Vue version >= 2
Flutterwave version 3 API Public keys
Install the SDK
$ npm install flutterwave-vue-v3
# or
$ yarn add flutterwave-vue-v3
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>
FAQs
Flutterwave official Vue library to accept payment via Card , USSD, QrCode etc.
The npm package flutterwave-vue-v3 receives a total of 63 weekly downloads. As such, flutterwave-vue-v3 popularity was classified as not popular.
We found that flutterwave-vue-v3 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.