Développeurs · Applications

Construisez un flux de vente d'USDC que les utilisateurs peuvent réellement terminer.

Une bonne application d'off-ramp, c'est surtout de la gestion d'état ennuyeuse : collecter la route, laisser le wallet signer, récupérer les moyens de paiement protégés par extension, afficher un lien de dépôt, et réconcilier les événements de cycle de vie une fois l'onglet fermé.

Ouvrir le guide du SDKCloner un starter
01

Chemin frontend

  1. 01Collectez le montant, la plateforme de paiement, la devise fiat et l'identifiant de paiement.
  2. 02Afficher les limites actuelles de la politique du fournisseur et exiger de l'utilisateur qu'il confirme l'admissibilité au compte, à la région et à la transaction.
  3. 03Transmettez le viem WalletClient connecté à useOfframp() ou createOfframp({ walletClient }).
  4. 04Affichez les états d’avancement : approving, registering, depositing, confirming, delegating, restricting, resuming et done.
  5. 05Pour une voie éligible nécessitant l’extension, interceptez EXTENSION_REGISTRATION_REQUIRED et exécutez usePeerExtensionRegistration(platform).
  6. 06Appelez deposits(address) au chargement de la page pour qu'un rafraîchissement ne laisse pas un vendeur en cours de transaction bloqué.
02

L'état que vous devriez stocker

ChampRaison
depositIdIdentifiant principal pour close(), les liens OTC et le support
txHashPreuve que l'utilisateur a signé et diffusé la transaction de dépôt
platform + currencyAffichage de la route, support et segmentation analytique
libellé d'identifiantRéférence de paiement lisible par un humain ; ne stockez pas de secrets
integratorIdAttribution stable pour la télémétrie produit et le support
03

Contraintes d'UX

  • Le SDK cible le mainnet Base ; il n'y a pas de sandbox public. Testez avec le minimum de 1 USDC.
  • Chaque dépôt créé par le SDK délègue la tarification au vault Delegate. Ne présentez pas de contrôles de taux manuels pour ce chemin.
  • Le fiat reste en dehors du SDK. L'acheteur et le vendeur règlent directement dans l'application de paiement sélectionnée.
  • Reconcile narrow owner state with deposits(); use Peerlytics API for broader market data, deposits, intents, and analytics.

Poursuivre l’exploration

API PeerlyticsEspace développeurs

Questions fréquentes

Une application wallet doit-elle utiliser la fonction autonome ou le hook React ?

Utilisez le hook React quand vous voulez les états intégrés de chargement, de progression, d'erreur et de résultat. Utilisez createOfframp({ walletClient }) quand votre application a sa propre machine à états.

Que dois-je afficher quand l'enregistrement PayPal ou Wise échoue ?

D'abord, montrez la limite de la politique : Wise interdit les reçus de vente cryptographique P2P et PayPal peut exiger une préapprobation. Seulement pour un flux de fournisseur admissible si vous attrapez EXTENSION REGISTRATION REQUIS, connectez l'extension, complètez l'utilisationPeerExtensionRegistration(), et réessayez.