createCryptoDotComPayment

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

Parameter	Type	Description
walletAddress	string	The wallet address to receive the purchased crypto.
chain	string	The blockchain (e.g., EVM).
networkId	string	The network ID (e.g., 1 for Ethereum mainnet, 137 for Polygon).
currency	string	The fiat currency for payment (e.g., USD, EUR).
amount	number	The amount in fiat currency to spend.
merchantName	string	Your app or merchant name shown to the user.
client	DynamicClient (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>
  );
};

Related functions

• getCoinbaseBuyUrl - Get Coinbase buy URL (redirect flow)
• createCoinbaseOnrampOrder - Create Coinbase order (embedded flow)