flutterwave-vue-v3 - npm Package Compare versions

Comparing version 1.0.2 to 1.0.4

package.json

 {
   "name": "flutterwave-vue-v3",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Flutterwave official Vue library to accept payment via Card , USSD, QrCode etc.",

README.md

@@ -250,9 +250,155 @@ # Flutterwave Vue.JS v3 Library
 
+Use in code, using the 'asyncPayWithFlutterwave()' method
+
+```html
+
+<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: '[e-mail]',
+          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
+
+```html
+
+<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: '[e-mail]', 
+        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': '[e-mail]','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 |
+
 <a id="deployment"></a>
+
 ## Deployment
 
 - Switch to Live Mode on the Dashboard settings page
-- Use the Live Public API key 
+- Use the Live Public API key
 
 <a id="build-tools"></a>
+
 ## ⛏️ Built Using
@@ -259,0 +405,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35328

increased by19.17%

Number of lines in readme file

416

increased by54.07%

No dependency changes