GuidesDiscussions
Guides

Quidpay Inline

Suggest Edits

Quidpay Inline Sample

You can embed quidpay on your page using the getpaidSetup function. The function returns a response inside the callback, and you can pick your txRef and send to your server to perform a verification before giving value for the transaction.

👍

Completing a successful Quidpay test

Quidpay uses two environments one for test and one for live. On test environment the keys and script url are different from the keys and script url on live. To get your test keys sign up on https://quidpay-dev.herokuapp.com and retrieve your Test API key . When you use keys from the live environment with script url's from the test environment you get an "Invalid public key" error.

🚧

TESTING PAYMENTS

In test mode, payments are not processed by card networks or payment providers, and only our Test cards and Test bank accounts can be used

❗️

Invalid Public Key

This happens when you are using keys from the live environment with script url from the test environment. The snippet below currently uses live scripts url from the live environment.

To avoid the invalid public key error, you can see how to setup a test and live environment here.

Test script url:  <script type="text/javascript" src="https://ravesandboxapi.flutterwave.com/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>

Live script url: <script type="text/javascript" src="https://api.ravepay.co/flwv3-pug/getpaidx/api/quidpay-inline.js"></script>

<form>
    <script src="https://api.ravepay.co/flwv3-pug/getpaidx/api/quidpay-inline.js"></script>
    <button type="button" onClick="payWithQuidpay()">Pay Now</button>
</form>

<script>
    const API_publicKey = "<ADD YOUR PUBLIC KEY HERE>";

    function payWithQuidpay() {
        var x = getpaidSetup({
            PBFPubKey: API_publicKey,
            customer_email: "[email protected]",
            amount: 2000,
            customer_phone: "234099940409",
            currency: "NGN",
            txref: "quidpay-123456",
            meta: [{
                metaname: "userid",
                metavalue: "123456"
            }],
            onclose: function() {},
            callback: function(response) {
                var txref = response.tx.txRef; // collect txRef returned and pass to a 					server page to complete status check.
                console.log("This is the response returned after a charge", response);
                if (
                    response.tx.chargeResponseCode == "00" ||
                    response.tx.chargeResponseCode == "0"
                ) {
                    // redirect to a success page
                } else {
                    // redirect to a failure page.
                }

                x.close(); // use this to close the modal immediately after payment.
            }
        });
    }
</script>

<form>
    <script src="https://api.ravepay.co/flwv3-pug/getpaidx/api/quidpay-inline.js"></script>
    <button type="button" onClick="payWithQuidpay()">Pay Now</button>
</form>

<script>
    const API_publicKey = "<ADD YOUR PUBLIC KEY HERE>";

    function payWithRave() {
        var x = getpaidSetup({
            PBFPubKey: API_publicKey,
            customer_email: "[email protected]",
            amount: 2000,
            customer_phone: "234099940409",
            currency: "NGN",
            payment_method: "both",
            payment_plan: 13, // pass your plan ID here
            txref: "quidpay-123456",
            meta: [{
                metaname: "userid",
                metavalue: "123456"
            }],
            onclose: function() {},
            callback: function(response) {
                var txref = response.tx.txRef; // collect flwRef returned and pass to a 					server page to complete status check.
                console.log("This is the response returned after a charge", response);
                if (
                    response.tx.chargeResponseCode == "00" ||
                    response.tx.chargeResponseCode == "0"
                ) {
                    // redirect to a success page
                } else {
                    // redirect to a failure page.
                }

                x.close(); // use this to close the modal immediately after payment.
            }
        });
    }
</script>

<form>
    <script src="https://api.ravepay.co/flwv3-pug/getpaidx/api/quidpay-inline.js"></script>
    <button type="button" onClick="payWithQuidpay()">Pay Now</button>
</form>

