Docs
Search
⌃K

Reference

Props

fetchSessionToken

A function that is used to fetch session token that is generated from the API that is used to wrap the ratio /v1/clients/session (documentation here)
This is an async function.
The Ratio API uses client authentication which requires a client_id and client_secret. It is highly recommended to implement this call in a secure API backend. This will prevent the need of shipping the clientSecret with the client application.
const fetchSessionToken = async () => {
try {
let sessionTokenResponse = await fetch(
'https://your.api.com/clients/session',
{
method: 'POST',
body: JSON.stringify({
signingAddress: walletAddress,
depositAddress: walletAddress,
signingNetwork: walletNetwork,
}),
}
);
​
let data = await sessionTokenResponse.json();
return data.id;
} catch (e) {
console.error(e);
}
return null;
};
<RatioButton
fetchSessionToken={async () => {
return await fetchSessionToken();
}}/>
TYPE
REQUIRED
function
Yes
​

signingCallback

Function that accepts a string which contains the challenge that is returned from the Ratio /v1/auth/cryptoWallet:start call (documentation here)
This is an async function that should return a promise. This will allow such asynchronous activities such as a biometrics check to happen during signing.
The return value from this function is of type RatioKitSigningResult. See the Models section below.
Example using Web3.js library
<RatioButton
signingCallback={async (challenge: string) => {
let sign = web3.eth.accounts.sign(challenge, privateKey);
​
return Promise.resolve(sign.signature);
}}/>
TYPE
REQUIRED
function
Yes
​

text

An optional string that allows you to change the text that is displayed on the RatioButton
Default value: "Buy Crypto"
TYPE
REQUIRED
string
No

loadingText

An option string that allows you to change the text that is displayed when the RatioButton is loading during log in
Default value: "Connecting..."
TYPE
REQUIRED
string
No

Models

RatioUser

export interface RatioUser {
id: string;
createTime: string;
updateTime: string;
firstName: string;
middleName: string;
lastName: string;
email: string;
country: string;
phone: string;
nationality: string;
occupation: string;
kyc: Kyc;
connectedBankAccounts: BankAccount[];
}

OrderStatus

export interface OrderStatus {
data: {userId: string, activity: ActivityItem};
status: 'success' | 'failure';
error: OrderError;
}

OrderError

export interface OrderError {
errorId: string;
message: string;
statusCode: number;
}

ActivityItem

export interface ActivityItem {
id: string;
createTime: string;
updateTime: string;
fiat: ActivityItemFiat;
crypto: ActivityItemCrypto;
metadata: any;
}

ActivityItemFiat

export interface ActivityItemFiat {
status: ActivityItemStatus;
currency: FiatCurrency;
amount: string;
direction: Direction;
fundingMethod: FundingMethod;
bankAccount: BankAccount;
}

ActivityItemStatus

export enum ActivityItemStatus {
PENDING = 'PENDING',
COMPLETED = 'COMPLETED',
FAILED = 'FAILED'
}

FiatCurrency

export enum FiatCurrency {
USD = 'USD'
}

Direction

export enum Direction {
CREDIT = 'CREDIT',
DEBIT = 'DEBIT'
}

FundingMethod

export enum FundingMethod {
ACH_ORIGINATED_STANDARD = 'ACH_ORIGINATED_STANDARD',
ACH_ORIGINATED_INSTANT = 'ACH_ORIGINATED_INSTANT',
ACH_RECEIVED = 'ACH_RECEIVED'
}

BankAccount

export interface BankAccount {
id: string;
createTime: string;
updateTime: string;
name: string;
mask: string;
linkStatus: LinkStatus;
verificationStatus: VerificationStatus;
}

LinkStatus

export enum LinkStatus {
INACTIVE = 'INACTIVE',
ACTIVE = 'ACTIVE',
LOGIN_REQUIRED = 'LOGIN_REQUIRED'
}

VerificationStatus

export enum VerificationStatus {
IN_REVIEW = 'IN_REVIEW',
APPROVED = 'APPROVED',
DECLINED = 'DECLINED'
}

ActivityItemCrypto

export interface ActivityItemCrypto {
status: ActivityItemStatus;
currency: string;
wallet: Wallet;
direction: Direction;
amount: string;
price: string;
fee: string;
transactionHash: string;
}

Wallet

export interface Wallet {
id: string;
address: string;
createTime: string;
name: string;
network: string;
updateTime: string;
}
Previous
Example
Next
Release History
Last modified 2mo ago