Definition

On Ramp

Widget Onramp allows the user get cryptocurrencies from FIAT money. User will need to have a crypto wallet to be able to fund and prove that he/she is an authenticated natural person through a KYC (Know Your Client) flow. The payment methods integrated with the widget for Argentina are Mercado Pago and Bank Transfer. The widget is developed to provide its functionalities in any browser.

Off Ramp

Widget Onramp allows the user get FIAT money from cryptocurrencies. User will need to have a Bank account to be able to depositing and prove that he/she is an authenticated natural person through a KYC (Know Your Client) flow. The deposit method integrated with the widget for Argentina is Bank Transfer. The widget is developed to provide its functionalities in any browser,.

Requirements

Credentials: Credentials must be requested in order to generate an Authentication token needed to use Widget On Ramp. Contact Ripio support to request the partner’s registration and obtain client_id and client_secret, which univocally identify you as a Ripio customer. It is the partner’s responsibility to secure these credentials.
Post-Confirmation Redirect URL: It is required to provide a URL which we will redirect the user once the operation is confirmed. This URL must be public in order to let user continue to the partner’s platform.

Integration

Generate authentication token

This service provides an access JWT token for the user to use the On Ramp Widget. Endpoint: http://b2b-widget-onramp-api.ripio.com/api/v1/auth

Sandbox:: https://b2b-widget-onramp-api.sandbox.ripio.com/api/v1/auth

Method: POST Parameters:

Parameter	Type	Description
`username`	string	The username is composed of a concatenation of `client_id` + “`:`” + `external_ref`.
`password`	string	The password is the `client_secret`

Disclaimer:

external_ref: UUID v4 that represents the user logged into your system. It must be a unique and unrepeatable identifier of a user of your system (Read more about UUID and try using generator). This value is then used in the request for approval of a purchase transaction or when reporting the result of a transaction. (see Webhooks). In the documentation we refer to this value as external_ref.

Request:

curl \
--location --request POST 'http://b2b-widget-onramp-api.ripio.com/api/v1/auth' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'username=<client_id>:<external_ref>' \
--data-urlencode 'password=<client_secret>'

Example:

curl \
--location --request POST 'http://b2b-widget-onramp-api.ripio.com/api/v1/auth' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'username=<client_id>:USER_1111' \
--data-urlencode 'password=<client_secret>'

Response:

{
    "succeed": true,
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZXNzaW9uIjoiMThhYjZkNmM4ZDk4NWE5Y2M4N2IwMTcyN2ExMWYwOTQ4YzJmNGUxYzQ0ODEzZTZhNDU0MzcxYTg1NzY3YjE5OSIsImV4cCI6MTcwODI5ODMzM30.4aRUEXLkUs3jf-DYMcH8claUuDKfc8qbTjW6JzpBTjI",
    "token_type": "bearer"
}

On Ramp

To access Widget On Ramp, you must direct the user from your platform to the Widget On Ramp along with the access token generated above. The URL must be formed as follows:

https://b2b-widget-onramp.ripio.com?_to=<authentication_token>

Sandbox:: https://b2b-widget-onramp.sandbox.ripio.com

Example:

https://b2b-widget-onramp.ripio.com?_to=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZXNzaW9uIjoiMThhYjZkNmM4ZDk4NWE5Y2M4N2IwMTcyN2ExMWYwOTQ4YzJmNGUxYzQ0ODEzZTZhNDU0MzcxYTg1NzY3YjE5OSIsImV4cCI6MTcwODI5ODMzM30.4aRUEXLkUs3jf-DYMcH8claUuDKfc8qbTjW6JzpBTjI

Off Ramp

To access Widget Off Ramp, you must direct the user from your platform to the Widget Off Ramp along with the access token generated above. The URL must be formed as follows:

https://b2b-widget-onramp.ripio.com/offramp.html?_to=<authentication_token>

Sandbox:: https://b2b-widget-onramp.sandbox.ripio.com/offramp.html

Example:

https://b2b-widget-onramp.ripio.com/offramp.html?_to=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZXNzaW9uIjoiMThhYjZkNmM4ZDk4NWE5Y2M4N2IwMTcyN2ExMWYwOTQ4YzJmNGUxYzQ0ODEzZTZhNDU0MzcxYTg1NzY3YjE5OSIsImV4cCI6MTcwODI5ODMzM30.4aRUEXLkUs3jf-DYMcH8claUuDKfc8qbTjW6JzpBTjI

