Fiat Onramp

This is a guide to implementing Fiat Onramps within a Turnkey-powered application.

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.