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. π’π±
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 .
π
Step 1 : Install the InstantCheckoutSDK using NPM or Yarn or manually update to your `package.json
NPM Yarn 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
Text
import { InstantCheckoutSDK } from "transak-partner-sdk";
Step 3: Add InstantCheckoutSDK to your native component as below:
App.js
import "./styles.css";
import { InstantCheckoutSDK } from "transak-partner-sdk";
export default function App() {
return (
<div className="App">
<InstantCheckoutSDK />
</div>
);
}
View CodeSandbox Example
The InstantCheckoutSDK query parameters provide extensive customization options to modify or set default values that control the SDK's UI.
App.js
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}/>
);
}
β
Show/hide screens and take control of the entire UI. Currently, the Exchange Screen , User Data Screen and Address Data Screen are skippable.
App.js
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}
/>
);
}
Update the title of Exchange Screen , User Details Screen , and User Address Screen as what suits you best π
App.js
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}
/>
);
}
Customise your action button's text and color with Action Button Configuration for an enhanced user experience.
App.js
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}
/>
);
}
You can customise the CTA primary color and widget background color using the Global Theme Config.
App.js
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}
/>
);
}
Watch Instant Checkout SDK Demo