コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments を使用する
決済手段
支払いインターフェイス
決済シナリオ
店頭支払い
決済にとどまらない機能

組み込みオンランプの導入公開プレビュー

このガイドを使用して、埋め込み可能なオンランプを全面的にカスタマイズできます。

このガイドは、組み込みオンランプ・クイックスタート の拡張版です。次の機能を追加できます。

  • スクリプトタグまたはパッケージマネージャーを使用した SDK のインストール
  • 仮想通貨へのオンランプ換算の推定見積もりの取得
  • モバイル Web ビューへのオンランプ UI の設定

SDK およびクライアントライブラリをインストールする
クライアント側
サーバー側

クライアント側

以下のスクリプトを、script タグを使用して HTML の <head> 要素内に含めます。互換性と PCI 準拠のため、このスクリプトは常に Stripe のドメイン (https://js.stripe.com、https://crypto-js.stripe.com) から直接読み込んでください。このスクリプトをバンドルに含めたり、そのコピーを自分でホストしたりしないでください。その場合、警告なしに実装が壊れる可能性があります。

オンランプ JS SDK をモジュールとして使用する

npm パッケージを使用して、オンランプ JS SDK を ES モジュールとして読み込みます。パッケージには、TypeScript の型定義が含まれています。

代替 SDK のインストール

または、スクリプトタグまたはパッケージマネージャーを使用して、Stripe 仮想通貨 ES モジュールのクライアント側 SDK をインストールできます。SDK は、Stripe 仮想通貨スクリプトが提供するグローバルStripeOnramp関数を ES モジュールとしてラップします。

  1. スクリプトを手動で読み込みます。 内にスクリプトタグを使用して次のスクリプトを含めます。<head>HTML の要素。互換性とPCI 準拠のために、これらのスクリプトは常に Stripe のドメイン_https://js.stripe.com__と_https://crypto-js.stripe.com_,から直接読み込む必要があります。スクリプトをバンドルに含めたり、コピーを自身でホストしたりしないでください。含めると、警告なしに導入が中断される可能性があります。

  2. API 公開可能キーを設定し、バックエンドで作成した OnrampSession オブジェクトを Stripe が取得できるようにします。以下に例を示します。

  3. パッケージマネージャーを使用してモジュールをインストールするには、まず npm 公開レジストリから Stripe.js ES モジュールと Stripe 仮想通貨 ES モジュールをインストールします。パッケージには TypeScript 型定義が含まれています。

  4. モジュールをインポートし、API 公開可能キーを設定して、バックエンドで作成した OnrampSession オブジェクトを Stripe が取得できるようにします。この関数は、スクリプトの読み込み後に新しく作成された StripeOnramp オブジェクトによって解決される Promise オブジェクトを返します。

サーバー側

オンランプ API は限定的なベータ版であるため、公式ライブラリには API エンドポイントのサポートが含まれていません。このため、サンプルではバックエンドとのやり取りに curl を使用しています。

仮想通貨オンランプセッションを生成する
サーバー側

端末で次の curl コマンドを実行して、仮想通貨オンランプセッションを生成します。

次のようなレスポンスを受信します。

セッションの作成時に渡すことができる全パラメーターのリストについては、オンランプ API リファレンスをご覧ください。

オンランプ UI をレンダリングする
クライアント側

StripeJS と OnrampJS の両方のバンドルをインポートします。

前のステップのサーバー側の呼び出しから client_secret を使用し、オンランプセッションの開始とマウントを行います。

スクリプトを実行すると、オンランプに以下のダイアログが表示されます。

Stripe による法定通貨から仮想通貨へのオンランプがサードパーティーアプリケーションに埋め込まれる

サードパーティーアプリケーションに埋め込まれた、Stripe による法定通貨から仮想通貨へのオンランプ

サンドボックスの値

警告

サンドボックスの取引金額は、事前に決定された限度額によって上書きされます。

次の値を使用して、サンドボックスでオンランプ取引を完了します。

  • OTP 画面で、確認コードに 000000 を使用します。
  • 個人情報画面で、SSN には 000000000 を使用して、住所 (1 行目) には address_full_match を使用します。
  • 支払いの詳細画面で、テスト用クレジットカード番号 4242424242424242 を使用します。

実装の使用状況を表示

オンランプを起動した後、Stripe ダッシュボードでカスタマイズされた使用量レポートを表示できます。また、アカウント登録ページに戻って、オンランプのホストを計画しているドメインを更新し、アカウント登録タスクのステータスを確認することもできます。

オプションモバイル用にオンランプを設定する

セッションを作成して、オンランプ UI をホストし、購入を完了して、ユーザーをモバイルアプリにリダイレクトすることで、Stripe の仮想通貨オンランプ UI をモバイルの Web ビューやブラウザに導入します。

セッションを発行する

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

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

フロントエンドルートを作成する (たとえば、www.my-web3-wallet.com/onramp/<client_secret>) ことで、オンランプ UI をホストします。/onramp/<client_secret> は onramp.html を指します。

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

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

購入を完了する

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

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

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

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

オプションコンバージョンの見積もりを設定する

Onramp Quotes API を使用すると、プラットフォームはさまざまなネットワークですべての仮想通貨へのオンランプ換算の見積もりを取得することができます。ソースまたは宛先の固定金額を指定して、宛先の通貨またはネットワークのサブセットに見積もりを制限することもできます。この API では、ユーザーをオンランプウィジェットに誘導する前に商品 UI で見積もりを表示することができます。ユーザーがオンランプウィジェットにアクセスする前に見積もりの有効期限が切れた場合は、オンランプウィジェットでユーザーに表示される見積もりが若干異なる可能性があります。

コンバージョンの見積もりを取得する

GET /v1/crypto/onramp/quotes エンドポイントを使用して、コンバージョンの見積もりを取得します。次の表は、このエンドポイントで使用できるすべてのパラメーターをまとめたものです。

パラメータータイプデフォルト詳細
source_currency文字列 (オプション)usdISO-4217 通貨コード。現時点では、usd、eur のみに対応しています。
source_amount文字列 (オプション)100.00オンランプが必要な法定通貨の金額の文字列表現。source_amount が設定される場合、destination_amount は null にする必要があります (固定金額を設定できるのは取引の一方のみであるため、これらは相互排他的です)。
destination_amount文字列 (オプション)null購入する destination_currency の金額の文字列表現。destination_amount を設定する場合、source_amount は null にする必要があります。このフィールドを指定する場合は、destination_currencies に単一値を、destination_networks にも単一値を指定する必要があります (これにより、Stripe で見積もり対象の仮想通貨を認識できます)。
destination_currencies配列<String> (オプション)null
  • ['usdc', 'ethereum']
見積もり生成の対象となる仮想通貨のリスト。null のままである場合は、destination_networks がサポートしているすべての destination_currencies の見積もりを取得します。
  • 通貨: btc、eth、sol、matic、usdc、xlm
destination_networks配列<String> (オプション)null
  • ['polygon', 'bitcoin', 'solana', 'ethereum']
見積もりを生成する暗号資産ネットワークのリスト。null のままである場合は、すべてのネットワークの destination_currencies の見積もりを取得します。
  • ネットワーク: bitcoin、ethereum、solana、polygon 、stellar

見積もりリクエストの例

デフォルトのソースの金額が 100 USD の宛先通貨とネットワークのペアをすべて取得するには、次のコマンドを実行します。

次のようなレスポンスを受信します。

ソースの金額が 200 USD の宛先通貨とネットワークのペアをすべて取得するには、次のコマンドを実行します。

次のようなレスポンスを受信します。

イーサリアムとソラナのネットワークで ETH と SOL の見積もりを取得するには、次のコマンドを実行します (イーサリアムでは ETH に、ソラナのネットワークでは SOL が返されます)。destination_currencies と destination_networks を指定すると、クロス積の有効な通貨とネットワークのペアごとに見積もりが返されます。destination_currencies のデフォルト値はすべての通貨で、destination_networks のデフォルト値はすべてのネットワークです。

次のようなレスポンスを受信します。

イーサリアムとソラナで USDC の見積もりを取得するには、次のコマンドを実行します。

次のようなレスポンスを受信します。

destination_amount が指定された単一の支払い先の通貨とネットワークのペア (イーサリアムの ETH) の見積もりを取得するには、次のコマンドを実行します。

次のようなレスポンスを受信します。

このページはお役に立ちましたか。
はいいいえ