# Widget Pop-up

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](https://merchant.localramp.co/dashboard/settings/api) from your dashboard

### 2. Add the pay-ins/collections script

{% code lineNumbers="true" %}

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

{% endcode %}

```html
<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: "richard@piedpiper.com",
            destination_address:"THS6HKWEFrwH9Gpzxkvm43L9D8TaLSXZ8z"
            widget_color: "#DA70D6",
            onClose: function (ref) {
              // Handle when the modal is closed
            },
        });
    }
</script>
```

{% hint style="danger" %}
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.
{% endhint %}

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

{% hint style="info" %}
You can pass either the `sender_amount` or `receiver_amount` when initializing the widget but **not** both.
{% endhint %}

{% hint style="info" %}
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](/crypto-on-ramp/get-limits.md).
{% endhint %}

{% hint style="info" %}
To get the list of supported currencies and country codes for both `sender_currency` and `receiver_currency` see the [Get currencies section](/crypto-on-ramp/get-supported-currencies.md)
{% endhint %}

{% hint style="warning" %}
**`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](/crypto-on-ramp/get-transaction-state.md).
{% endhint %}

### 3. Verifying the transaction status

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

```javascript
onClose(reference)
```

This is the same reference used in initializing the widget which can now be used to verify the transaction. See [verify section](/crypto-on-ramp/get-transaction-state.md)

### 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](/webhooks/introduction.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.localramp.co/crypto-on-ramp/widget-pop-up.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.