<script>
    const API_publicKey = "<ADD YOUR PUBLIC KEY HERE>";

    function payWithQuidpay() {
        var x = getpaidSetup({
            PBFPubKey: API_publicKey,
            customer_email: "[email protected]",
            amount: 2000,
            currency: "NGN",
            payment_method: "both",
            hosted_payment: 1, // modal would open in a new page
            redirect_url: "http://your-website.com/urltoredirect",// we call your url once payment is done and append response as query params.
            txref: "quidpay-123456",
            meta: [{
                metaname: "flightID",
                metavalue: "AP1234"
            }],
            onclose: function() {},
            callback: function(response) {
                var txref = response.tx.txRef; // collect flwRef returned and pass to a 					server page to complete status check.
                console.log("This is the response returned after a charge", response);
                if (
                    response.tx.chargeResponseCode == "00" ||
                    response.tx.chargeResponseCode == "0"
                ) {
                    // redirect to a success page
                } else {
                    // redirect to a failure page.
                }

                x.close(); // use this to close the modal immediately after payment.
            }
        });
    }
</script>

When the user enters their card details, Quidpay would do the following:

  1. Validate the card

  2. Charge it

  3. Pass a response object (containing a response code as chargeResponseCode, status and a unique payment reference as flwRef).

The chargeResponseCode has two important common response codes 00 || 0 and 02 the former means the transaction came back with a successful response, the latter means the transaction is pending validation. If after performing verification on your server and you get a responsecode that isn't 00 that means the transaction was not successful.

Quidpay Inline Quick Setup Method [Embed Code]

Alternatively you can always use a quick setup method to embed your pay button on your site. Using the embed code you can paste it on your page and a button is immediately generated to accept payments.

🚧

Quick Setup Validation

Using a quick setup we don't return a response to you, that would mean you would need to validate via other means, you can pass a redirect url so we redirect to the URL after payment and append the response as query parameters to the redirect url.

Quidpay Inline Quick Setup Sample

<form>
  <a class="flwpug_getpaid" 
  data-PBFPubKey="FLWPUBK-24b72aebb821aea177483039677df9d3-X" 
  data-txref="quidpay-123456" 
  data-amount="2000" 
  data-customer_email="[email protected]" 
  data-currency="NGN" 
  data-pay_button_text="Pay Now" 
  data-country="NG" 
  data-redirect_url="https://your-website.com/urlredirect"></a>

  <script type="text/javascript" src="https://api.ravepay.co/flwv3-pug/getpaidx/api/quidpay-inline.js"></script>
</form>

Quidpay Inline Sample callback response

{
  "status": "success",
  "message": "Charge Complete",
  "data": {
    "data": {
      "responsecode": "00",
      "responsemessage": "successful"
    },
    "tx": {
      "id": 10604,
      "txRef": "12373",
      "orderRef": "URF_1501152088995_7069035",
      "flwRef": "FLW-MOCK-f0ef7b5fc0e9a2e00e02169aff4572de",
      "redirectUrl": "http://127.0.0",
      "device_fingerprint": "69e6b7f0b72037aa8428b70fbe03986c",
      "settlement_token": null,
      "cycle": "recurring-daily",
      "amount": 290,
      "charged_amount": 290,
      "appfee": 0,
      "merchantfee": 0,
      "merchantbearsfee": 0,
      "chargeResponseCode": "00",
      "chargeResponseMessage": "Success-Pending-otp-validation",
      "authModelUsed": "PIN",
      "currency": "NGN",
      "IP": "197.242.109.215",
      "narration": "FLW-PBF CARD Transaction ",
      "status": "successful",
      "vbvrespmessage": "successful",
      "authurl": "http://flw-pms-dev.eu-west-1.elasticbeanstalk.com/mockvbvpage?ref=FLW-MOCK-f0ef7b5fc0e9a2e00e02169aff4572de&code=00&message=Approved. Successful",
      "vbvrespcode": "00",
      "acctvalrespmsg": null,
      "acctvalrespcode": null,
      "paymentType": "card",
      "paymentId": "2",
      "fraud_status": "ok",
      "charge_type": "normal",
      "is_live": 0,
      "createdAt": "2017-07-27T10:41:28.000Z",
      "updatedAt": "2017-07-27T10:41:42.000Z",
      "deletedAt": null,
      "customerId": 517,
      "AccountId": 134,
      "customer": {
        "id": 517,
        "phone": null,
        "fullName": "teni adebola",
        "customertoken": null,
        "email": "[email protected]",
        "createdAt": "2017-06-02T10:33:13.000Z",
        "updatedAt": "2017-06-02T10:33:13.000Z",
        "deletedAt": null,
        "AccountId": 134
      },
      "chargeToken": {
        "user_token": "82bfc",
        "embed_token": "flw-t0-2a2646448375873c9060eeffe48bdedb-m03k"
      }
    }
  }
}

