import { createCryptoDotComPayment } from "@dynamic-labs-sdk/client";

const payment = await createCryptoDotComPayment({
  walletAddress: "0x1234...",
  chain: "EVM",
  networkId: "1", // Ethereum mainnet
  currency: "USD",
  amount: 100,
  merchantName: "My App",
});

// Display in an iframe
if (payment.paymentUrl) {
  const iframe = document.createElement("iframe");
  iframe.src = payment.paymentUrl;
  document.body.appendChild(iframe);
}

type CryptoDotComPaymentResponse = {
  paymentUrl?: string; // URL to display in iframe or redirect to
  // ... additional payment details
};

import { useState } from "react";
import { createCryptoDotComPayment } from "@dynamic-labs-sdk/client";

const CryptoComPayment = ({ walletAddress }) => {
  const [paymentUrl, setPaymentUrl] = useState(null);

  const handleBuy = async () => {
    const payment = await createCryptoDotComPayment({
      walletAddress,
      chain: "EVM",
      networkId: "137", // Polygon
      currency: "USD",
      amount: 50,
      merchantName: "My DApp",
    });

    if (payment.paymentUrl) {
      setPaymentUrl(payment.paymentUrl);
    }
  };

  if (paymentUrl) {
    return (
      <div>
        <iframe
          src={paymentUrl}
          width="100%"
          height="600px"
          allow="payment"
          title="Crypto.com Payment"
        />
        <button onClick={() => setPaymentUrl(null)}>Cancel</button>
      </div>
    );
  }

  return <button onClick={handleBuy}>Buy with Crypto.com</button>;
};

import { createCryptoDotComPayment } from "@dynamic-labs-sdk/client";

const openCryptoComPayment = async (walletAddress) => {
  const payment = await createCryptoDotComPayment({
    walletAddress,
    chain: "EVM",
    networkId: "1",
    currency: "USD",
    amount: 100,
    merchantName: "My App",
  });

  if (payment.paymentUrl) {
    window.open(payment.paymentUrl, "_blank", "width=500,height=700");
  }
};

import { createCryptoDotComPayment } from "@dynamic-labs-sdk/client";

const SUPPORTED_NETWORKS = [
  { id: "1", name: "Ethereum" },
  { id: "137", name: "Polygon" },
  { id: "42161", name: "Arbitrum" },
];

const NetworkSelector = ({ walletAddress, onPaymentCreated }) => {
  const handleSelect = async (networkId) => {
    const payment = await createCryptoDotComPayment({
      walletAddress,
      chain: "EVM",
      networkId,
      currency: "USD",
      amount: 50,
      merchantName: "My App",
    });

    onPaymentCreated(payment);
  };

  return (
    <div>
      <p>Select a network:</p>
      {SUPPORTED_NETWORKS.map((network) => (
        <button key={network.id} onClick={() => handleSelect(network.id)}>
          {network.name}
        </button>
      ))}
    </div>
  );
};