HTML/Javascript

Onramper Example

Using Vanilla HTML + Javascript

The oreid-js library provides all the help you need to add ORE ID to your Javascript app

The oreid-webpopup adds a pop-up user experience to handle common flows like logging and signing transactions.

Step 1 - Install components

yarn add oreid-js oreid-webpopup

Step 2 - Initialize

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

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

Step 3 - Launch Login

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

Step 4 - Launch OnRamper Flow

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