When accessing the user will see the following welcome screen:

Parameters

Widget configuration parameters using query params.

Parameter	Type	Description
`_addr`	string (Optional)	Set address to prefill onramp wallet which it won’t be editable. Ex: `0x646eE511616A20a321A1cB72DADCB04C0485b97e`
`_net`	string	Set network to pre select chain. It must match the networks available to the partner. Ex: `ETHEREUM`
`_amount`	string	Set amount to prefill amount of fiat to onramp. Ex: `1000` or `4321.35`
`_crypto`	string (Optional)	Set crypto currency which it won’t be editable. It must match the cryptos available to the partner. Ex: `USDT`
`_tracking_session`	string (Optional)	Custom identifier to track the user session on your end. It will be returned in the webhooks under `metadata.session`. Ex: `random-tracking-id-onramp`

Tracking session parameter

The _tracking_session parameter can be used as follow:

https://b2b-widget-onramp.sandbox.ripio.com/index.html?_to=<token>&_tracking_session=random-tracking-id-onramp

Then, you will receive the tracking session in the webhooks as follows:

{
  "eventType": "ON-RAMP.DEPOSIT.RECEIVED",
  "transaction": {
    ...
    "metadata": {
      "session": "random-tracking-id-onramp"
    }
  }
}

Post-Transaction Redirect Behavior

On Ramp

The On Ramp widget supports a manual redirection flow once the user completes a fiat-to-crypto purchase. After the user confirms the operation and the On Ramp order is successfully created, the widget will display a final screen with a “Back to Partner” button. When the user clicks this button, they are redirected to a partner-configured URL with all relevant transaction information passed as query parameters. To enable this functionality, the partner must provide Ripio with a redirection URL during onboarding. This URL must be publicly accessible and can follow any structure under the partner’s domain, for example:

https://partner-fintech.com/ramps/success

Upon redirection, the following parameters will be appended: Example final URL:

https://partner-fintech.com/ramps/success?external_ref=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...&action=onramp&crypto_amount=700.21146386&token=UXD&network=ETHEREUM_SEPOLIA&deposit_address=0x646eE511616A20a321A1cB72DADCB04C0485b97e&fiat_amount=100000&fiat_currency=ARS&fees=1000&session_id=1234&country_code=AR

Query Parameters:

Parameter	Description
`external_ref`	Session token generated by the partner.
`action`	Operation type, always `onramp` in this case.
`crypto_amount`	Amount of cryptocurrency the user received.
`token`	Cryptocurrency selected by the user (e.g., `UXD`).
`network`	Blockchain network used for the crypto transfer.
`deposit_address`	User’s wallet address where crypto was sent.
`fiat_amount`	Amount of fiat used in the transaction.
`fiat_currency`	Fiat currency used by the user (e.g., `ARS`).
`fees`	Total fees applied to the transaction (e.g., platform, network, etc.).
`session_id`	Optional session identifier if sent using `_tracking_session`.
`country_code`	Country code based on the user’s location (e.g., `AR`).

Note: The session_id parameter will only be included if the partner specified a _tracking_session when constructing the On Ramp widget URL.

Example image of the final On Ramp screen:

Final On Ramp screen with "Back to Partner" button

Off Ramp

The Off Ramp widget allows automatic redirection of the user upon completing a cryptocurrency sale transaction. To enable this, the partner must provide Ripio with a redirection URL, which will be configured in the partner’s account. This URL must be publicly accessible and can point to any valid route under the partner’s domain, for example:

https://partner-fintech.com/ramps/success

Once this URL is configured, the widget can redirect the user upon completing the Off Ramp flow. There are two ways this redirection may occur, depending on the partner’s integration setup:

1. Automatic Redirection (Partner-Assisted Flow)

If a redirection URL is configured, the widget will automatically redirect the user to that URL after the Off Ramp flow is confirmed. Additionally, relevant transaction details will be appended as query parameters.

https://partner-fintech.com/ramps/success?external_ref=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...&action=offramp&crypto_amount=20&token=UXD&network=ETHEREUM_SEPOLIA&deposit_address=0x76E0cCB0EBE289C6502F97EC8458cf2337a1d339&fiat_currency=ARS&session_id=tracking-id-example&country_code=AR

Query Parameters:

