⚡️ Instant Checkout SDK (Beta)

Suggest Edits

📘 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. 🚢📱

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

{
  "name": "react",  
  "dependencies": {
    ...
    "transak-partner-sdk": "^1.0.12"
  },
  "devDependencies": {
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

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:

⁉ 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}
    />
  );
}

:1234: Screen flows:

Screenshot Usecase
WHEN: showExchangeScreen: true - The user should be able to choose country, enter amount or auto fill them through query params. The quote is calculated based on the fiat and crypto passed as a query param.
WHEN showExchangeScreen: false - This screen is skippable"
WHEN: showUserDetailsScreen: true- The user should be able to enter First Name, Last Name, DOB, Phone Number or auto fill them through query params.
WHEN:showUserDetailsScreen: false- This screen is skippable"
WHEN: showUserAddressScreen: true - The user should be able to select Country, City, State/Province, ZIP code or auto fill them through query params.
WHEN: showUserAddressScreen: false- This screen is skippable"

📜 Title Config:

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

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

Updated 3 months ago