The Flutterwave Developer Documentation

We have put together comprehensive guidelines and documentation to help you get right into integrating any of our products quickly. You can also get support when you need help!

API Documentation    API Reference

Flutterwave inline

Quickly embed Flutterwave in your website using our Inline JavaScript integration flow

You can embed Flutterwave on your page using our FlutterwaveCheckout() JavaScript function. The function responds to your request in accordance with your request configurations. If you specify a redirect_url in your request, the function will redirect your users to the provided redirect URL when they complete the payment.

We will append the transaction reference and status to the URL like so tx_ref=ref&transaction_id=30490&status=successful. With this, you can verify the final state of the transaction by calling our Transaction verification endpoint with the provided transaction_id in the URL.

Sample Inline Redirect Implementation

<form>
  <script src="https://checkout.flutterwave.com/v3.js"></script>
  <button type="button" onClick="makePayment()">Pay Now</button>
</form>

<script>
  function makePayment() {
    FlutterwaveCheckout({
      public_key: "FLWPUBK_TEST-SANDBOXDEMOKEY-X",
      tx_ref: "hooli-tx-1920bbtyt",
      amount: 54600,
      currency: "NGN",
      country: "NG",
      payment_options: "card, mobilemoneyghana, ussd",
      redirect_url: // specified redirect URL
        "https://callbacks.piedpiper.com/flutterwave.aspx?ismobile=34",
      meta: {
        consumer_id: 23,
        consumer_mac: "92a3-912ba-1192a",
      },
      customer: {
        email: "[email protected]",
        phone_number: "08102909304",
        name: "yemi desola",
      },
      callback: function (data) {
        console.log(data);
      },
      onclose: function() {
        // close modal
      },
      customizations: {
        title: "My store",
        description: "Payment for items in cart",
        logo: "https://assets.piedpiper.com/logo.png",
      },
    });
  }
</script>

🚧

payment_options

Note that the payment options set above will only take effect if the dashboard payment options are disabled on your dashboard settings page. When both are provided/enabled, the dashboard payment options take priority.

Check our Flutterwave standard section for parameter definitions

👍

Available payment_options

Here are all the possible values for payment options available on Flutterwave:
0: "account"
1: "card"
2: "banktransfer"
3: "mpesa"
4: "mobilemoneyrwanda"
5: "mobilemoneyzambia"
6: "qr"
7: "mobilemoneyuganda"
8: "ussd"
9: "credit"
10: "barter"
11: "mobilemoneyghana"
12: "payattitude"
13: "mobilemoneyfranco"
14: "paga"
15: "1voucher"
16: "mobilemoneytanzania"

Sample Inline Callback Implementation

Alternatively, if you specify a callback function in your request payload when your customer completes the payment, we will call the function and pass the payment details to you.

<form>
  <script src="https://checkout.flutterwave.com/v3.js"></script>
  <button type="button" onClick="makePayment()">Pay Now</button>
</form>

<script>
  function makePayment() {
    FlutterwaveCheckout({
      public_key: "FLWPUBK_TEST-31d61a13026483fc38f15f0e90232374-X",
      tx_ref: "hooli-tx-1920bbtyt",
      amount: 54600,
      currency: "NGN",
      country: "NG",
      payment_options: "card,mobilemoney,ussd",
      customer: {
        email: "[email protected]",
        phone_number: "08102909304",
        name: "yemi desola",
      },
      callback: function (data) { // specified callback function
        console.log(data);
      },
      customizations: {
        title: "My store",
        description: "Payment for items in cart",
        logo: "https://assets.piedpiper.com/logo.png",
      },
    });
  }
</script>

Callback response

If you specified a callback function in your request, we will send you a response like the one below. when the transaction is successfully completed:

{
   amount: 54600
   currency: "NGN" 
   customer: {
        name: "Yemi Desola", 
        email: "[email protected]", 
        phone_number: "08102909304"
    }
   flw_ref: "FLW-MOCK-597ae423f1470309edcb5879e3774bfa"
   status: "successful",
   tx_ref: "hooli-tx-1920bbtyt",
   transaction_id: 495000
}

With this, you can go ahead and perform other activities like Transaction verification

🚧

Callback Or Redirect?

It is worthy to note that If you provide both redirect_url and callback in your request, the callback will be ignored and the customer will be redirected to the provided redirect URL. i.e redirect_url takes precedence over callback function when both are available.

Webhook response

If you've set up webhook notifications for your account, we will also send you a transaction response in the format below:

{
  "id": 1245295,
  "txRef": "hooli-tx-1920bbtyt",
  "flwRef": "FLW-MOCK-c293538cdcd65ec79744f241246ee2df",
  "orderRef": "URF_1587826781271_4887235",
  "paymentPlan": null,
  "paymentPage": 40,
  "createdAt": "2020-04-25T14:59:41.000Z",
  "amount": 54600,
  "charged_amount": 54600,
  "status": "successful",
  "IP": "102.89.2.173",
  "currency": "NGN",
  "appfee": 2764.4,
  "merchantfee": 0,
  "merchantbearsfee": 1,
  "customer": {
    "id": 367450,
    "phone": "08102909304",
    "fullName": "Yemi Desola",
    "customertoken": null,
    "email": "[email protected]",
    "createdAt": "2020-04-25T13:51:38.000Z",
    "updatedAt": "2020-04-25T13:51:38.000Z",
    "deletedAt": null,
    "AccountId": 27468
  },
  "payment_entity": "1555852ca0687e2e4b6e5d8dccbbb869",
  "entity": {
    "card6": "553188",
    "card_last4": "2950"
  },
  "event.type": "CARD_TRANSACTION"
}

Updated a day ago



Flutterwave inline


Quickly embed Flutterwave in your website using our Inline JavaScript integration flow

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.