Comment on page
Widget
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
<form>
2
<script src="https://cdn.localramp.co/onramp-inline.js"></script>
3
<button type="button" onclick="payWithLocalRamp()"> Pay </button>
4
</form>
<script>
function payWithLocalRamp() {
window.LocalRamp.initialize({
public_key: "pk_live_*********************",
reference: "your-unique-reference",
sender_amount: "22000.00",
sender_currency: "NGN",
receiver_currency: "USDT_TRX",
email: "[email protected]",
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 "[email protected]" |
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" |
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 | |
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 for both
sender_currency and receiver_currency see the Get currencies sectionsender_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.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
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.
Last modified 7mo ago