📘 Introduction:

🤖 What is InstantCheckoutSDK?


Your UI, Your Control: Build with `React`, which is highly customizable and runs on your native component. 📱💻
Customization : InstantCheckoutSDK offers best-in-class customizations through `query params`, `configs`, and `feature flags`. All in one place simplified, yet powerful 🎨🧩
Open source: `Fork`, `Modify`, and `Ship` with ease to quickly support `On-Ramp` in your native app. 🚢📱

❓ Why InstantCheckoutSDK?


InstantCheckoutSDK is the perfect solution for seamlessly integrating the Transak Widget inside a specific Ream component. With its white-labelled flows for Exchange, User data, and User address, InstantCheckoutSDK is the ideal choice for a smooth user experience while relying on Transak SDK for KYC, user verification, and payment checkout.

🌐
To seamlessly integrate with iFrame-based solutions instantly, please make use of our Web Integration - Transak SDK

🏁 Quickstart:


🛠️ Setup SDK:	⁉️ Query Params	🚩 Feature Configs
📜 Title Config	🔲 Action Button Config	🎨 Global Theme Config
👩‍💻 Code Sample

🛠️ Setup SDK:

Step 1: Install the InstantCheckoutSDK using NPM or Yarn or manually update to your `package.json

npm install transak-partner-sdk

yarn add transak-partner-sdk

Note: NPM Package - <https://www.npmjs.com/package/transak-partner-sdk>

Step 2: Add the import statement

import { InstantCheckoutSDK } from "transak-partner-sdk";

Step 3: Add InstantCheckoutSDK to your native component as below:

import "./styles.css";
import { InstantCheckoutSDK } from "transak-partner-sdk";

export default function App() {
  return (
    <div className="App">
      <InstantCheckoutSDK />
    </div>
  );
}

Code Sample:

View CodeSandbox Example

⁉ Query Params:


The InstantCheckoutSDK query parameters provide extensive customization options to modify or set default values that control the SDK's UI.

Code sample:

import "./styles.css";
import { InstantCheckoutSDK } from "transak-partner-sdk";

export default function App() {
  const queryParams = {
    network: "ethereum",
    cryptoCurrencyCode: "ETH"
    apiKey: "69feba7f-a1c2-4cfa-a9bd-43072768b0e6",
    fiatCurrency: "INR",
    fiatAmount: 2500
  }

  return (
      <InstantCheckoutSDK transakQueryParams={queryParams}/>
  );
}

❓
To know more about query params, check our docs

🚩 Feature Configs:


Show/hide screens and take control of the entire UI. Currently, the Exchange Screen, User Data Screen and Address Data Screen are skippable.

Code sample:

import "./styles.css";
import { InstantCheckoutSDK } from "transak-partner-sdk";

export default function App() {
  const featureFlags = {
    showExchangeScreen: true,
    showUserDetailsScreen: true,
    showUserAddressScreen: true
  };
  return (
    <InstantCheckoutSDK
      featureFlags={featureFlags}
    />
  );
}

🔢 Screen flows:

📜 Title Config:


Update the title of Exchange Screen, User Details Screen, and User Address Screen as what suits you best 🆒

Code sample:

import "./styles.css";
import { InstantCheckoutSDK } from "transak-partner-sdk";

export default function App() {
  const titleConfig = {
    exchange: "Quick Exchange",
    userDetails: "User Profile",
    userAddress: "User Address",
    success: "Success",
    failure: "Failure",
    processing: "Processing",
  }
  return (
    <InstantCheckoutSDK
      titleConfig= {titleConfig}
    />
  );
}

🔲 Action Button Config:


Customise your action button's text and color with Action Button Configuration for an enhanced user experience.

Code sample:

import "./styles.css";
import { InstantCheckoutSDK } from "transak-partner-sdk";

export default function App() {
  const buttonConfig = {
    titles: {
      exchange: "Submit",
      userDetails: "Complete",
      userAddress: "Verify",
    },
    textStyles: {
      color: "yellow",
    }
  }

  return (
    <InstantCheckoutSDK
      buttonConfig={buttonConfig}
    />
  );
}

🎨 Global Theme Config:


You can customise the CTA primary color and widget background color using the Global Theme Config.

Code sample:

import "./styles.css";
import { InstantCheckoutSDK } from "transak-partner-sdk";

export default function App() {
  const globalConfig = {
    primaryColor: "#4A7B9D", //Eg:  #8B5CF6, #4A7B9D, #1461DB
    bgColor: "#F7F7FF" //Eg: #FFFFFF, #F7F7FF
  };

  return (
    <InstantCheckoutSDK
      globalConfig={globalConfig}
    />
  );
}

📹 Demo Video

Watch Instant Checkout SDK Demo