Krypto für Mobilgeräte integrierenÖffentliche Vorschau

Konfigurieren Sie die Onramp für den mobilen Einsatz.

Erfahren Sie, wie Sie die Krypto-Onramp-Nutzeroberfläche von Stripe in mobile Webansichten und Browser integrieren können, indem Sie das Minting einer Sitzung durchführen, die Onramp-Nutzeroberfläche hosten, den Kauf abschließen und Nutzer/innen an die Mobil-App zurückleiten. Derzeit unterstützt Stripe Crypto keine mobilen SDKs.

Minting einer Sitzung

Ä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.

Onramp-Nutzeroberfläche hosten

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.

onramp.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Crypto Onramp</title>
    <meta name="description" content="A demo of the 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:

onramp.js
const stripeOnramp = StripeOnramp(pk_test_TYooMQauvdEDq54NiTphI7jx
);
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 through universal link
    window.location.assign('/onramp_success/' + session.id);
  }
}

Konfigurieren Sie universelle Links, um /onramp_success zurück zu Ihrer mobilen App zu verlinken. Erwägen Sie, eine Ausweich- oder onramp_success-Seite bereitzustellen, um Nutzer/innen aufzufordern, manuell zurück zu Ihrer App zu wechseln.

Kauf abschließen

Wie bei einer Standardintegration steuert der FronteEnd-Client die gesamte Onramp-Nutzeroberfläche. Die Nutzeroberfläche passt sich der Bildschirmgröße an. Wenn sich der Sitzungsstatus ändert und wir mehr transaction_details sammeln, wird das CryptoOnrampSession-Objekt entsprechend aktualisiert. Wir generieren Webhooks und Front-End-Ereignisse für jeden Statusübergang. Durch die Verwendung von Frontend-Ereignis-Listenern können Sie Nutzer/innen nach Abschluss der OnrampSession wieder zu Ihrem Anwendungsablauf weiterleiten.

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 ein/e 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 gestatten, den Rest Ihrer Anwendung zu erkunden, während sie im Hintergrund den Status der OnrampSession abfragen.