Solana Pay: Alles, was du wissen musst

Solana Pay: So funktioniert es

Solana Pay bietet Nutzern eine andere Möglichkeit, mit Smart Contracts zu interagieren und Token zu übertragen. Statt eine Wallet verbinden zu müssen, können sie eine Transaktion über einen Link anzeigen und signieren. Damit entfällt die Hürde, zuerst die Wallet verbinden zu müssen. Dies funktioniert sowohl für einfache Zahlungen als auch für Interaktionen mit Apps und unterstützt damit Transaktions- und Übertragungsanfragen.

Die wichtigste Funktion von Solana Pay ist die Übertragungsanfrage. Dabei handelt es sich um eine nicht interaktive Anfrage zur Übertragung von SOL oder SPL-Token. Beachte, dass nicht alle Solana-Wallets dieses Format akzeptieren. Die meisten gängigen Wallets unterstützen es jedoch, darunter Phantom, Solflare und Glow. So sieht die URL einer Solana-Pay-Übertragungsanfrage aus:

solana:<recipient>?amount=<amount>&spl-token=<spl-token>&reference=<reference>&label=<label>&message=<message>&memo=<memo>

Eine Wallet verwendet die Parameter in der URL, um direkt eine Transaktion zu erstellen. In diesem Leitfaden konzentrieren wir uns auf Übertragungsanfragen. Beachte jedoch, dass sich fast jede Solana-Transaktion in eine gültige Solana-Pay-URL umwandeln lässt.

Parameter

Sehen wir uns nun die einzelnen Parameter an:

Empfänger:

Dies ist der öffentliche Schlüssel der Person, an die du SOL sendest. Bei Übertragungen von SPL-Token gibst du den Token-Typ im Feld spl-token an. Die Wallet ermittelt anhand dieser Informationen das tatsächliche Konto für die Übertragung.

Betrag

Die Anzahl der SOL oder Token, die du sendest. Ist der Betrag kleiner als 1, muss vor dem Dezimaltrennzeichen eine 0 stehen. Wenn kein Betrag angegeben ist, fordert dich die Wallet zur Eingabe auf. Bei einer SOL-Übertragung wird der Betrag in SOL und nicht in Lamports angegeben.

SPL-Token

Dieses optionale Feld enthält die Mint-Adresse für einen bestimmten Typ von SPL-Token-Konto. Wenn du es nicht angibst, ist die Transaktion eine normale SOL-Übertragung.

Referenz

Eine eindeutige Kennung, die in der Transaktion codiert ist. Sie hilft dabei, bestimmte Transaktionen zu finden und ihre Ergebnisse zu überprüfen.

Bezeichnung

Eine kurze Beschreibung der Herkunft der Übertragungsanfrage. Das kann ein Shop oder eine App sein. Wallets zeigen diese Angabe an, um Nutzern Informationen zur Transaktion zu geben.

Nachricht

Eine codierte URL, die Details zum Grund der Übertragung enthält. Dazu können dein Einkauf, eine Bestell-ID oder eine kurze Notiz gehören. Wallets verwenden diese Informationen ebenfalls, um Nutzern mehr Kontext zu geben.

Memo

Eine Notiz, die in der Zahlungstransaktion enthalten ist. Sie sollte keine privaten oder vertraulichen Informationen enthalten, da sie Onchain gespeichert wird.

Diese Angaben geben dir die volle Kontrolle über deine Transaktion und machen die Interaktion zwischen deiner Wallet und dem Empfänger unkompliziert. Apps sollten die Transaktion aus Sicherheitsgründen erst verarbeiten, nachdem sie Onchain bestätigt wurde.

Solana Pay: Beispiel-URLs

0,5 SOL senden:

solana:CckxW6C1CjsxYcXSiDbk7NYfPLhfqAm3kSB5LEZunnSE?amount=0.5&label=Amazon&message=Thanks%20for%20shopping%20at%20Amazon&memo=ID321

5 USDC senden:

solana:CckxW6C1CjsxYcXSiDbk7NYfPLhfqAm3kSB5LEZunnSE?amount=5&spl-token=EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v

Solana Pay: Implementierung mit Next.js

Was werden wir entwickeln? Am Ende dieses Tutorials hast du eine Web-App, die aus den Eingaben der Nutzer – einer Wallet-Adresse und einem SOL-Betrag – einen Solana-Pay-QR-Code erstellt. Die App zeigt außerdem den Zahlungsstatus an, indem sie den Transaktionsstatus auf der Blockchain prüft.

Voraussetzungen

• Node.js muss auf deinem Rechner installiert sein
• Du solltest React und TypeScript gut verstehen.
• Du benötigst eine Solana-Wallet, um Guthaben zu senden und zu empfangen.
• Für alle Onchain-Vorgänge benötigst du außerdem einen Helius API-Schlüssel. Im Entwicklerportal erhältst du mit nur einer Wallet kostenlos einen Helius API-Schlüssel.

