​
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 user is composed of a concatenation of client_id + “:” + external_ref.
passwordstringLa contraseña del usuario se debe enviar el 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

​
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

Was this page helpful?

Get Access TokenFintech