Integration von USDC-Zahlungen mit Wagmi und programmierbaren Wallets

In der sich schnell entwickelnden Welt des E-Commerce ist die Bereitstellung eines nahtlosen Zahlungserlebnisses für Händler und Kunden von entscheidender Bedeutung. Laut Circle kann die Integration von USD Coin (USDC)-Zahlungen eine weltweit zugängliche alternative Zahlungsmethode für Online-Shops bieten und den Cashflow durch nahezu sofortige Abwicklung beschleunigen.

Wie es funktioniert

Wenn ein Kunde eine Zahlung initiiert, verbindet er sein Wallet und sendet USDC direkt an eine Wallet-Adresse, die speziell für das Unternehmen mithilfe von Programmable Wallets erstellt wurde. Dieses Wallet wird automatisch über ein Skript generiert, sodass jede Transaktion sicher und organisiert ist.

Schrittweise Integration

Schritt 1: Erstellen Sie ein neues Wagmi-Projekt

Erstellen Sie zunächst das Front-End, indem Sie mit TypeScript ein neues Wagmi-Projekt erstellen. Öffnen Sie Ihr Terminal und führen Sie den Befehl aus:

npm create wagmi@latest

Dadurch wird ein neues Wagmi-Projekt mit den erforderlichen Konfigurationen erstellt.

Schritt 2: Erforderliche Abhängigkeiten installieren

Navigieren Sie zu Ihrem Projektverzeichnis und installieren Sie die erforderlichen Abhängigkeiten, indem Sie Folgendes ausführen:

npm install

Schritt 3: Konfigurieren Sie Ihre Projektdateien

Richten Sie die erforderlichen Dateien in Ihrer Projektordnerstruktur ein. Erstellen Sie zunächst einen Ordner „config“ im übergeordneten Verzeichnis und verschieben und ändern Sie dann die Datei „wagmi.ts“ entsprechend.

Schritt 4: Komponenten erstellen

Erstellen Sie in Ihrem Projektverzeichnis einen Komponentenordner und fügen Sie die folgenden Dateien hinzu:

• PayButton.tsx: Dadurch wird die Funktionalität der Zahlungsschaltfläche übernommen.
• Produktkarte.tsx: Dadurch werden die Produktdetails angezeigt.

Schritt 5: Erstellen Sie die Landingpage

Erstellen Sie eine neue Datei mit dem Namen „page.tsx“ im Verzeichnis „src/pages“, um die ProductCard-Komponente zu importieren und darzustellen und so eine Benutzeroberfläche für Kunden bereitzustellen.

Schritt 6: Externe API-Aufrufe hinzufügen

Nutzen Sie programmierbare Wallets, indem Sie eine neue Datei mit dem Namen „createWallet.js“ im Verzeichnis src/pages/api erstellen. Diese verarbeitet externe API-Aufrufe zum Erstellen einer Wallet.

Schritt 7: Umgebungsvariablen konfigurieren

Erstellen Sie im Stammverzeichnis Ihres Projekts eine .env-Datei und fügen Sie Ihre Circle Web3 Services-Anmeldeinformationen hinzu:

CIRCLE_API_KEY=
CIRCLE_ENTITY_SECRET=

Schritt 8: Ausführen der Anwendung

Starten Sie den Entwicklungsserver mit dem folgenden Befehl:

npm run dev

Schritt 9: Zugriff auf die Anwendung

Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000, um Ihre Anwendung in Aktion zu sehen.

Abschluss

Die programmierbaren Wallets von Circle vereinfachen das Einbetten von Wallet-Funktionen in Anwendungen und machen es für Unternehmen einfach, USDC als Zahlungsmethode zu akzeptieren. Durch die Nutzung des Skripts createWallet.js und der Komponente PayButton.tsx können Händler ihren weltweiten Kunden nahtlose Zahlungserlebnisse mit nahezu sofortiger Abwicklung bieten.

Bildquelle: Shutterstock