Transak Sandbox

nftCheckoutCollections.js

import React, { useState } from "react";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import { Transak } from "@transak/transak-sdk";
import Pusher from "pusher-js";
import envConfig from "../config";

let pusher = new Pusher("1d9ffac87de599c61283", { cluster: "ap2" });

export default function NFTCheckoutCollections() {
  const [isTransakInitialized, setTransakInitialized] = useState(false);

  const initializeTransak = () => {
    const transakConfig = {
      apiKey: envConfig.apiKeyStagingNFTCheckout,
      environment: Transak.ENVIRONMENTS.STAGING,
      themeColor: "000000",
      defaultPaymentMethod: "credit_debit_card",
      walletAddress: "0x908749aDd4B3b19096d7591fA60388eaaB8A9A52",
      exchangeScreenTitle: "Deposit Funds",
      disableWalletAddressForm: true,
      estimatedGasLimit: 70000,
      tokenData: [
        {
          collectionAddress: "0xc491a4a3601e9923366823523efe29415f6430c3",
          tokenID: ["0"],
          marketplace: "opensea",
          normalizeRoyalties: true,
          nftName: "Fight Club",
          imageURL:
            "https://assets.transak.com/images/general/transak-test-nft.png",
        },
      ],
      isNFT: true,
      contractId: "63306038308c667bb8755b77",
    };

    const transak = new Transak(transakConfig);

    transak.init();

    const subscribeToWebsockets = (orderId) => {
      let channel = pusher.subscribe(orderId);

      // Receive updates of all the events
      pusher.bind_global((eventId, orderData) => {
        console.log(`websocket Event: ${eventId} with order data:`, orderData);
      });

      // Receive updates of a specific event
      channel.bind("ORDER_COMPLETED", (orderData) => {
        console.log("ORDER COMPLETED websocket event", orderData);
      });

      channel.bind("ORDER_FAILED", (orderData) => {
        console.log("ORDER FAILED websocket event", orderData);
      });
    };

    Transak.on(Transak.EVENTS.TRANSAK_ORDER_CREATED, (orderData) => {
      console.log("callback transak order created", orderData);
      const eventData = orderData;

      const orderId = eventData.status?.id;

      if (!orderId) {
        return;
      }

      subscribeToWebsockets(orderId);
    });

    setTransakInitialized(true);
  };

  Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
    setTransakInitialized(false);
  });

  return (
    <Stack direction="column" alignItems="center" sx={{ p: "4px" }}>
      <Box
        sx={{
          width: "100%",
          minHeight: "100px",
          p: "16px",
          border: "1px dashed grey",
        }}
      >
        <Stack direction="column" justifyContent="center" alignItems="center">
          <div
            style={{
              height: "400px",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              flexDirection: "column",
            }}
          >
            <Button variant="contained" onClick={initializeTransak}>
              Initialize NFT Checkout
            </Button>
          </div>
        </Stack>
      </Box>
    </Stack>
  );
}