Hosted Payment Pages

This page describes how to embed rave using the hosted payment feature.

Hosted payment pages, allow you load rave'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.

JavaScript

<form>
    <script src="https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-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: "rave-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 Rave Inline Sample

HTML

<form>
  <a class="flwpug_getpaid" 
  data-PBFPubKey="<ADD YOUR PUBLIC KEY HERE>" 
  data-txref="rave-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/flwpbf-inline.js"></script>
</form>