Intégrer la cryptomonnaie pour mobileBêta

Configurez la rampe d'accès pour une utilisation mobile.

Découvrez comment intégrer l’interface utilisateur de la rampe d’accès à la cryptomonnaie de Stripe dans les affichages Web et les navigateurs mobiles en créant une session, en hébergeant l’interface utilisateur de la rampe d’accès, en effectuant l’achat et en redirigeant les utilisateurs vers l’application mobile. Actuellement, Stripe Cryptomonnaie ne prend pas en charge les SDK mobiles.

Créer une session

Comme pour les autres intégrations, vous devez implémenter un endpoint de serveur afin de créer une nouvelle session de rampe d’accès pour chaque visite de l’utilisateur. L’endpoint renvoie un client_secret qui peut charger l’interface utilisateur de la rampe ou afficher une erreur si la rampe n’est pas disponible.

Héberger l’interface utilisateur de la rampe d’accès

Créez un chemin d’accès au front-end (par exemple, www.my-web3-wallet.com/onramp/<client_secret>) pour héberger l’interface utilisateur de la rampe d’accès. Votre /onramp/<client_secret> pointe vers un fichier 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>

Où onramp.js utilise la propriété client_secret de l’URL et installe l’interface utilisateur de la rampe d’accès :

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 via universal link
    window.location.assign('/onramp_success/' + session.id);
  }
}

Configurez des liens universels pour renvoyer le lien profond /onramp_success vers votre application mobile. Envisagez de fournir une alternative ou une page onramp_success pour demander aux utilisateurs de revenir manuellement à votre application.

Finaliser l’achat

Comme dans le cas d’une intégration standard, le client front-end contrôle l’intégralité de l’interface utilisateur de rampe d’accès. L’interface utilisateur s’adapte à la taille de l’écran. À mesure que l’état de la session change et que nous collectons davantage de transaction_details, l’objet CryptoOnrampSession est mis à jour en conséquence. Nous générons des webhooks et des événements front-end pour chaque transition d’état. L’utilisation d’écouteurs d’événements front-end vous permet de rediriger les utilisateurs vers le flux de votre application une fois la OnrampSession terminée.

Rediriger vers l’application mobile

À l’aide d’un lien profond ou d’un changement manuel, les utilisateurs peuvent reprendre leur flux dans votre application mobile. Votre application mobile peut utiliser votre back-end pour continuer à interroger l’état de CryptoOnrampSession.

Par exemple, si un utilisateur recharge son solde lors de la configuration initiale, vous pouvez le rediriger vers votre application dès que la session basculera sur fulfillment_processing. Vous pouvez permettre aux utilisateurs d’explorer le reste de votre application tout en interrogeant l’état de la OnrampSession en arrière-plan.