{
  "status": "success",
  "message": "Charge Complete",
  "data": {
    "data": {
      "responsetoken": null,
      "responsecode": "RR",
      "responsemessage": "Sorry, that OTP is invalid. Please try again",
      "transactionreference": "RAVE/FLW34130692",
      "otptransactionidentifier": null,
      "responsehtml": null,
      "redirecturl": null,
      "avsresponsecode": null,
      "avsresponsemessage": null
    },
    "tx": {
      "id": 127367,
      "txRef": "quidpay-checkout-1501076030",
      "orderRef": "URF_1501076057894_416335",
      "flwRef": "RAVE/FLW34130692",
      "redirectUrl": "http://127.0.0",
      "device_fingerprint": "69e6b7f0b72037aa8428b70fbe03986c",
      "settlement_token": null,
      "cycle": "one-time",
      "amount": 20,
      "charged_amount": 20.25,
      "appfee": 0.25,
      "merchantfee": 0,
      "merchantbearsfee": 0,
      "chargeResponseCode": "02",
      "chargeResponseMessage": "Enter the OTP code sent to your phone to complete the transaction",
      "authModelUsed": "PIN",
      "currency": "NGN",
      "IP": "197.242.109.215",
      "narration": "FLW-PBF CARD Transaction ",
      "status": "failed",
      "vbvrespmessage": "Sorry, that OTP is invalid. Please try again",
      "authurl": "N/A",
      "vbvrespcode": "RR",
      "acctvalrespmsg": null,
      "acctvalrespcode": null,
      "paymentType": "card",
      "paymentId": "2",
      "fraud_status": "ok",
      "charge_type": "normal",
      "is_live": 0,
      "createdAt": "2017-07-26T13:34:17.000Z",
      "updatedAt": "2017-07-26T13:34:59.000Z",
      "deletedAt": null,
      "customerId": 34,
      "AccountId": 48,
      "customer": {
        "id": 34,
        "phone": null,
        "fullName": "Anonymous customer",
        "customertoken": null,
        "email": "[email protected]",
        "createdAt": "2017-02-08T17:35:44.000Z",
        "updatedAt": "2017-02-08T17:35:44.000Z",
        "deletedAt": null,
        "AccountId": 48
      }
    }
  }
}

{
  "status": "error",
  "message": "Fraudulent. Transaction",
  "data": {
    "code": "FLW_ERR",
    "message": "Fraudulent. Transaction",
    "tx": {
      "id": 34347,
      "txRef": "quidpay-checkout-1505323730",
      "orderRef": "URF_1505323795398_2349835",
      "flwRef": "FLW-MOCK-ed8b451ad9e54f756f26fb68cfcac352",
      "redirectUrl": "http://127.0.0",
      "device_fingerprint": "69e6b7f0b72037aa8428b70fbe03986c",
      "settlement_token": null,
      "cycle": "one-time",
      "amount": 3000,
      "charged_amount": 3000,
      "appfee": 0,
      "merchantfee": 0,
      "merchantbearsfee": 0,
      "chargeResponseCode": "MRA",
      "chargeResponseMessage": "Fraudulent. Transaction",
      "authModelUsed": "PIN",
      "currency": "NGN",
      "IP": "41.78.174.160",
      "narration": "FLW-PBF CARD Transaction ",
      "status": "failed",
      "vbvrespmessage": "Fraudulent. Transaction",
      "authurl": "http://flw-pms-dev.eu-west-1.elasticbeanstalk.com/mockvbvpage?ref=FLW-MOCK-ed8b451ad9e54f756f26fb68cfcac352&code=MRA&message=Fraudulent. Transaction&receiptno=RN1505323795404",
      "vbvrespcode": "MRA",
      "acctvalrespmsg": null,
      "acctvalrespcode": null,
      "paymentType": "card",
      "paymentId": "4",
      "fraud_status": "ok",
      "charge_type": "normal",
      "is_live": 0,
      "createdAt": "2017-09-13T17:29:55.000Z",
      "updatedAt": "2017-09-13T17:29:56.000Z",
      "deletedAt": null,
      "customerId": 3670,
      "AccountId": 134,
      "customer": {
        "id": 3670,
        "phone": null,
        "fullName": "Anonymous customer",
        "customertoken": null,
        "email": "[email protected]",
        "createdAt": "2017-09-13T17:29:55.000Z",
        "updatedAt": "2017-09-13T17:29:55.000Z",
        "deletedAt": null,
        "AccountId": 134
      }
    }
  }
}

