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

JavaScript

<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: "RX1",
      amount: 10,
      currency: "USD",
      country: "US",
      payment_options: " ",
      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: "Flutterwave Developers",
      },
      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.

JavaScript

<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-896c1947871d58a89eee3b638299d873-X",
      tx_ref: "RX1",
      amount: 10,
      currency: "USD",
      country: "US",
      payment_options: " ",
      customer: {
        email: "[email protected]",
        phone_number: "08102909304",
        name: "Flutterwave Developers",
      },
      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:

callback response

{
   amount: 10
   currency: "USD" 
   customer: {
        name: "Flutterwave Developers", 
        email: "[email protected]", 
        phone_number: "08102909304"
    }
   flw_ref: "SMXL9784001344029"
   status: "successful",
   tx_ref: "RX1",
   transaction_id: 2151557
}

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:

JSON

{
   "event":"charge.completed",
   "data":{
      "id":2151557,
      "tx_ref":"RX1",
      "flw_ref":"SMXL9784001344029",
      "device_fingerprint":"d9f7ef654b78f6f1ee86f09c92f20ada",
      "amount":10,
      "currency":"USD",
      "charged_amount":10,
      "app_fee":0.74,
      "merchant_fee":0,
      "processor_response":"Transaction Successful",
      "auth_model":"PAYPAL",
      "ip":"197.210.29.44",
      "narration":"Flutterwave Developers",
      "status":"successful",
      "payment_type":"paypal_fw",
      "created_at":"2021-05-18T13:14:00.000Z",
      "account_id":20937,
      "customer":{
         "id":904402,
         "name":"Flutterwave Developers",
         "phone_number":"08102909304",
         "email":"[email protected]",
         "created_at":"2021-05-18T13:14:00.000Z"
      }
   },
   "event.type":"PAYPAL_FW_TRANSACTION"
}