Schritte

Führe diese Schritte aus, um Solana Pay mit Next.js zu verwenden.

Next.js-App erstellen

Stelle zunächst sicher, dass Node installiert ist, und erstelle dann die Next.js-App. Gib im Terminal Folgendes ein:

npx create-next-app@latest sol-pay-app

‍Anschließend werden dir einige Fragen gestellt. Wähle diese Optionen aus:

Nach der Erstellung kannst du mit folgendem Befehl in das Verzeichnis wechseln:

cd sol-pay-app

Im Verzeichnis kannst du die App mit folgendem Befehl starten:

npm run dev

Öffne http://localhost:3000/, um deine App anzuzeigen.

Pakete installieren

Diese App benötigt zwei Pakete: Solana web3.js und Solana Pay. Außerdem verwenden wir das Paket „react-qr-code“, um QR-Code-Versionen der Transaktionslinks zu erstellen.

Führe folgenden Befehl aus, um diese Pakete zu installieren:

npm install @solana/pay @solana/web3.js bignumber.js react-qr-code --save

Frontend erstellen

Erstelle ein Frontend, das den Solana-Pay-QR-Code anzeigt und Änderungen an der Adresse des SOL-Empfängers sowie am SOL-Betrag erlaubt. Aus Sicherheitsgründen solltest du die gesamte Logik im Backend ausführen. Das gilt insbesondere für das Festlegen von Beträgen und Empfängern.

Der Einfachheit halber führen wir die App-Logik hier jedoch ebenfalls im Frontend aus.

1. Navigiere zum Verzeichnis pages und öffne die Datei index.tsx. Diese Datei stellt deine Startseite dar. Ersetze den vorhandenen Code durch Folgendes:

export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="mb-6 text-3xl font-bold text-orange-700">
        Helius Solana Pay Demo
      </h1>
    </div>
  );
}

2. Füge die Importe oben auf der Seite ein.

// imports
import {Cluster,clusterApiUrl,Connection,PublicKey,Keypair} from "@solana/web3.js";
import { encodeURL, createQR,findReference, FindReferenceError, validateTransfer } from "@solana/pay";
import BigNumber from "bignumber.js";
import { useState } from "react";
import QRCode from "react-qr-code";

3. Erstelle eine Variable für deine Helius RPC-URL. Wenn du diese App bereitstellen möchtest, solltest du eine ENV-Datei oder einen Proxy verwenden, um deinen API-Schlüssel zu verbergen.

// get a free Helius RPC at helius.dev
 const RPC="https://rpc.helius.xyz/?api-key="!

4. Erstelle mit deiner Helius RPC-URL ein Solana-Connection-Objekt:

console.log('Connecting to the Solana network\n');
const connection = new Connection(RPC, 'confirmed');

5. Als Nächstes deklarieren und initialisieren wir die benötigten Variablen. Dazu gehören alle Variablen, die für die Solana-Pay-URL erforderlich sind. Du kannst diese Variablen innerhalb der Funktion Home() erstellen.

// URL Variables
  const [address, setAddress] = useState("");
  const [recipient, setRecipient] = useState(
    new PublicKey("CckxW6C1CjsxYcXSiDbk7NYfPLhfqAm3kSB5LEZunnSE"));
  const [amount, setAmount] = useState(new BigNumber(1));
  const [message, setMessage] = useState("Helius Demo Order");
  const reference = new Keypair().publicKey;
  const label = "Helius Super Store";
  const memo = "Helius#4098";

  // for the QR code
  const [qrCodeValue, setQrCodeValue] = useState('');
  const [paymentStatus, setPaymentStatus] = useState('');

6. Als Nächstes müssen wir eine Funktion zum Erstellen der Zahlung schreiben. Diese Funktion übernimmt die Variablen aus den Eingabefeldern und erstellt mit der Methode encodedURL eine codierte Solana-Pay-URL. Anschließend wandeln wir das URL-Objekt in einen String um und speichern ihn, damit wir später den QR-Code anzeigen können. Füge unterhalb der Variablen folgenden Code ein:

async function createPayment() {
    console.log("Creating a payment URL \n");
    setRecipient(new PublicKey(address));
    const url = encodeURL({
      recipient,
      amount,
      reference,
      label,
      message,
      memo,
    });

    setQrCodeValue(url.toString()); // convert URL object to string
    checkPayment();
  }