{
  "status": "success",
  "message": "Charge Complete",
  "data": {
    "data": {
      "responsecode": "00",
      "responsemessage": "successful"
    },
    "tx": {
      "id": 9795,
      "txRef": "12373",
      "orderRef": "URF_1501076378098_6170335",
      "flwRef": "FLW-MOCK-81b4a857591eecab860833496697e81a",
      "redirectUrl": "http://127.0.0",
      "device_fingerprint": "69e6b7f0b72037aa8428b70fbe03986c",
      "settlement_token": null,
      "cycle": "recurring-daily",
      "amount": 290,
      "charged_amount": 290,
      "appfee": 0,
      "merchantfee": 0,
      "merchantbearsfee": 0,
      "chargeResponseCode": "00",
      "chargeResponseMessage": "Success-Pending-otp-validation",
      "authModelUsed": "PIN",
      "currency": "NGN",
      "IP": "197.242.109.215",
      "narration": "FLW-PBF CARD Transaction ",
      "status": "successful",
      "vbvrespmessage": "successful",
      "authurl": "http://flw-pms-dev.eu-west-1.elasticbeanstalk.com/mockvbvpage?ref=FLW-MOCK-81b4a857591eecab860833496697e81a&code=00&message=Approved. Successful",
      "vbvrespcode": "00",
      "acctvalrespmsg": null,
      "acctvalrespcode": null,
      "paymentType": "card",
      "paymentId": "2",
      "fraud_status": "ok",
      "charge_type": "normal",
      "is_live": 0,
      "createdAt": "2017-07-26T13:39:38.000Z",
      "updatedAt": "2017-07-26T13:39:45.000Z",
      "deletedAt": null,
      "customerId": 517,
      "AccountId": 134,
      "customer": {
        "id": 517,
        "phone": null,
        "fullName": "teni adebola",
        "customertoken": null,
        "email": "[email protected]",
        "createdAt": "2017-06-02T10:33:13.000Z",
        "updatedAt": "2017-06-02T10:33:13.000Z",
        "deletedAt": null,
        "AccountId": 134
      },
      "chargeToken": {
        "user_token": "82bfc",
        "embed_token": "flw-t0-2a2646448375873c9060eeffe48bdedb-m03k"
      }
    }
  }
}

{
  "status": "error",
  "message": "NOT_ENROLLED_NO_ERROR_DETAILS",
  "data": {
    "code": "FLW_ERR",
    "message": "NOT_ENROLLED_NO_ERROR_DETAILS",
    "tx": {
      "id": 34355,
      "txRef": "quidpay-checkout-1505327540",
      "orderRef": "URF_1505327555322_5655035",
      "flwRef": "URF_1505327555322_5655035",
      "redirectUrl": "http://127.0.0",
      "device_fingerprint": "69e6b7f0b72037aa8428b70fbe03986c",
      "settlement_token": null,
      "cycle": "one-time",
      "amount": 9000,
      "charged_amount": 9000,
      "appfee": 0,
      "merchantfee": 0,
      "merchantbearsfee": 0,
      "chargeResponseCode": "RR",
      "chargeResponseMessage": "NOT_ENROLLED_NO_ERROR_DETAILS",
      "authModelUsed": "VBVSECURECODE",
      "currency": "NGN",
      "IP": "41.78.174.160",
      "narration": "FLW-PBF CARD Transaction ",
      "status": "failed",
      "vbvrespmessage": "NOT_ENROLLED_NO_ERROR_DETAILS",
      "authurl": "N/A",
      "vbvrespcode": "RR",
      "acctvalrespmsg": null,
      "acctvalrespcode": null,
      "paymentType": "card",
      "paymentId": "172",
      "fraud_status": "ok",
      "charge_type": "normal",
      "is_live": 0,
      "createdAt": "2017-09-13T18:32:35.000Z",
      "updatedAt": "2017-09-13T18:32:41.000Z",
      "deletedAt": null,
      "customerId": 3678,
      "AccountId": 134,
      "customer": {
        "id": 3678,
        "phone": null,
        "fullName": "Anonymous customer",
        "customertoken": null,
        "email": "[email protected]",
        "createdAt": "2017-09-13T18:32:35.000Z",
        "updatedAt": "2017-09-13T18:32:35.000Z",
        "deletedAt": null,
        "AccountId": 134
      }
    }
  }
}

