Widget Pop-up

Crypto on-ramp on your website

The widget product allows you to on-ramp your users without them leaving your website/app by just initiating a pop-up.

1. Get your public key

Get your public key from your dashboard

2. Add the pay-ins/collections script

<form>
    <script src="https://cdn.localramp.co/onramp-inline.js"></script>
    <button type="button" onclick="payWithLocalRamp()"> Pay </button>
</form>

<script>
    function payWithLocalRamp() {
        window.LocalRampBuy.initialize({
            public_key: "pk_live_*********************",
            reference: "your-unique-reference",
            sender_amount: "22000.00", 
            sender_currency: "NGN",
            country_code: "NG",
            receiver_currency: "USDT_TRX",
            email: "[e-mail]",
            destination_address:"THS6HKWEFrwH9Gpzxkvm43L9D8TaLSXZ8z"
            widget_color: "#DA70D6",
            onClose: function (ref) {
              // Handle when the modal is closed
            },
        });
    }
</script>

Avoid exposing your secret key on the client side (or front end) of your application. Requests to LocalRamp's API should be initiated from your server.

Field	Data Type	Description
reference	String	Required - Your unique transaction reference. Must be unique for every transaction. e.g "Abc123"
email	String	Optional e.g "[e-mail]"
sender_currency	String	Optionally Required - The currency your user would be paying in. It becomes required only if sender_amount or receiver_amount is provided. e.g "NGN"
country_code	String	Optionally Required - The country_code of the user paying in. It becomes required only if sender_currencyis provided. e.g "NG", "KE", "GH", "ZM"
receiver_currency	String	Optionally Required - The cryptocurrency that would be received. It becomes required only if sender_amount , receiver_amount or destination_address is provided. e.g "USDT_BSC"
sender_amount	String	Optional - amount your user would be paying in sender_currency unit. e.g "20000.00". If this is present, then receiver_amount should be omitted
receiver_amount	String	Optional - crypto amount that should be received in receiver_currency unit. e.g "0.78728772". If this is present, then sender_amount should be omitted
destination_address	String	Optional - crypto address where payments will be sent to. e.g "0xC637255611b0A70259722c35D419077Da4cACcfF"
destination_tag	String	Optionally required - For coins that require a memo or tag. It is only required if address provided supports tags/memos e.g "3239783255"
payment_method	String	Optional - Specify a particular payment method e.g instant_p2p
widget_color	String	Optional - Hex color code to customize widget e.g "#DA70D6"
onClose	[Function]	Optional - Gets called whenever the user closes the modal. This could be as a result of the transaction being completed or abandoned.

You can pass either the sender_amount or receiver_amount when initializing the widget but not both.

Before passing in either the sender_amount or receiver_amount, you'll need to know the maximum and minimum values allowed for each field. See limit section.

To get the list of supported currencies and country codes for both sender_currency and receiver_currency see the Get currencies section

sender_amount and receiver_amount show payment intent and does not guarantee the exact value that would be received at the end of the transaction. To see the exact amounts received, get transaction state.

3. Verifying the transaction status

Once the modal is closed, the onClose function is called with the transaction reference

onClose(reference)

This is the same reference used in initializing the widget which can now be used to verify the transaction. See verify section

4. Receive confirmation via webhook

In some cases, the crypto might take a few minutes to arrive. If you do not want to keep querying the transaction status, you can always get informed when the transaction is complete through webhooks. See webhook section.