Quickstart: een betaling accepteren

pnpm add @solana/pay@beta @solana/kit

"use client";

import { useEffect, useRef, useState } from "react";
import {
  address,
  createSolanaRpc,
  createSolanaRpcSubscriptions,
  generateKeyPair,
  getAddressFromPublicKey
} from "@solana/kit";
import {
  createQR,
  encodeURL,
  validateTransfer,
  watchReference
} from "@solana/pay";

const MERCHANT_WALLET = address("your-wallet-address");
const USDC_DEVNET = address("4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU");
const AMOUNT = 1;

const rpc = createSolanaRpc("https://api.devnet.solana.com");
const rpcSubscriptions = createSolanaRpcSubscriptions(
  "wss://api.devnet.solana.com"
);

export function Checkout() {
  const qrRef = useRef<HTMLDivElement>(null);
  const [signature, setSignature] = useState<string | null>(null);

  useEffect(() => {
    const abortController = new AbortController();

    async function startPayment() {
      const keyPair = await generateKeyPair();
      const reference = await getAddressFromPublicKey(keyPair.publicKey);

      const url = encodeURL({
        recipient: MERCHANT_WALLET,
        amount: AMOUNT,
        splToken: USDC_DEVNET,
        reference,
        label: "My Store",
        message: "Order #1001"
      });

      if (abortController.signal.aborted) return;

      if (qrRef.current) {
        qrRef.current.innerHTML = "";
        createQR(url, 300).append(qrRef.current);
      }

      const result = await watchReference(rpcSubscriptions, reference, {
        abortSignal: abortController.signal
      });
      if (result.err) throw new Error("Payment transaction failed");

      await validateTransfer(rpc, result.signature, {
        recipient: MERCHANT_WALLET,
        amount: AMOUNT,
        splToken: USDC_DEVNET,
        reference
      });
      setSignature(result.signature);
    }

    startPayment().catch((error) => {
      if (!abortController.signal.aborted) console.error(error);
    });

    return () => abortController.abort();
  }, []);

  if (signature) return <p>Payment confirmed: {signature}</p>;
  return <div ref={qrRef} />;
}