{
  "status": "error",
  "message": "Insufficient Funds",
  "data": {
    "code": "FLW_ERR",
    "message": "Insufficient Funds",
    "tx": {
      "id": 34349,
      "txRef": "quidpay-checkout-1505324017",
      "orderRef": "URF_1505324080498_3936935",
      "flwRef": "FLW-MOCK-c7d4527561388d6c9e568edc64c8a214",
      "redirectUrl": "http://127.0.0",
      "device_fingerprint": "69e6b7f0b72037aa8428b70fbe03986c",
      "settlement_token": null,
      "cycle": "one-time",
      "amount": 4500,
      "charged_amount": 4500,
      "appfee": 0,
      "merchantfee": 0,
      "merchantbearsfee": 0,
      "chargeResponseCode": "ISF",
      "chargeResponseMessage": "Insufficient Funds",
      "authModelUsed": "PIN",
      "currency": "NGN",
      "IP": "41.78.174.160",
      "narration": "FLW-PBF CARD Transaction ",
      "status": "failed",
      "vbvrespmessage": "Insufficient Funds",
      "authurl": "http://flw-pms-dev.eu-west-1.elasticbeanstalk.com/mockvbvpage?ref=FLW-MOCK-c7d4527561388d6c9e568edc64c8a214&code=MRL&message=Insufficient Funds&receiptno=RN1505324080503",
      "vbvrespcode": "ISF",
      "acctvalrespmsg": null,
      "acctvalrespcode": null,
      "paymentType": "card",
      "paymentId": "3",
      "fraud_status": "ok",
      "charge_type": "normal",
      "is_live": 0,
      "createdAt": "2017-09-13T17:34:40.000Z",
      "updatedAt": "2017-09-13T17:34:42.000Z",
      "deletedAt": null,
      "customerId": 3672,
      "AccountId": 134,
      "customer": {
        "id": 3672,
        "phone": null,
        "fullName": "Anonymous customer",
        "customertoken": null,
        "email": "[email protected]",
        "createdAt": "2017-09-13T17:34:40.000Z",
        "updatedAt": "2017-09-13T17:34:40.000Z",
        "deletedAt": null,
        "AccountId": 134
      }
    }
  }
}

