Transak Sandbox

nftCheckoutCustom.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 NFTCheckoutCustom() {
  const [isTransakInitialized, setTransakInitialized] = useState(false);

  const initializeTransak = () => {
    const calldata =
      "0xc2db2c4200000000000000000000000000000000000000000000000000000000ee6b2812";

    if (!calldata) return;

    const settings = {
      apiKey: envConfig.apiKeyStagingNFTCheckout,
      environment: Transak.ENVIRONMENTS.STAGING,
      themeColor: "000000",
      defaultPaymentMethod: "credit_debit_card",
      walletAddress: "0x908749aDd4B3b19096d7591fA60388eaaB8A9A52",
      exchangeScreenTitle: "Buy NFT",
      disableWalletAddressForm: true,
      estimatedGasLimit: 70000,
      calldata,
      network: "vechain",
      cryptoCurrencyCode: "VET",
      nftData: [
        {
          imageURL:
            "https://pokemon-nfts.s3.ap-southeast-2.amazonaws.com/images/1.png",
          nftName: "Pokemon Metadata Legends",
          collectionAddress: "0x8a20e9e8e736643161ce6a2fe8dd8dd62050cd1e",
          tokenID: ["6"],
          price: [15],
          quantity: 1,
          nftType: "ERC721",
        },
      ],
      isNFT: true,
      contractId: "65ba3f332c9ed19d88a2c6db",
    };

    const transak = new Transak(settings);

    transak.init();

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

      pusher.bind_global((eventId, orderData) => {
        console.log(`websocket Event: ${eventId} with order data:`, orderData);
      });

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

      channel.bind("ORDER_FAILED", async (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>
  );
}