​
Using @turnkey/sdk-react

Setting up Fiat Onramp with @turnkey/sdk-react using the <Auth/> component is straightforward.

​
.initFiatOnRamp()

The response to initFiatOnRamp({...}) contains an onRampUrl which is used to load the Onramp Widget UI of the selected provider. The URL can be served in a popup, new tab, or an iFrame. 
  const response = await indexedDbClient?.initFiatOnRamp({
    organizationId: session?.organizationId!,
    ...,
  });
1

Initialize the React Provider

import { TurnkeyProvider } from "@turnkey/sdk-react";

const turnkeyConfig = {
  apiBaseUrl: "https://api.turnkey.com",
  defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,
};

<div className="App">
  <TurnkeyProvider config={turnkeyConfig}>
    <YourAppComponent />
  </TurnkeyProvider>
</div>;
2

Login with a Passkey and Create a Session

import { useTurnkey } from "@turnkey/sdk-react";

const { passkeyClient, indexedDbClient } = useTurnkey();

await indexedDbClient.init();
const publicKey = await indexedDbClient.getPublicKey();

await passkeyClient.loginWithPasskey({
  publicKey,
  sessionType: "SESSION_TYPE_READ_WRITE",
  expirationSeconds: 900,
});
3

Coinbase - Init Fiat Onramp Flow

const { turnkey, indexedDbClient } = useTurnkey();

const generateCoinbaseUrl = async () => {
  try {
    const session = await turnkey?.getSession();

    const response = await indexedDbClient?.initFiatOnRamp({
      organizationId: session?.organizationId!,
      onrampProvider: "FIAT_ON_RAMP_PROVIDER_COINBASE",
      walletAddress: ethAddress,
      network: "FIAT_ON_RAMP_BLOCKCHAIN_NETWORK_ETHEREUM",
      cryptoCurrencyCode: "FIAT_ON_RAMP_CRYPTO_CURRENCY_ETH",
      fiatCurrencyCode: "FIAT_ON_RAMP_CURRENCY_USD",
      fiatCurrencyAmount: "10.00",
      paymentMethod: "FIAT_ON_RAMP_PAYMENT_METHOD_CREDIT_DEBIT_CARD",
      countryCode: "US",
      countrySubdivisionCode: "ME",
      sandboxMode: true,
    });

    if (response?.onRampUrl) {
      window.open(
        response.onRampUrl,
        "_blank",
        "popup,width=500,height=700,scrollbars=yes,resizable=yes",
      );
    }
  } catch (error) {
    console.error("Failed to init Coinbase on-ramp:", error);
  }
};
4

MoonPay - Init Fiat Onramp Flow

const { turnkey, indexedDbClient } = useTurnkey();

const generateMoonPayUrl = async () => {
  try {
    const session = await turnkey?.getSession();

    const response = await indexedDbClient?.initFiatOnRamp({
      organizationId: session?.organizationId!,
      onrampProvider: "FIAT_ON_RAMP_PROVIDER_MOONPAY",
      walletAddress: ethAddress,
      network: "FIAT_ON_RAMP_BLOCKCHAIN_NETWORK_ETHEREUM",
      cryptoCurrencyCode: "FIAT_ON_RAMP_CRYPTO_CURRENCY_ETH",
      fiatCurrencyCode: "FIAT_ON_RAMP_CURRENCY_USD",
      fiatCurrencyAmount: "10.00",
      paymentMethod: "FIAT_ON_RAMP_PAYMENT_METHOD_CREDIT_DEBIT_CARD",
      sandboxMode: true,
    });

    if (response?.onRampUrl) {
      window.open(
        response.onRampUrl,
        "_blank",
        "popup,width=500,height=700,scrollbars=yes,resizable=yes",
      );
    }
  } catch (error) {
    console.error("Failed to init MoonPay on-ramp:", error);
  }
};

​
Activity Parameters

See the Init Fiat Onramp Activity API Reference for the complete request and response definitions.