Parameter	Description
`external_ref`	Session token generated by the partner.
`action`	Operation type, always `offramp` in this case.
`crypto_amount`	Amount of cryptocurrency being sold.
`token`	Selected cryptocurrency (e.g., `UXD`).
`network`	Selected blockchain network (e.g., `ETHEREUM`, `ETHEREUM_SEPOLIA`).
`deposit_address`	Deposit address where the crypto must be sent.
`fiat_currency`	Fiat currency the user will receive (e.g., `ARS`).
`session_id`	Optional session identifier if provided using `_tracking_session`.
`country_code`	Country code based on the user’s location (e.g., `AR`).

Note: The session_id parameter will only be present if the partner includes a _tracking_session value when generating the Off Ramp widget URL. This allows the partner to maintain traceability between their internal user session and the transaction on Ripio’s side.

2. Manual Redirection (User-Initiated Flow)

If the partner does not manage the user’s crypto custody, the widget will display a final screen with the required information for the user to manually send the cryptocurrency from their preferred wallet. In this case:

The user will see the deposit address (deposit_address) and the network (network) details.
The user must send the specified amount manually from their wallet.
Once the funds are received, Ripio will process the transaction and deposit the corresponding fiat amount in the user’s bank account.

Additionally, this screen will display a “Back to Partner” button. If the user clicks this button, they will be redirected to the same redirection URL configured by the partner, with the full transaction details included in the query string—just as in the automatic redirection flow. This ensures that even in manual flows, the partner can receive the complete transaction context and allow users to return to their platform seamlessly. Example image of the final Off Ramp screen (manual flow):

Example image of the final Off Ramp screen!

Settings

Customize your theme - UI

The Widget allows you to configure the theme of the user interface so that the styles are adjusted to the Partner’s brand style, and to the UX of its platform. The theme is set in the partner’s setting, and for this to be possible, the partner must send Ripio a CSS file with the variables corresponding to its brand style. Below is a template with the default values of the theme, it is recommended to copy and modify the necessary values: theme.css

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap");

