Skip to content

Collections

Jump to bottom
ChijiokeFLW edited this page Aug 29, 2023 · 6 revisions

Overview

We recommend reading the main readme first, to understand the requirements for using the library and how to initiate this in your apps. This guide assumes you've read that.

You can generate a payment modal to collect payments from your users using either the in-built component or the global methods, and optionally specify an action that would run when the payment modal is closed:

  1. Using as a component
  2. Calling the Flutterwave method
  3. Closing the payment modal

Read more about the underlying infrastructure here.

Flutterwave Component

This section describes how you can utilize the in-built Flutterwave component to generate a payment modal and collect payments from your users.

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: 'Flutterwave Developers',
        email: '[email protected]',
        phone_number: '09012345678'
      }"
      :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>
import {FlutterwavePayButton} from "flutterwave-vue-v3";

export default {
  name: "App",
  components: { FlutterwavePayButton },
  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>

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: "Flutterwave Developers",
          email: "[email protected]",
          phone_number: "09012345678"
        },
        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>

Flutterwave method

This section describes how you can utilize the global Flutterwave method to generate a payment modal and collect payments from your users.

Using the '$payWithFlutterwave()' method

<!--
Method 1: Utilize the synchronous 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: "Flutterwave Developers",
          email: "[email protected]",
          phone_number: "09012345678"
        },
        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>

Using the '$asyncPayWithFlutterwave()' method

<!--
Method 2: Utilize the asynchronous method (non-blocking)
-->

<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: "Flutterwave Developers",
          email: "[email protected]",
          phone_number: "09012345678"
        },
        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>

Close payment modal

This section describes how you can optionally specify an action that runs when the payment modal is closed.

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: 'Flutterwave Developers',
        email: '[email protected]',
        phone_number: '09012345678'
      }"
      :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>
import {FlutterwavePayButton} from "flutterwave-vue-v3";

export default {
  name: "App",
  components: { FlutterwavePayButton },
  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

There are a couple of parameters that can be specified when utilizing either the in-built component or the global methods to generate a payment modal to collect payment from your users. This section describes them:

Parameter Type Required? Description
public_key String True Your public API key
tx_ref String True Your transaction reference. This MUST be unique for every transaction
amount String/Number True Amount to charge the customer (eg. 100)
currency String False currency to charge in. Defaults to NGN
payment_options String True This specifies the payment options to be displayed (eg. card, mobilemoney, ussd, etc.)
payment_plan Number False This is the payment plan ID used for recurring payments
redirect_url String False The URL to redirect to when a transaction is completed. This is useful for 3DSecure payments, so that we can redirect your customer back to a custom page you want to show them
customer Object True This is an object that can contain your customer details: (eg. customer: { email: "[email protected]", phonenumber: "08012345678", name: "Takeshi Kovacs" })
subaccounts Array False This is an array of objects containing the subaccount IDs to split the payment into. Check out our Split Payments page for more info
meta Object False This is an object that helps you include additional payment information to your request (eg. {consumer_id: 23, consumer_mac: "92a3-912ba-1192a" })
customizations Object True This is an object that contains title, logo, and description you want to display on the modal (eg. customizations: {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 the payment is completed
onclose Function False This is the function that runs after the payment modal is closed

Methods Provided By Flutterwave Plugin

There are a couple of methods that are available to you globally from the Flutterwave plugin. This section describes them:

Method Name Parameters Returns Description
payWithFlutterwave() InlinePaymentOptions : Object Null This method allows you to setup and open the payment modal via code
asyncPayWithFlutterwave() AsyncPaymentOptions : Object Promise This method 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 method allows you to close the payment modal via code. You can setup the wait time before the modal closes
Clone this wiki locally