# Onramp Widget

The Onramp Widget allows end-users to pay in fiat, while the merchant receives the funds in cryptocurrency directly into their Calypso account. It is designed for easy integration into the merchant's website or product, enabling payments via cards and other supported methods.

To view the widget you can click on the field below and in a new page you will see an onramp widget with test data.

{% embed url="<https://pay.calypso.finance/onramp?color=256eff&logo=true&radius=6&test=true&theme=light>" fullWidth="false" %}

## User Flow:

### 1. Select payment currency.

The cryptocurrency in which the merchant will receive funds is passed in the **currency** parameter.

### 2. Enter amount.

* The merchant specifies the amount of cryptocurrency equivalent that the user must pay using one of the fiat payment methods.
  * To do this, the merchant passes the amount in the **amount** parameter in the widget URL.
    * If the entered amount is within the limits, the user will be able to proceed further to pay.
    * If the entered amount is outside the limits, the user will receive an error about the incorrect amount and will need to open a new widget with the correct amount.
* The merchant does not indicate the amount in the URL.
  * The user enters the amount in cryptocurrency or fiat equivalent, within the established limits for each payment method, and goes to the payment page.

**Example of a correctly entered amount:**

<figure><img src="https://1242099714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlF2vAHahCu7Gtgm1PkXe%2Fuploads%2FSoeTSyQEYzradrXmGTy0%2Fimage.png?alt=media&#x26;token=babd3962-48cd-4bcb-ad44-44e541571a25" alt=""><figcaption></figcaption></figure>

**Example of an entered amount exceeding the limit:**

<figure><img src="https://1242099714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlF2vAHahCu7Gtgm1PkXe%2Fuploads%2FaBM9jj6btpPFbPyHwMwB%2Fimage.png?alt=media&#x26;token=5e2169ec-febd-492f-a975-0695ad35488f" alt=""><figcaption></figcaption></figure>

### 3. Choose a payment method.

The user selects a preferred payment method (e.g., card, Apple Pay, etc.).<br>

### 4.Confirm and pay.

After confirming, the user completes the payment, and the crypto is automatically credited to the merchant's Calypso account.

**Example of confirmation page before payment:**

<figure><img src="https://1242099714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlF2vAHahCu7Gtgm1PkXe%2Fuploads%2F1dSEn0OuVPHOg5boPvng%2Fimage.png?alt=media&#x26;token=c2059196-b97a-401b-82f7-b510715835ec" alt=""><figcaption></figcaption></figure>