Transak-partner-sdk NPM

Transak Partner SDK

Welcome to the Transak Partner SDK! This SDK provides tools and utilities to integrate with the Transak platform as a partner. You can use this SDK to easily interact with Transak's APIs and enhance your integration process.

Features

Easy integration with Transak APIs.
Simplified methods for handling transactions, subscriptions, and user data.
Flexible customization to fit your specific use cases.

Installation

You can install the transak-partner-sdk package using npm or yarn:

npm install transak-partner-sdk

yarn add transak-partner-sdk

Usage

Here's a basic example of how to use the SDK to interact with Transak APIs:

import React, { useEffect, useState } from "react";
import { InstantCheckoutSDK } from "transak-partner-sdk"; // Import the InstantCheckoutSDK from the SDK package
import queryString from "query-string";
import { useLocation } from "react-router-dom";
import { globalDefaultConfig } from "./ParamsConfig"; // Import your default configuration

// Function to parse query parameters from the URL
export const parseParams = (queryParamsString) => {
  // Parse the query parameters from the URL
  const parsedQueryParams = queryString.parse(queryParamsString);

  // Merge parsed query parameters with default transakQueryParams
  const mergedQueryParams = {
    ...globalDefaultConfig.transakQueryParams,
    ...parsedQueryParams,
  };

  // If userData is provided in query params, parse it as an object
  if (parsedQueryParams && parsedQueryParams.userData) {
    mergedQueryParams.userDataRaw = JSON.parse(parsedQueryParams.userData);
  }

  // Filter out empty or falsy values from the query parameters
  const filteredQueryParams = Object.fromEntries(
    Object.entries(mergedQueryParams).filter(([_, value]) =>
      Array.isArray(value) ? value.length : value
    )
  );

  return filteredQueryParams;
};


const Main = () => {
  const location = useLocation();
  const [queryParams, setQueryParams] = useState(
    globalDefaultConfig.transakQueryParams
  );

  // Set Query params when the location search changes
  useEffect(() => {
    const data = parseParams(location.search);
    if (Object.keys(data).length) setQueryParams(data);
  }, [location.search]);

  return (
    <div className="flex justify-center mx-auto max-w-7xl mt-40">
      {/* Render the InstantCheckoutSDK component */}
      <InstantCheckoutSDK
        transakQueryParams={queryParams} // Pass the parsed query parameters
        featureFlags={globalDefaultConfig.featureFlags} // Set feature flags
        titleConfig={globalDefaultConfig.titleConfig} // Set title configuration
        buttonConfig={globalDefaultConfig.buttonConfig} // Set button configuration
        globalConfig={globalDefaultConfig.globalConfig} // Set global configuration
      />
    </div>
  );
};

export default Main;