Unified Payment Flow with payWithDynamic

Idea

An implementation that demonstrates Dynamic’s unified payment flow, allowing users to:

Fund transactions using external wallets
Transfer funds from exchange accounts (Coinbase, Kraken)
Purchase crypto through onramp providers (Coinbase, Banxa)
Choose their preferred payment method through a unified interface

Key Components

Dynamic MPC Wallets - Embedded, non-custodial wallets with seamless auth
Unified Payment Interface - Single UI for all payment methods
External Wallet Funding - Direct transfers from connected wallets
Exchange Integration - Coinbase and Kraken account transfers
Onramp Providers - Fiat-to-crypto purchases via Coinbase and Banxa

Configure Dynamic Environment

Create a new environment in the Dynamic dashboard.

Navigate to the Dynamic Dashboard > Developers
Go to “SDK and API Keys” under the Developers section
Copy your Environment ID and create a new API Token - you’ll need these to authenticate your requests to Dynamic’s API

Enable Funding Methods

Before using payWithDynamic, you need to enable the funding methods you want to support:

1. External Wallet Funding

Go to your Dynamic dashboard
Navigate to Funding → External Wallet
Enable Funding with External Wallets

More complete docs on enabling External Wallet Funding can be found here.

2. Exchange Funding

Go to your Dynamic dashboard
Navigate to Funding → Exchanges & Onramps
Enable Coinbase and/or Kraken

3. Onramp Providers

Go to your Dynamic dashboard
Navigate to Funding → Exchanges & Onramps
Enable Coinbase and/or Banxa
Accept terms and conditions for each provider if necessary

More complete docs on enabling Onramps can be found here.

Basic Implementation

Create a simple payment component that uses the usePayWithDynamic hook: You can find more information about the hook here.

components/PaymentForm.tsx

import { usePayWithDynamic, ChainEnum } from "@dynamic-labs/sdk-react-core";
import { useState } from "react";

export const PaymentForm = () => {
  const [amount, setAmount] = useState("");
  const [destination, setDestination] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [result, setResult] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const pay = usePayWithDynamic();

  const handlePayment = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setError(null);
    setResult(null);

    try {
      if (!amount || parseFloat(amount) <= 0) {
        throw new Error("Please provide a valid amount greater than 0");
      }

      if (!destination || !destination.startsWith("0x")) {
        throw new Error("Please provide a valid destination address");
      }

      await pay({
        destinationAddress: destination,
        tokenAmount: parseFloat(amount),
        tokenSymbol: "ETH",
        network: 1, // Ethereum mainnet
        chainName: ChainEnum.EVM,
      });

    } catch (err: any) {
      setError(err.message || "Payment failed");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-4">Send Payment</h2>
      
      <form onSubmit={handlePayment} className="space-y-4">
        <div>
          <label className="block text-sm font-medium mb-2">
            Destination Address
          </label>
          <input
            type="text"
            value={destination}
            onChange={(e) => setDestination(e.target.value)}
            placeholder="0x..."
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            required
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-2">
            Amount (ETH)
          </label>
          <input
            type="number"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            placeholder="0.1"
            step="0.001"
            min="0"
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            required
          />
        </div>

        <button
          type="submit"
          disabled={isLoading}
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isLoading ? "Processing..." : "Send Payment"}
        </button>
      </form>

      {error && (
        <div className="mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
          {error}
        </div>
      )}

      {result && (
        <div className="mt-4 p-3 bg-green-100 border border-green-400 text-green-700 rounded">
          {result}
        </div>
      )}
    </div>
  );
};

How It Works