7. Nach dem Erstellen der Zahlung zeigen wir dem Nutzer den QR-Code an. Er kann ihn scannen und die Transaktion ausführen. Um zu prüfen, ob die Transaktion stattgefunden hat und erfolgreich war, müssen wir eine Funktion zur Überprüfung der Onchain-Zahlungstransaktion erstellen. In der obigen Funktion createPayment siehst du, dass wir diese Funktion direkt nach dem Erstellen der Transaktion aufrufen.

async function checkPayment() {
    // update payment status
    setPaymentStatus('pending');

		// search for transaction

		// validate transaction
}

Diese Funktion besteht aus zwei Teilen: der Suche nach der bestätigten Transaktion und ihrer Validierung.

Da der Nutzer auf einem separaten Gerät mit der Transaktion interagiert, können wir nicht genau wissen, wann sie stattgefunden hat. Stattdessen prüfen wir wiederholt, ob eine Transaktion mit der passenden Referenz ausgeführt wurde und welchen Status sie hat. Dafür verwenden wir die Methode findReference von Solana Pay.

// search for transaction
console.log('Searching for the payment\n');
    let signatureInfo;
  
    const {signature} = await new Promise((resolve, reject) => {
      
        const interval = setInterval(async () => {
            console.count('Checking for transaction...'+reference);
            try {
                signatureInfo = await findReference(connection, reference, { finality: 'confirmed' });
                console.log('\n Signature: ', signatureInfo.signature,signatureInfo);
                clearInterval(interval);
                resolve(signatureInfo);
            } catch (error: any) {
                if (!(error instanceof FindReferenceError)) {
                    console.error(error);
                    clearInterval(interval);
                    reject(error);
                }
            }
        }, 250);
    });
	// Update payment status
  setPaymentStatus('confirmed');

Sobald die Transaktion gefunden wurde, müssen wir sicherstellen, dass sie korrekt ausgeführt wurde.

Dazu prüfen wir, ob der richtige Empfänger die Token erhalten hat und ob die richtige Anzahl an Token gesendet wurde. Dafür verwenden wir die Methode validateTransfer von Solana Pay:

//validate transaction
    console.log('Validating the payment\n');
    try {
      await validateTransfer(connection, signature, { recipient: recipient, amount });

      // Update payment status
      setPaymentStatus('validated');
      console.log('Payment validated');
      return true;
      
  } catch (error) {
      console.error('Payment failed', error);
      return false;
  }

8. Im letzten Schritt fügen wir TSX hinzu, um die Benutzeroberfläche einzurichten. Wir verwenden Tailwind, um die Elemente zu gestalten. Die Benutzeroberfläche umfasst eine Überschrift, zwei Eingabefelder für die Empfängeradresse und den SOL-Betrag, einen Button sowie einen Solana-Pay-QR-Code. Nach erfolgreicher Validierung der Zahlung wird der Solana-Pay-QR-Code durch den Text „Zahlung validiert“ ersetzt. Der Button ruft die Methode createPayment auf.

//validate transaction
return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="mb-6 text-3xl font-bold text-orange-700">
        Helius Solana Pay Demo
      </h1>
      <div className="w-full max-w-md p-6 mx-auto bg-white rounded-xl shadow-md">
        <div className="mb-4">
          <label className="block mb-2 text-sm font-medium text-gray-700">
            Address:
          </label>
          <input
            type="text"
            onChange={(e) => setAddress(e.target.value)}
            className="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
          />
        </div>
        <div className="mb-4">
          <label className="block mb-2 text-sm font-medium text-gray-700">
            Amount:
          </label>
          <input
            type="number"
            onChange={(e) => setAmount(new BigNumber(e.target.value))}
            className="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
          />
        </div>
        <div className="flex justify-center items-center">
        <button
          className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
          onClick={createPayment}
        >
          Create QR Code
        </button>
        </div>
        
        <div>
        {paymentStatus === 'validated' ? <p className="mt-4 text-green-500 text-center">Payment Validated</p> : <div className="flex justify-center mt-4">
          {qrCodeValue && }
        </div>}
      </div>
      </div>
      
    </div>
  );

‍Nachdem du alle Schritte abgeschlossen hast, sollte deine App so aussehen und funktionieren:

Solana Pay: Nahtlose Erlebnisse schaffen

Ob du eine Zahlung ausführst oder eine Transaktion einrichtest: Das Codierungssystem von Solana Pay bietet Nutzern und Apps ein nahtloses Erlebnis. Dieser Leitfaden soll dir helfen, Solana Pay zu verstehen und zu implementieren. So kannst du reibungsloser und effizienter mit der Solana-Blockchain interagieren. Wenn du Unterstützung benötigst, tritt dem Helius Discord bei oder kontaktiere uns auf Twitter.

• Den vollständigen Code findest du in der Datei index.tsx
• Erfahre mehr über Solana Pay
• Öffne die Dokumentation zu Solana Pay

‍

‍

‍