Hosted Payment Page

Hosted payment pages, allow you load quidpay's modal on a different page, this can be useful for browsers like opera or for people who don't want the modal to load on their site. We would show a guide below on how to use the getpaidSetup function to setup a hosted payment page.

<form>
    <script src="https://api.ravepay.co/flwv3-pug/getpaidx/api/quidpay-inline.js"></script>
    <button type="button" onClick="payWithRave()">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",
            txref: "quidpay-123456",
            hosted_payment: 1,
            redirect_url: "https://your-website.com/url-to-redirect-to"
            meta: [{
                metaname: "flightID",
                metavalue: "AP1234"
            }],
            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>

The hosted_payment: 1 allows your payment modal load on a new page.

📘
Getting a response when using hosted payment page
When using the hosted payment page, you need to add a redirect url to your getpaidSetup function, when the payment is completed on the new page, we would call your redirect url and append the response as query parameters to it.

Hosted Payment page Quidpay Inline Sample

<form>
  <a class="flwpug_getpaid" 
  data-PBFPubKey="<ADD YOUR PUBLIC KEY HERE>" 
  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"
  data-hosted_payment=1></a>

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

📘Getting a response when using hosted payment page

Hosted Payment page Quidpay Inline Sample

📘
Getting a response when using hosted payment page