モバイル用の仮想通貨の導入公開プレビュー

モバイル用にオンランプを設定します。

Stripe の仮想通貨オンランプ UI をモバイルのウェブビューやブラウザーに実装する方法についてご紹介します。このプロセスには、セッションの作成、オンランプ UI のホスト、購入の完了、モバイルアプリへのユーザーのリダイレクトが含まれます。Stripe Crypto は、モバイル SDK に対応していません。

セッションを発行する

他の実装と同様に、ユーザーがアクセスするたびに新規オンランプセッションを作成するサーバーエンドポイントを実装する必要があります。このエンドポイントは client_secret を返します。これにより、オンランプ UI を読み込み、オンランプが利用できない場合にエラーを表示することができます。

オンランプ UI をホストする

フロントエンドルート (「たとえば、www.my-web3-wallet.com/onramp/<client_secret>」) を作成して、オンランプ UI をホストします。「/onramp/<client_secret>」は 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>

ここで、onramp.js が URL から client_secret を使用して、オンランプ UI をマウントします。

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);
  }
}

モバイルアプリに戻るディープリンク /onramp_success へのユニバーサルリンクを設定します。ユーザーに手動でアプリに切り替えるように求めるフォールバックまたは onramp_success ページを用意することを検討してください。

購入を完了する

標準的な実装と同様に、フロントエンドクライアントがオンランプ UI 全体を制御します。この UI は画面サイズに合うようにサイズが変更されます。セッションの状態が変化し、さらに transaction_details が収集されると、CryptoOnrampSession オブジェクトがそれに従って更新されます。ステータスが移行するたびに、Webhook とフロントエンドイベントが生成されます。フロントエンドイベントリスナーを使用することで、OnrampSession の完了時にユーザーをアプリケーションフローにリダイレクトできます。

モバイルアプリにリダイレクトする

ユーザーはディープリンクまたは手動切り替えを使用して、モバイルアプリケーションでフローを再開できます。モバイルアプリケーションではバックエンドを使用して、CryptoOnrampSession の状態のクエリを続行できます。

たとえば、ユーザーが初期設定時に残高にトップアップ (資金を追加) する場合、セッションが fulfillment_processing に移行した時点でユーザーをアプリケーションにリダイレクトできます。バックグラウンドで OnrampSession のステータスをポーリングしている間に、ユーザーがアプリケーションの残りの部分を確認できるようにすることができます。