:root {
  /* Color names */
  --indigo: #380574;
  --purply-blue: #7908ff;
  --purply-light: #f7f1ff;
  --pale-lilac: #ececf0;
  --light-periwinkle: #d8d9e2;
  --white: #ffffff;
  --red: #d21a30;
  --pink-red: #ff0050;
  --pink: #f5afcb;
  --light-pink: #f8f3ff;
  --dark-sky-blue: #309be5;
  --dark-grey: #1f1f1f;
  --charcoal-grey: #242424;
  --bluey-grey: #a5a7af;
  --lighter-grey: #efebf4;
  --light-grey: #f9f4ff;
  --aqua-blue: #01c9e8;
  --aqua-green: #22c55e;
  --yellow-orange: #ffb300;
  --neutral-100: #757575;
  --neutral-80: #6c6c6c;
  --neutral-50: #a5a7af;
  --neutral-20: #fff6e0;
  --neutral-10: #f8f8f9;

  /* Palette */
  --ripio-color-base: var(--white);
  --ripio-color-text: var(--dark-grey);
  --ripio-color-primary: var(--purply-blue);
  --ripio-color-primary-light: var(--purply-light);
  --ripio-color-success: var(--aqua-green);
  --ripio-color-warning: var(--red);
  --ripio-color-info: var(--light-periwinkle);
  --ripio-color-disabled: var(--light-periwinkle);
  --ripio-color-neutral-120: var(--charcoal-grey);
  --ripio-color-neutral-100: var(--neutral-100);
  --ripio-color-neutral-80: var(--neutral-80);
  --ripio-color-neutral-50: var(--neutral-50);
  --ripio-color-neutral-20: var(--neutral-20);
  --ripio-color-neutral-10: var(--neutral-10);
  --ripio-color-neutral: var(--white);

  /* Widget Container */
  --ripio-widget-bg-color: var(--white);
  --ripio-widget-border-radius: 24px;
  --ripio-widget-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);

  /* Typography */
  --ripio-font-family: "Lato";

  --ripio-font-size-display-l: 64px;
  --ripio-font-size-display-md: 48px;
  --ripio-font-size-headline-l: 32px;
  --ripio-font-size-headline-md: 24px;
  --ripio-font-size-subheadline-l: 24px;
  --ripio-font-size-subheadline-md: 22px;
  --ripio-font-size-subheadline-sm: 20px;
  --ripio-font-size-body-l: 18px;
  --ripio-font-size-body-md: 16px;
  --ripio-font-size-body-sm: 14px;
  --ripio-font-size-label-l: 16px;
  --ripio-font-size-label-md: 14px;
  --ripio-font-size-label-sm: 12px;
  --ripio-font-size-label-xs: 13px;

  --ripio-line-height-display-l: 76px;
  --ripio-line-height-display-md: 56px;
  --ripio-line-height-headline-l: 40px;
  --ripio-line-height-headline-md: 32px;
  --ripio-line-height-subheadline-l: 32px;
  --ripio-line-height-subheadline-md: 28px;
  --ripio-line-height-subheadline-sm: 28px;
  --ripio-line-height-body-l: 24px;
  --ripio-line-height-body-md: 24px;
  --ripio-line-height-body-sm: 20px;
  --ripio-line-height-label-l: 32px;
  --ripio-line-height-label-md: 20px;
  --ripio-line-height-label-sm: 16px;
  --ripio-line-height-label-xs: 15.6px;

  --ripio-text-color-neutral: var(--ripio-color-neutral-80);
  --ripio-text-color-neutral-100: var(--ripio-color-neutral-100);
  --ripio-text-color-primary: var(--ripio-color-primary);
  --ripio-text-color-base: var(--ripio-color-text);
  --ripio-text-color-base-light: var(--ripio-color-neutral-120);
  --ripio-text-color-warning: var(--ripio-color-warning);
  --ripio-text-color-success: var(--ripio-color-success);

  /* Spinner */
  --ripio-spinner-border-color: var(--ripio-color-primary);

  /* Button */
  --ripio-btn-bg-color-primary: var(--ripio-color-primary);
  --ripio-btn-bg-color-secondary: var(--ripio-color-base);
  --ripio-btn-bg-color-tertiary: var(--ripio-color-primary-light);
  --ripio-btn-bg-color-disabled: var(--ripio-color-disabled);
  --ripio-btn-text-color-primary: var(--ripio-color-base);
  --ripio-btn-text-color-secondary: var(--ripio-color-primary);
  --ripio-btn-text-color-tertiary: var(--ripio-color-primary);
  --ripio-btn-font-size: 16px;
  --ripio-btn-line-height: 24px;
  --ripio-btn-border-radius: 28px;

  /* Input */
  --ripio-input-font-size-md: 14px;
  --ripio-input-line-height-md: 16px;

  --ripio-input-font-size-l: 32px;
  --ripio-input-line-height-l: 40px;

  --ripio-input-font-size-l-mobile: 24px;
  --ripio-input-line-height-l-mobile: 30px;

  --ripio-input-border-width: 1px;
  --ripio-input-border-radius: 12px;
  --ripio-input-code-border-radius: 15px;

  --ripio-input-bg-color-disabled: var(--ripio-color-disabled);
  --ripio-input-border-color-focus: var(--ripio-color-primary);
  --ripio-input-border-color-info: var(--ripio-color-info);
  --ripio-input-border-color-warning: var(--ripio-color-warning);
  --ripio-input-border-color-success: var(--ripio-color-success);

  /* Dropdown */

  --ripio-dropdown-menu-bg-color: var(--ripio-color-base);
  --ripio-dropdown-menu-box-shadow: 0px 5px 60px 0px rgba(0, 0, 0, 0.04);
  --ripio-dropdown-menu-box-shadow-scrollable: 0px 16px 20px -8px rgba(17, 12, 34, 0.1),
    inset 0px -40px 60px -60px rgba(17, 12, 34, 0.6);
  --ripio-dropdown-menu-border-radius: 8px;
  --ripio-dropdown-menu-border-width: 1px;

  --ripio-dropdown-option-bg-color: var(--ripio-color-base);
  --ripio-dropdown-option-bg-color-selected: var(--ripio-color-neutral-10);
  --ripio-dropdown-option-border-radius: 8px;
  --ripio-dropdown-option-text-color: var(--ripio-color-neutral-80);
  --ripio-dropdown-option-text-color-selected: var(--ripio-color-neutral-120);
  --ripio-dropdown-option-font-size: 14px;
  --ripio-dropdown-option-line-height: 18px;

  --ripio-dropdown-input-bg-color-disabled: var(--ripio-color-disabled);
  --ripio-dropdown-input-border-radius: 12px;
  --ripio-dropdown-input-border-width: 1px;

  --ripio-dropdown-currency-input-bg-color: var(--light-grey);
  --ripio-dropdown-currency-input-bg-color-focused: var(--lighter-grey);
  --ripio-dropdown-currency-menu-box-shadow: 0px 5px 60px 0px rgba(0, 0, 0, 0.04);
  --ripio-dropdown-currency-menu-box-shadow-scrollable: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow),
    inset 0px -40px 60px -60px rgba(17, 12, 34, 0.6);
  --ripio-dropdown-currency-input-border-radius: 25px;

  /* Card */
  --ripio-card-border-radius-base: 18px;
  --ripio-card-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);
  --ripio-card-bg-color: var(--ripio-color-base);

  /* Card option */
  --ripio-card-option-box-shadow: 0px 5px 60px 0px #0000000a;

  /* Box */
  --ripio-box-bg-color-info: var(--ripio-color-neutral-10);
  --ripio-box-bg-color-warning: var(--ripio-color-neutral-20);
  --ripio-box-border-radius-warning: 18px;
  --ripio-box-border-radius-info: 10px;

  --ripio-border-color-neutral-80: var(--ripio-color-neutral-80);
  --ripio-border-color-neutral-120: var(--ripio-color-neutral-120);

  --ripio-border-radius-card-option: 18px;

  /* Alert */
  --ripio-alert-border-radius-info: 18px;
  --ripio-alert-bg-color-info: var(--ripio-color-primary-light);

  /* Divider */
  --ripio-divider-bg-color: var(--neutral-100);

  /* Toast */
  --ripio-toast-bg-color: var(--ripio-color-neutral-120);
  --ripio-toast-color: var(--ripio-color-neutral);
  --ripio-toast-border-radius: 12px;
}

