​
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:

ParameterTypeDescription
usernamestringThe username is composed of a concatenation of client_id + “:” + external_ref.
passwordstringThe 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"
}

​
Widget Access

​
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.

ParameterTypeDescription
_addrstring (Optional)Set address to prefill onramp wallet which it won’t be editable. Ex: 0x646eE511616A20a321A1cB72DADCB04C0485b97e
_netstringSet network to pre select chain. It must match the networks available to the partner. Ex: ETHEREUM
_amountstringSet amount to prefill amount of fiat to onramp. Ex: 1000 or 4321.35
_cryptostring (Optional)Set crypto currency which it won’t be editable. It must match the cryptos available to the partner. Ex: USDT
_tracking_sessionstring (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:

ParameterDescription
external_refSession token generated by the partner.
actionOperation type, always onramp in this case.
crypto_amountAmount of cryptocurrency the user received.
tokenCryptocurrency selected by the user (e.g., UXD).
networkBlockchain network used for the crypto transfer.
deposit_addressUser’s wallet address where crypto was sent.
fiat_amountAmount of fiat used in the transaction.
fiat_currencyFiat currency used by the user (e.g., ARS).
feesTotal fees applied to the transaction (e.g., platform, network, etc.).
session_idOptional session identifier if sent using _tracking_session.
country_codeCountry 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:

​
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:

ParameterDescription
external_refSession token generated by the partner.
actionOperation type, always offramp in this case.
crypto_amountAmount of cryptocurrency being sold.
tokenSelected cryptocurrency (e.g., UXD).
networkSelected blockchain network (e.g., ETHEREUM, ETHEREUM_SEPOLIA).
deposit_addressDeposit address where the crypto must be sent.
fiat_currencyFiat currency the user will receive (e.g., ARS).
session_idOptional session identifier if provided using _tracking_session.
country_codeCountry 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):

​
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