Skip to main content

​
createCryptoDotComPayment

Creates a Crypto.com payment for purchasing cryptocurrency with fiat. This returns a payment URL that you can display in an iframe within your app or open in a new window.

​
Usage

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);
}

​
Parameters

ParameterTypeDescription
walletAddressstringThe wallet address to receive the purchased crypto.
chainstringThe blockchain (e.g., EVM).
networkIdstringThe network ID (e.g., 1 for Ethereum mainnet, 137 for Polygon).
currencystringThe fiat currency for payment (e.g., USD, EUR).
amountnumberThe amount in fiat currency to spend.
merchantNamestringYour app or merchant name shown to the user.
clientDynamicClient (optional)The Dynamic client instance. Only required when using multiple clients.

​
Returns

Promise<CryptoDotComPaymentResponse> - A promise that resolves to the payment details: 
type CryptoDotComPaymentResponse = {
  paymentUrl?: string; // URL to display in iframe or redirect to
  // ... additional payment details
};

​
Examples

​
Embedded iframe experience

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>;
};

​
Open in new window

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");
  }
};

​
With network selection

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>
  );
};