Usage

The file with the theme can be assembled only with the values that need to be overwritten, the variables that are not overwritten will use the default value displayed in the template above.

Customize the typography

To use a font it is necessary to be able to import it from a static host and then modify the variable that owns font-family. Example:

Font: Monserrat
Host: https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  /* Typography */
  --ripio-font-family: "Montserrat";
}

Default UI theme

Customized UI theme

Customize Buttons

In case we want to modify the styles of the buttons, only variables starting with --ripio-btn modify the buttons. Example: Primary Button

:root {
  /* Button */
  --ripio-btn-bg-color-primary: #787878;
  --ripio-btn-font-size: 14px;
  --ripio-btn-border-radius: 5px;
}

Default UI theme

Customized UI theme

Secondary Button

:root {
  /* Button */
  --ripio-btn-bg-color-secondary: #edbe73;
  --ripio-btn-text-color-secondary: #ffffff;
}

Default UI theme

Customized UI theme

Tertiary Button

:root {
  /* Button */
  --ripio-btn-bg-color-tertiary: #bbcdff;
  --ripio-btn-text-color-tertiary: #034cf5;
}

Default UI theme

Customized UI theme

Overview

OAuth2

Widget

Trading

Transactions

End Users

Onchain Deposits & Withdrawals

Sandbox

Banking as a Service

Webhooks

Yields

On/Off Ramp

Definition

On Ramp

Off Ramp

Requirements

Integration

Generate authentication token

Widget Access

On Ramp

Off Ramp

Parameters

Tracking session parameter

Post-Transaction Redirect Behavior

On Ramp

Off Ramp

1. Automatic Redirection (Partner-Assisted Flow)

2. Manual Redirection (User-Initiated Flow)

Settings

Customize your theme - UI

Usage

Customize the typography

Customize Buttons

Overview

OAuth2

Widget

Trading

Transactions

End Users

Onchain Deposits & Withdrawals

Sandbox

Banking as a Service

Webhooks

Yields

​Definition

​On Ramp

​Off Ramp

​Requirements

​Integration

​Generate authentication token

​Widget Access

​On Ramp

​Off Ramp

​Parameters

​Tracking session parameter

​Post-Transaction Redirect Behavior

​On Ramp

​Off Ramp

1. Automatic Redirection (Partner-Assisted Flow)

2. Manual Redirection (User-Initiated Flow)

​Settings

​Customize your theme - UI

​Usage

​Customize the typography

​Customize Buttons

Definition

On Ramp

Off Ramp

Requirements

Integration

Generate authentication token

Widget Access

On Ramp

Off Ramp

Parameters

Tracking session parameter

Post-Transaction Redirect Behavior

On Ramp

Off Ramp

Settings

Customize your theme - UI

Usage

Customize the typography

Customize Buttons