Mobil IntegrationBeta
Die Onramp-Nutzeroberfläche unterstützt mobile Webansichten und mobile Browser. Wir unterstützen keine mobilen SDKs.
Eine Session prägen
Ähnlich wie bei anderen Integrationen müssen Sie einen Server-Endpoint implementieren, um für jeden Nutzerbesuch eine neue Onramp-Sitzung zu erstellen. Der Endpoint gibt ein client_secret zurück, das die Onramp-Nutzeroberfläche laden oder einen Fehler anzeigen kann, wenn Onramp nicht verfügbar ist.
Gehostete Ablauf Nutzeroberfläche
Erstellen Sie eine Frontend-Route (zum Beispiel www.my-web3-wallet.com/onramp/<client_secret>), um die onramp- Nutzeroberfläche zu hosten. Ihr /onramp/<client_secret> verweist auf onramp.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Crypto Onramp</title> <meta name="description" content="A demo of hosted onramp" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script type="text/javascript" src="https://crypto-js.stripe.com/crypto-onramp-outer.js"></script> <script src="onramp.js" defer></script> </head> <body> <div id="onramp-element" /> </body> </html>
Dabei verwendet onramp.js das client_secret aus der URL und stellt die onramp- Nutzeroberfläche bereit:
const stripeOnramp = StripeOnramp(
); initialize(); // initialize onramp element with client secret function initialize() { const url = window.location.href.replace(/\/$/, ''); const clientSecret = url.substring(url.lastIndexOf('/') + 1); const onrampSession = stripeOnramp.createSession({ clientSecret, // other client side options that customize the look and feel }); onrampSession .addEventListener('onramp_session_updated', handleSessionUpdate) .mount("#onramp-element"); } function handleSessionUpdate(event) { const session = event.payload.session; if (session.status === 'fulfillment_complete' || session.status === 'rejected') { // redirect back to mobile app via universal link window.location.assign('/onramp_success/' + session.id); } }pk_test_TYooMQauvdEDq54NiTphI7jx
Sie müssen universelle Links konfigurieren, um /onramp_success zurück zu Ihrer mobilen App zu verlinken, und erwägen, eine Ausweich- oder onramp_success-Seite bereitzustellen, um Nutzer/innen aufzufordern, manuell zurück zu Ihrer App zu wechseln.
Kauf abschließen
Ähnlich wie bei einer regulären Integration steuert der Frontend-Client die Gesamtheit der Onramp-Nutzeroberfläche. Die Nutzeroberfläche passt sich der Bildschirmgröße an. Wenn sich der Status der Sitzung ändert und wir mehr Details zu transaction_details erfassen, wird das CryptoOnrampSession-Objekt entsprechend aktualisiert. Webhooks und Frontend-Ereignisse werden für jeden auftretenden Statusübergang generiert. Wie oben gezeigt, können Sie mithilfe von Frontend-Ereignis-Listenern Nutzer/innen nach Abschluss der OnrampSession zurück zu Ihrem Anwendungs-Nutzerablauf umleiten.
Zur Mobil-App weiterleiten
Über einen Deep-Link oder eine manuelle Umstellung können Nutzer/innen ihren Ablauf in Ihrer mobilen Anwendung wiederaufnehmen. Ihre Mobilanwendung kann Ihr Backend verwenden, um weiterhin den Status von CryptoOnrampSession abzufragen. Wenn der/die Nutzer/in beispielsweise sein/ihr Guthaben bei der Ersteinrichtung aufstockt, können Sie die Nutzer/innen zu Ihrer Anwendung zurückleiten, sobald die Sitzung in den Status fulfillment_processing übergeht. Sie können den Nutzer/innen erlauben, den Rest Ihrer Anwendung zu erkunden, während sie im Hintergrund den Status der OnrampSession abfragen.