# Full-page checkout

This allows you to redirect your users to a separate fiat on-ramp checkout page.

With the Checkout Redirect option, you can access the LocalRamp payment gateway by making a request from your server to our [initiate buy endpoint](#2-initialize-the-transaction). We would return a response that includes a Checkout URL that loads the payment page where your users can purchase crypto. After payment is completed or canceled, the customer is returned to any URL specified by you.

### 1. Collect payment details

Collect payment/purchase details from your user. These details are passed to the [initiate buy endpoint](#2-initialize-the-transaction).

Please find below the request body for the endpoint.

<table><thead><tr><th width="201">Field</th><th width="130">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>callback_url</td><td>String</td><td><strong>Optional</strong> - The url to redirect your users to, when the transaction is complete</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 %}

### 2 - Initialize the transaction

After collecting the necessary payment details for the transaction. Make a **POST** request to our initiate buy endpoint.

{% code overflow="wrap" %}

```
https://api.localramp.co/v1/transaction/buy/initiate
```

{% endcode %}

This endpoint takes the [payment details](#1.-collect-payment-details) as the request body.

With the following header

```
x-auth-token: <SECRET_KEY>
```

This endpoint is protected by secret key authentication. So when calling it, append the `x-auth-token` header with your secret key.

If the API call is successful, LocalRamp returns the following response:

```javascript

{
    "status": "success",
    "msg": "Transaction(buy) initiated successfully",
    "data": {
        "reference": "your-unique-reference",
        "checkout_link": "https://checkout.localramp.co/bTYUBjkns"
    }
}

```

You should then redirect your user to the Checkout URL provided in the response to enable them to complete their payment.&#x20;

You can also choose to open the checkout link in an iframe

{% code overflow="wrap" %}

```html
<iframe src="https://checkout.localramp.co/bTYUBjkns" frameborder="0" width="350" height="500" allow="clipboard-read; clipboard-write self *"></iframe>
```

{% endcode %}

Once the purchase is complete or the checkout is closed, LocalRamp will redirect your user to your specified `callback_url`.&#x20;

### 3. Verifying the transaction status

The transaction reference will be appended as a query parameter to your `callback_url` as well.

`https://website_callback_url/?reference=YOUR_REFERENCE`

You can now verify the status of the transaction. See [verify section](/crypto-on-ramp/get-transaction-state.md)

In a situation where no `callback_url` is passed, the user will be redirected to your business website.&#x20;

### 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/full-page-checkout.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.