DocumentationRecipesAPI ReferencesSupportBlog
Documentation

Hosted Payment Pages

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

Suggest Edits

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.

<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

<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>

Updated about 6 years ago

Next Steps

Congrats! You now have our hosted payment form on your site to accept payment securely from your customers, to see how to check the status of your payment click on the button below.