Skip Payment Authorization - Transak SDK

paymentAuthorizationSDK.js

import { useEffect, useState } from "react";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import { Transak } from "@transak/transak-sdk";
import config from "../config";

export default function PaymentAuthorizationTransakSDK() {
  const [isPaymentAuthorized, setPaymentAuthorized] = useState(false);

  useEffect(() => {
    const transakConfig = {
      apiKey: config.apiKeyGlobalStaging,
      environment: Transak.ENVIRONMENTS.STAGING,
      productsAvailed: "BUY",
      containerId: "transakMount",
    };

    const transak = new Transak(transakConfig);

    transak.init();

    Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {
      console.log("Order Successful:", orderData);
      transak.close();
      setPaymentAuthorized(true);
    });

    return () => {
      transak.cleanup();
    };
  }, []);
  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">
          {isPaymentAuthorized ? (
            <Box
              sx={{
                bgcolor: "#DCDCDC",
                height: "500px",
                width: "500px",
                p: "36px",
              }}
              display="flex"
              justifyContent="center"
              alignItems="center"
            >
              <label style={{ fontSize: "18px" }}>
                The payment authorization was successful. The Transak widget has
                been closed. You can now proceed to implement your custom UI and
                keep track of the order status through Webhooks.
              </label>
            </Box>
          ) : (
            <div id="transakMount" />
          )}
        </Stack>
      </Box>
    </Stack>
  );
}