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"
    }
  }
}

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

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

​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

Settings

Customize your theme - UI

Usage

Customize the typography

Customize Buttons