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é.
01
Chemin frontend
- 1Collectez le montant, la plateforme de paiement, la devise fiat et l'identifiant de paiement.
- 2Passez le WalletClient viem connecté à useOfframp() ou createOfframp({ walletClient }).
- 3Faites remonter les états de progression : approbation, enregistrement, dépôt, confirmation, délégation, restriction, reprise, terminé.
- 4Interceptez EXTENSION_REGISTRATION_REQUIRED pour PayPal et Wise, puis pilotez usePeerExtensionRegistration(platform).
- 5Appelez 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
| Champ | Raison |
|---|---|
| depositId | Identifiant principal pour close(), les liens OTC et le support |
| txHash | Preuve que l'utilisateur a signé et diffusé la transaction de dépôt |
| platform + currency | Affichage de la route, support et segmentation analytique |
| libellé d'identifiant | Référence de paiement lisible par un humain ; ne stockez pas de secrets |
| integratorId | Attribution 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.
- Traitez les webhooks comme des indices de cycle de vie, puis réconciliez l'état restreint du propriétaire avec deposits() ; utilisez l'API Peerlytics pour des données de marché et analyses plus larges.
Keep exploring
Common questions
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 ?
Interceptez EXTENSION_REGISTRATION_REQUIRED, invitez l'utilisateur à installer ou connecter l'extension Peer, effectuez la capture des identifiants vendeur via usePeerExtensionRegistration(), puis réessayez le dépôt initial.