In a nutshell

To accept a payment, create a transaction using our API, our client Javascript library, Popup JS, Payment JS, or HTML Checkout. Every transaction includes a link that can be used to complete payment.

Popup & Redirect JS

Boompay Popup provides a simple and convenient payment flow for web. It can be integrated in few easy steps, making it the easiest way to start accepting payments.

Collect customer information

To initialize the transaction, you'll need to pass information such as email, first name, last name amount, transaction reference, etc. Email and amount are required. You can also pass any other additional information in the metadata object field. Here is the full list of parameters you can pass:

Parameter Type Required Description
public_key String Yes This is required for authentication
return_url Url No URL to redirect when a transaction is completed.
Successful transactions redirects to this url after payment.
{tx_ref} is returned, so you don't need to pass it with your url
tx_ref String Yes Your transaction reference. This MUST be unique for every transaction.
first_name String Yes This is the first_name of your customer.
last_name String Yes This is the last_name of your customer.
email String Yes This is the email address of your customer.
Transaction notification will be sent to this email address.
currency String Yes Currency to charge in. [ 'ARS', 'BRL', 'CAD', 'CNY', 'GHS', 'INR', 'NGN', 'GBP', 'USD' ]
amount Integer Yes Amount to charge the customer.
customization Array Yes Contains title, description and logo of merchant
{
"title":"Title of payment",
"description":"Description of payment",
"logo":"https://assets.piedpiper.com/logo.png"
}
meta Array No You can pass extra information here.

HTML


<form method="POST" action="https://whitelabel.justwallet.com/boompay/ext_transfer" >
    <input type="hidden" name="public_key" value="{public_key}" />
    <input type="hidden" name="return_url" value="https://example.com/returnurl" />
    <input type="hidden" name="tx_ref" value="XzzRVvBw3G" />
    <input type="hidden" name="amount" value="100" />
    <input type="hidden" name="currency" value="USD" />
    <input type="hidden" name="email" value="[email protected]" />
    <input type="hidden" name="first_name" value="John" />
    <input type="hidden" name="last_name" value="Doe" />
    <input type="hidden" name="title" value="Test Payment" />
    <input type="hidden" name="description" value="Payment Description" />
    <input type="hidden" name="logo" value="https://example.com/logo.png" />
    <input type="hidden" name="meta" value="" />
    <input type="submit" value="submit" />
</form>

Sample Inline Redirect Implementation

You can embed Boompay on your page using our Checkout() JavaScript function. The function responds to your request in accordance with your request configurations. If you specify a callback_url in your request, the function will redirect your users to the provided callback URL when they complete the payment.


<form>
    <script src="https://whitelabel.justwallet.com/boompay/v1/payment.js"></script>
    <button type="button" onClick="makePayment()">Pay Now</button>
</form>
<script>
    function makePayment(){
        Checkout({
            "public_key": "{public_key}",
            "tx_ref": '' + Math.floor((Math.random() * 1000000000) + 1),
            "amount": 100,
            "currency": "USD",
            "return_url": "https://webhook.site",
            "customer":{
            "email": "[email protected]",
            "first_name":"John",
            "last_name":"Doe",
            },
            "customization": {
                "title": "Test Payment",
                "description": "Payment Description",
                "logo": "https://assets.piedpiper.com/logo.png"
            },
            "meta": {
                "uuid": "uuid",
                "response": "Response"
            }
        });
    }
    </script>

Sample Inline Popup Implementation

You can embed Boompay on your page using our Checkout() JavaScript function. The function responds to your request in accordance with your request configurations. If you specify a callback_url in your request, the function will redirect your users to the provided callback URL when they complete the payment.


<form>
    <script src="https://whitelabel.justwallet.com/boompay/v1/popup.js"></script>
    <div id="wrapper"></div>
    <button type="button" onClick="makePayment()">Pay Now</button>
</form>
<script>
    function makePayment(){
        Checkout({
            "public_key": "{public_key}",
            "tx_ref": '' + Math.floor((Math.random() * 1000000000) + 1),
            "amount": 100,
            "currency": "USD",
            "return_url": "https://webhook.site",
            "customer":{
            "email": "[email protected]",
            "first_name":"John",
            "last_name":"Doe",
            },
            "customization": {
                "title": "Test Payment",
                "description": "Payment Description",
                "logo": "https://assets.piedpiper.com/logo.png"
            },
            "meta": {
                "uuid": "uuid",
                "response": "Response"
            }
        });
    }
    </script>