モバイル実装ベータ
オンランプ UI はモバイルウェブビューおよびモバイルブラウザーに対応しています。モバイル SDK には対応していません。
セッションを発行する
他の実装と同様に、ユーザーがアクセスするたびに新規オンランプセッションを作成するサーバーエンドポイントを実装する必要があります。このエンドポイントは client_secret を返します。これにより、オンランプ UI を読み込み、オンランプが利用できない場合にエラーを表示することができます。
オンラインのオンランプ UI
フロントエンドルート (たとえば、www.my-web3-wallet.com/onramp/<client_secret>) を作成して、オンランプ UI をホストします。/onramp/<client_secret> は 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>
ここで、onramp.js が URL から client_secret を使用して、オンランプ UI をマウントします。
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
モバイルアプリに戻るディープリンク /onramp_success へのユニバーサルリンクを設定する必要があります。また、フォールバックまたは onramp_success ページを用意するか、ユーザーに手動でアプリに切り替えるように求めるかを検討する必要があります。
購入を完了する
通常の連携と同様に、フロントエンドクライアントがオンランプ UI 全体を制御します。この UI は柔軟に画面サイズに合うようにサイズが変更されます。セッションの状態が変化し、transaction_details に関する詳細を収集すると、CryptoOnrampSession オブジェクトがそれに従って更新されます。ステータスの移行が発生するたびに、Webhook とフロントエンドのイベントが生成されます。上記のように、フロントエンドイベントリスナーを使用して、OnrampSession の完了時にユーザーをアプリケーションユーザーフローに再びリダイレクトできます。
モバイルアプリにリダイレクトする
ユーザーはディープリンクまたは手動切り替えを使用して、モバイルアプリケーションでフローを再開できます。モバイルアプリケーションではバックエンドを使用して、CryptoOnrampSession の状態のクエリを続行できます。たとえば、ユーザーが初期設定時に残高にトップアップ (資金を追加) している場合、セッションが fulfillment_processing に移行した時点でユーザーをアプリケーションにリダイレクトできます。バックグラウンドで OnrampSession のステータスをポーリングしている間に、ユーザーがアプリケーションの残りの部分を探索できるようにすることができます。