Onramper

Enable Token Purchases via Fiat Currency

Launching the ORE ID Onramper Flow

Our recommended method for activating the Onramper flow is to leverage the OREID's Javascript SDK. This includes both the OREID-js and oreid-webpopup packages. You may install both of these using your package manager of choice.

yarn add oreid-js oreid-webpopup
npm install oreid-js oreid-webpopup

Initialize OREID

Before we can call the popup, we'll need to initialize the OREID connection.

import { OreId } from "oreid-js";
import { WebPopup } from "oreid-webpopup";

const oreId = new OreId({ appId, plugins:{ popup: WebPopup() }});
oreId.init().then( 
  // oreid is ready 
)

User Login

Next, the user will need to be logged into their OREID account. This can also be done using the OREID Web popup.

<script>
  const onClick = () => {
     oreId.popup.auth({ provider: 'google' })
       .then(data => {console.log(data)})
       .catch(error => {console.log(error.message)});
  };
  
</script>
<button onClick="onClick()">Auth</button>

Activate Web Popup

Finally, you can activate Onramper using the buy function of the popup. Here, you'll also be able to enter parameters that will dictate which currencies and networks are available to the user.

<script>
  const onClick = () => {
    const userChainAccounts = oreId.auth.user.data.chainAccounts;
    // Select the currency account that you would like to default to in the OnRamper flow
    // The user can select a different account using a dropdown menu if they wish
    const ethAccount = userChainAccounts.find(ca => ca.chainNetwork === 'eth_main')

    // These are the properties required to launch the popup
    const onramperBuy = {
      chainAccount: ethAccount.chainAccount,
      chainNetwork: ethAccount.chainNetwork,
    };

    // Launch the OnRamper flow
    oreId.popup.buy({ onramperBuy })
      .catch( onError );

  }
</script>

<button onClick="onClick()">Buy Crypto</button>

Parameters

The params to use the buy function of OREID-JS are as follows:

chainAccount

The blockchain account that will receive the purchased tokens. This provided account must belong to the user that is currently logged in. If it doesn't, the popup will fail to active and the function will return an error.

This is a required field.

chainNetwork

The blockchain network that the tokens will be purchased on. The available options can be found on the Chain Mappings page.

This is a required field.

The selection must be a network that the app currently has access to or the popup will fail to activate. If additional access rights are needed, please contact your account manager.

limitToSymbols

An optional array of token symbols that the user can select from. If this is not provided, the user will be able to select from all supported tokens.

The allowed values for limitToSymbols are NOT the same as those in the onRamper docs - they are mapped. These mappings can be found on the Chain Mappings page.

If the transaction is properly configured, you should see the Onramper flow initiate with the desired network and currency automatically selected.

Do not complete the buy action if you are running on a test chain. The purchase will be mapped to the main chain. You will not be able to recover the tokens

Onramper Tokens

The Onramper integration supports the purchase of the following tokens:

PreviousWeb3 ModalNextChain Mappings

Last updated