このページは、幅の広い画面向けに最適化されています。このガイドのテキストベースのバージョンをお勧めします。

埋め込み可能なオンランプの実装を設定する

テスト環境の API キーを使用して、Stripe の法定通貨から仮想通貨へのオンランプの実装を構築して機能させます。デザインをカスタマイズするには、ダッシュボードのブランディング設定にアクセスします。ダッシュボードでは、オンランプページをホストするために使用するドメインをドメインの許可リストに追加していることを確認してください。

コードを作成しない場合は、Stripe のノーコードのオプションを使用するか、Stripe のパートナーにご相談ください。

サーバーを設定する

Stripe Ruby ライブラリーをインストールする

Stripe ruby gem をインストールし、require を指定してコードに読み込みます。または、まったくゼロから開始していて Gemfile が必要な場合には、コードエディターのリンクを使用してプロジェクトファイルをダウンロードします。

gem をインストールします。

gem install stripe

サーバー

OnrampSession を作成する

Add an endpoint on your server that creates an OnrampSession object. An OnrampSession object tracks the customer’s onramp lifecycle, keeping track of order details and ensuring the customer is only charged once. Return the OnrampSession object’s client secret in the response to finish the onramp on the client.

注

オンランプ API は限定的なベータ版であるため、公式ライブラリには API エンドポイントのサポートが含まれていません。このガイドでは、オンランプセッションを作成するための Stripe 公式ライブラリのカスタム拡張機能を紹介しています。右側のダウンロード可能なサンプルコードで見つけることができます。

サーバー

クライアント側でオンランプページを構築する

Stripe Crypto SDK を読み込む

Use Stripe.js and the Stripe crypto SDK to remain PCI compliant. These scripts must always load directly from Stripe’s domains (https://js.stripe.com and https://crypto-js.stripe.com) for compatibility. Don’t include the scripts in a bundle or host a copy yourself. If you do, your integration might break without warning.

クライアント

オンランプコンテナーを定義する

オンランプウィジェットをオンラインで提供するために、1 つの空のプレースホルダー div をページに追加します。Stripe は、iframe を挿入して、顧客の支払い情報やその他の機密情報を安全に収集します。

クライアント

Stripe Crypto SDK を初期化する

公開可能 API キーを使用して Stripe Crypto SDK を初期化します。これを使用して、OnrampSession オブジェクトを取得し、クライアント側でオンランプを完了させます。

クライアント

OnrampSession を取得する

ページが読み込まれたらすぐに、サーバーのエンドポイントにリクエストを行い、新しい OnrampSession オブジェクトを作成します。エンドポイントから返された clientSecret を使用してオンランプが完了します。

クライアント

OnrampElement を作成する

OnrampSession インスタンスを作成して、ページのプレースホルダー <div> にマウントします。仮想通貨の購入と提供を完了するために必要な注文、ID、支払いの詳細を収集する動的な UI によって iframe が埋め込まれます。

注

Use the values provided here to complete an onramp transaction in test mode.

クライアント

Enhance your integration

You’re ready to let users securely purchase cryptocurrencies directly from your platform or Dapp at checkout. Continue with the steps below to add more features.

Style the onramp widget

ダッシュボードのブランド設定を使用して、オンランプ UI をカスタマイズします。自社のカラースキームを使用して、オンランプページの他の部分と調和するようにします。

ダークモード

theme パラメーターを使用して、オンランプウィジェットにダークモードを適用します。

クライアント

Set up OnrampSession state listeners

Initialize listeners to provide a responsive user interface when an onramp session completes. For example, you can direct users to resume their previous task or return to their intended destination.

クライアント

はいいいえ

require 'sinatra'
require 'stripe'
# This is a public sample test API key.
# Don’t submit any personally identifiable information in requests made with this key.
# Sign in to see your own test API key embedded in code samples.
Stripe.api_key = 'sk_test_BQokikJOvBiI2HlWgH4olfQ2'

set :static, true
set :port, 4242

# An endpoint to create a new onramp session
post '/create-onramp-session' do
  content_type 'application/json'
  data = JSON.parse(request.body.read)

  # Create an OnrampSession with amount and currency
  onramp_session = Stripe::APIResource.request(
    :post,
    '/v1/crypto/onramp_sessions',
    {
      transaction_details: {
        destination_currency: data['transaction_details']['destination_currency'],
        destination_exchange_amount: data['transaction_details']['destination_exchange_amount'],
        destination_network: data['transaction_details']['destination_network']
      },
      customer_ip_address: request.ip
    }
  )[0].data

  {
    clientSecret: onramp_session[:client_secret]
  }.to_json
end<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Crypto Onramp</title>
    <meta name="description" content="A demo of Stripe onramp" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="onramp.css" />
    <script src="https://js.stripe.com/v3/"></script>
    <script src="https://crypto-js.stripe.com/crypto-onramp-outer.js"></script>
    <script src="onramp.js" defer></script>
  </head>
  <body>
    <div id="root">
      <div id="onramp-message"></div>
      <div id="onramp-element">
        <!--Stripe injects the Onramp widget-->
      </div>
    </div>
  </body>
</html>// This is a public sample test API key.
// Don’t submit any personally identifiable information in requests made with this key.
// Sign in to see your own test API key embedded in code samples.
const stripeOnramp = StripeOnramp("pk_test_TYooMQauvdEDq54NiTphI7jx");

let session;

initialize();

async function initialize() {
  // Fetches an onramp session and captures the client secret
  const response = await fetch(
    "/create-onramp-session",
    {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      transaction_details: {
        destination_currency: "usdc",
        destination_exchange_amount: "13.37",
        destination_network: "ethereum",
      }
     }),
  });
  const { clientSecret } = await response.json();

  session = stripeOnramp
    .createSession({
      clientSecret,
      appearance: {
        theme: "dark",
      }
    })
    .addEventListener('onramp_session_updated', (e) => {
      showMessage(`OnrampSession is now in ${e.payload.session.status} state.`)
    })
    .mount("#onramp-element");
}

// ------- UI helpers -------

function showMessage(messageText) {
  const messageContainer = document.querySelector("#onramp-message");

  messageContainer.textContent = messageText;
}* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100vh;
  width: 100vw;
}

#root {
  display: flex;
  flex-direction: column;
}

#onramp-message {
  color: rgb(105, 115, 134);
  font-size: 16px;
  line-height: 20px;
  padding-top: 12px;
  text-align: center;
}

#onramp-element {
  min-width: min(450px, 60vw);
  margin-top: 24px;
}source 'https://rubygems.org/'

gem 'sinatra'
gem 'stripe'# Integrate with Stripe onramp

Build a simple page to use Stripe onramp. Included are some basic
build and run scripts you can use to start up the application.

## Running the sample

1. Build the server

~~~
bundle install
~~~

2. Run the server

~~~
ruby server.rb -o 0.0.0.0
~~~

3. Go to [http://localhost:4242/onramp.html](http://localhost:4242/onramp.html)

注

埋め込み可能なオンランプの実装を設定する

Stripe Ruby ライブラリーをインストールする

OnrampSession を作成する

注

Stripe Crypto SDK を読み込む

オンランプコンテナーを定義する

Stripe Crypto SDK を初期化する

OnrampSession を取得する

OnrampElement を作成する

注

Enhance your integration

Style the onramp widget

ダークモード

Set up OnrampSession state listeners

次のステップ

オンランプ API

Onramp Quotes API

バックエンド導入のベストプラクティス