{
  "status": "error",
  "message": "pending-otp-validation",
  "data": {
    "code": "FLW_ERR",
    "message": "pending-otp-validation",
    "tx": {
      "id": 34348,
      "txRef": "quidpay-checkout-1505323938",
      "orderRef": "URF_1505323956032_3583235",
      "flwRef": "FLW-MOCK-bff85eabbd68a6f5d58772e75138ca73",
      "redirectUrl": "http://127.0.0",
      "device_fingerprint": "69e6b7f0b72037aa8428b70fbe03986c",
      "settlement_token": null,
      "cycle": "one-time",
      "amount": 6000,
      "charged_amount": 6000,
      "appfee": 0,
      "merchantfee": 0,
      "merchantbearsfee": 0,
      "chargeResponseCode": "DBN",
      "chargeResponseMessage": "pending-otp-validation",
      "authModelUsed": "PIN",
      "currency": "NGN",
      "IP": "41.78.174.160",
      "narration": "FLW-PBF CARD Transaction ",
      "status": "failed",
      "vbvrespmessage": "pending-otp-validation",
      "authurl": "http://flw-pms-dev.eu-west-1.elasticbeanstalk.com/mockvbvpage?ref=FLW-MOCK-bff85eabbd68a6f5d58772e75138ca73&code=MRD&message=Declined: Bank-Do-not-honor&receiptno=RN1505323956072",
      "vbvrespcode": "DBN",
      "acctvalrespmsg": null,
      "acctvalrespcode": null,
      "paymentType": "card",
      "paymentId": "11",
      "fraud_status": "ok",
      "charge_type": "normal",
      "is_live": 0,
      "createdAt": "2017-09-13T17:32:36.000Z",
      "updatedAt": "2017-09-13T17:32:37.000Z",
      "deletedAt": null,
      "customerId": 3671,
      "AccountId": 134,
      "customer": {
        "id": 3671,
        "phone": null,
        "fullName": "Anonymous customer",
        "customertoken": null,
        "email": "[email protected]",
        "createdAt": "2017-09-13T17:32:36.000Z",
        "updatedAt": "2017-09-13T17:32:36.000Z",
        "deletedAt": null,
        "AccountId": 134
      }
    }
  }
}

Parameters you can pass

Quidpay Inline Parameters

ParameterRequiredDescription
PBFPubKeytrueYour merchant public key, see how to get your API Keys
integrity_hashfalseThis is a sha256 hash of your getpaidSetup values, it is used for passing secured values to the payment gateway.
txreftrueYour Unique transaction reference.
payment_optionsfalseThis allows you select the payment option you want for your users, see Choose Payment Methods for more info.
payment_planfalseThis is the payment plan ID used for Recurring billing ].
subaccountsfalseThis is an array of objects containing the subaccount IDs to split the payment into.
amounttrueAmount to charge.
currencyfalsecurrency to charge in. Defaults to NGN
countryfalseroute country. Defaults to NG
customer_emailtrueEmail of the customer.
customer_phonetruephone number of the customer.
customer_firstnamefalsefirstname of the customer.
customer_lastnamefalselastname of the customer.
pay_button_textfalseText to be displayed on the Quidpay Checkout Button.
custom_titlefalseText to be displayed as the title of the payment modal.
custom_descriptionfalseText to be displayed as a short modal description.
redirect_urlfalseURL 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.
custom_logofalseLink to the Logo image.
onclose: function()falseA function to be called when the pay modal is closed.
callback: function(b)falseA function to be called on successful card charge. Users can always be redirected to a successful or failed page supplied by the merchant here based on the response.
meta:[{metaname:‘flightid’,metavalue:‘93849-MK5000’}]falseAny other custom data you wish to pass.

Quidpay Quick Setup (Embed) Parameters

ParameterRequiredDescription
data-PBFPubKeytrueYour merchant public key, see how to get your API Keys
data-integrity_hashtrueThis is a Sha256 hash of your getpaidSetup values, it is used for passing secure values to the payment gateway.
data-txreftrueYour Unique transaction reference.
data-payment_optionsfalseThis allows you select the payment option you want for your users, see Choose Payment Methods for more info.
data-payment_planfalseThis is the payment plan ID used for Recurring billing ].
data-subaccountsfalseThis is an array of objects containing the subaccount IDs to split the payment into.
data-amounttrueAmount to charge.
data-currencyfalsedefaults to NGN currency to charge the card in.
data-countryfalsedefaults to NG route country.
data-customer_emailtrueEmail of the customer.
data-customer_phonenumbertruephone number of the customer.
data-customer_firstnamefalsefirstname of the customer.
data-customer_lastnamefalselastname of the customer.
data-pay_button_textfalseText to the on the Quidpay Checkout Button.
data-custom_titlefalseText to be displayed as the title of the payment modal.
data-custom_descriptionfalseText to be displayed as a short modal description.
data-redirect_urlfalseURL 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.
data-custom_logofalseLink to the Logo image.
data-meta-[custom_param]falseAny other custom data you wish to pass.

Updated about 6 years ago

What’s Next

After using this successfully, you would have to verify your payment.