# 法定通貨から暗号資産へのオンランプ

# 埋め込み可能なオンランプシステムの設定

テスト API キーを使用して、Stripe の法定通貨から暗号資産への[オンランプ](https://docs.stripe.com/crypto/onramp.md)の完全導入を構築します。デザインをカスタマイズするには、ダッシュボードの[ブランディング設定](https://dashboard.stripe.com/account/branding)に移動します。ダッシュボードで、オンランプページをホストするために使用するドメインの[ドメイン許可リスト](https://dashboard.stripe.com/crypto-onramp/allowlist-domains)にドメインを追加していることを確認します。

// 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 Stripe = require("stripe");
const stripe = Stripe('<<YOUR_SECRET_KEY>>');
const OnrampSessionResource = Stripe.StripeResource.extend({
  create: Stripe.StripeResource.method({
    method: 'POST',
    path: 'crypto/onramp_sessions',
  }),
});

  // Create an OnrampSession with the order amount and currency
  const onrampSession = await new OnrampSessionResource(stripe).create({
    transaction_details: {
      destination_currency: transaction_details["destination_currency"],
      destination_exchange_amount: transaction_details["destination_exchange_amount"],
      destination_network: transaction_details["destination_network"],
    },
    customer_ip_address: req.socket.remoteAddress,
  });

  res.send({
    clientSecret: onrampSession.client_secret,
  });
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 = '<<YOUR_SECRET_KEY>>'
  \# 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
import 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 = '<<YOUR_SECRET_KEY>>'
    try:
        data = json.loads(request.data)
        \# Create an OnrampSession with the order amount and currency
        onramp_session = stripe.stripe_object.StripeObject().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.remote_addr,
          })

        return jsonify({
            'clientSecret': onramp_session['client_secret']
        })
    except Exception as e:
        return jsonify(error=str(e)), 403
$stripe = new \Stripe\StripeClient($stripeSecretKey);
    // Create an OnrampSession with amount and currency
    $params = [
      'transaction_details' => [
        'destination_currency' => $jsonObj->transaction_details->destination_currency,
        'destination_exchange_amount' => $jsonObj->transaction_details->destination_exchange_amount,
        'destination_network' => $jsonObj->transaction_details->destination_network,
      ],
      'customer_ip_address' => $_SERVER['REMOTE_ADDR']
    ];
    $onrampSession = $stripe->request('post', '/v1/crypto/onramp_sessions', $params, []);

    $output = [
        'clientSecret' => $onrampSession->client_secret,
    ];
$stripeSecretKey = '<<YOUR_SECRET_KEY>>';
  "github.com/stripe/stripe-go/v84"
  // 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.Key = "<<YOUR_SECRET_KEY>>"
  // Create an OnrampSession with amount and currency
  clientIp, _, _ := net.SplitHostPort(r.RemoteAddr)
  params := &OnrampSessionParam{
    TransactionDetails: &req.TransactionDetails,
    CustomerIpAddress: &clientIp,
  }

  os, err := NewOnrampSession(params)
  log.Printf("pi.New: %v", os.ClientSecret)

  if err != nil {
    http.Error(w, err.Error(), http.StatusInternalServerError)
    log.Printf("pi.New: %v", err)
    return
  }

  writeJSON(w, struct {
    ClientSecret string `json:"clientSecret"`
  }{
    ClientSecret: os.ClientSecret,
  })
      // This test secret API key is a placeholder. Don't include personal details in requests with this key.
      // To see your test secret API key embedded in code samples, sign in to your Stripe account.
      // You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys.
      services.AddSingleton(new StripeClient("<<YOUR_SECRET_KEY>>"));
      var onrampSessionService = new OnrampSessionService(_client);
      var onrampSession = onrampSessionService.Create(new OnrampSessionCreateOptions
      {
        TransactionDetails = request.TransactionDetails,
        CustomerIpAddress = HttpContext.Connection.RemoteIpAddress.ToString(),
      });

      return Json(new { clientSecret = onrampSession.ClientSecret });
    // 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.apiKey = "<<YOUR_SECRET_KEY>>";
      CreateOnrampSession postBody = gson.fromJson(request.body(), CreateOnrampSession.class);
      OnrampSessionCreateParams params = OnrampSessionCreateParams.builder()
          .setCustomerIpAddress(request.ip().replaceAll("^\\[|\\]$", ""))
          .setTransactionDetails(
              OnrampSessionCreateParams.TransactionDetails.builder()
                  .setDestinationCurrency(OnrampSessionCreateParams.TransactionDetails.DestinationCurrency
                      .valueOf(postBody.transactionDetails.destinationCurrency.toUpperCase()))
                  .setDestinationExchangeAmount(postBody.transactionDetails.destinationExchangeAmount)
                  .setDestinationNetwork(OnrampSessionCreateParams.TransactionDetails.DestinationNetwork
                      .valueOf(postBody.transactionDetails.destinationNetwork.toUpperCase()))
                  .build())
          .build();

      // Create an OnrampSession with the order amount and currency
      OnrampSession onrampSession = OnrampSession.create(params);

      CreateOnrampSessionResponse onrampSessionResponse = new CreateOnrampSessionResponse(
          onrampSession.getClientSecret());
      return gson.toJson(onrampSessionResponse);
import React, { useState, useEffect } from "react";
import { loadStripeOnramp } from "@stripe/crypto";
// Make sure to call loadStripeOnramp outside of a component’s render to avoid
// recreating the StripeOnramp object on every render.
// 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 stripeOnrampPromise = loadStripeOnramp("<<YOUR_PUBLISHABLE_KEY>>");
  useEffect(() => {
    // Fetches an onramp session and captures the client secret
    fetch(
      "/create-onramp-session",
      "/create.php",
      {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        transaction_details: {
          destination_currency: "usdc",
          destination_exchange_amount: "13.37",
          destination_network: "ethereum",
        }
      }),
    })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret));
  }, []);
  const onChange = React.useCallback(({ session }) => {
    setMessage(`OnrampSession is now in ${session.status} state.`);
  }, []);
      <CryptoElements stripeOnramp={stripeOnrampPromise}>
        {clientSecret && (
          <OnrampElement
            id="onramp-element"
            clientSecret={clientSecret}
            appearance={{ theme: "dark" }}
            onChange={onChange}
          />
        )}
      </CryptoElements>
// ReactContext to simplify access of StripeOnramp object
const CryptoElementsContext =
  React.createContext(null);
CryptoElementsContext.displayName = 'CryptoElementsContext';

export const CryptoElements = ({
  stripeOnramp,
  children,
}) => {
  const [ctx, setContext] = React.useState(() => ({
    onramp: null,
  }));

  React.useEffect(() => {
    let isMounted = true;

    Promise.resolve(stripeOnramp).then((onramp) => {
      if (onramp && isMounted) {
        setContext((ctx) => (ctx.onramp ? ctx : { onramp }));
      }
    });

    return () => {
      isMounted = false;
    };
  }, [stripeOnramp]);

  return (
    <CryptoElementsContext.Provider value={ctx}>
      {children}
    </CryptoElementsContext.Provider>
  );
};

// React hook to get StripeOnramp from context
export const useStripeOnramp = () => {
  const context = React.useContext(CryptoElementsContext);
  return context?.onramp;
};

// React element to render Onramp UI
const useOnrampSessionListener = (
  type,
  session,
  callback
) => {
  React.useEffect(() => {
    if (session && callback) {
      const listener = (e) => callback(e.payload);
      session.addEventListener(type, listener);
      return () => {
        session.removeEventListener(type, listener);
      };
    }
    return () => {};
  }, [session, callback, type]);
};

export const OnrampElement = ({
  clientSecret,
  appearance,
  onReady,
  onChange,
  ...props
}) => {
  const stripeOnramp = useStripeOnramp();
  const onrampElementRef = React.useRef(null);
  const [session, setSession] = React.useState();

  const appearanceJSON = JSON.stringify(appearance);
  React.useEffect(() => {
    const containerRef = onrampElementRef.current;
    if (containerRef) {
      // NB: ideally we want to be able to hot swap/update onramp iframe
      // This currently results a flash if one needs to mint a new session when they need to update fixed transaction details
      containerRef.innerHTML = '';

      if (clientSecret && stripeOnramp) {
        setSession(
          stripeOnramp
            .createSession({
              clientSecret,
              appearance: appearanceJSON ? JSON.parse(appearanceJSON) : {}
            })
            .mount(containerRef)
        );
      }
    }
  }, [appearanceJSON, clientSecret, stripeOnramp]);

  useOnrampSessionListener('onramp_ui_loaded', session, onReady);
  useOnrampSessionListener('onramp_session_updated', session, onChange);

  return <div {...props} ref={onrampElementRef}></div>;
};
    <script src="https://js.stripe.com/clover/stripe.js"></script>
    <script src="https://crypto-js.stripe.com/crypto-onramp-outer.js"></script>
      <div id="onramp-element">
        <!--Stripe injects the Onramp widget-->
      </div>
const stripeOnramp = StripeOnramp("<<YOUR_PUBLISHABLE_KEY>>");
  // Fetches an onramp session and captures the client secret
  const response = await fetch(
    "/create-onramp-session",
    "/create.php",
    {
    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");
{
  "name": "stripe-sample",
  "version": "1.0.0",
  "description": "A sample Stripe implementation",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "author": "stripe-samples",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "stripe": "^20.4.0"
  }
}
{
  "name": "stripe-sample",
  "version": "0.1.0",
  "dependencies": {
    "@stripe/react-stripe-js": "^3.7.0",
    "@stripe/stripe-js": "^7.3.0",
    "express": "^4.17.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.0",
    "stripe": "20.4.0"
  },
  "devDependencies": {
    "concurrently": "4.1.2"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start-client": "react-scripts start",
    "start-server": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "concurrently \"yarn start-client\" \"yarn start-server\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
require github.com/stripe/stripe-go/v84 v84.4.0
certifi==2026.1.4
chardet==5.2.0
click==8.3.1
Flask==3.1.2
idna==3.11
itsdangerous==2.2.0
Jinja2==3.1.6
MarkupSafe==3.0.3
requests==2.32.5
stripe==14.4.0
toml==0.10.2
Werkzeug==3.1.5
{
  "name": "stripe-sample",
  "version": "0.1.0",
  "dependencies": {
    "@stripe/crypto": "^0.0.2",
    "@stripe/stripe-js": "^7.3.0",
    "express": "^4.17.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.0",
    "stripe": "^8.202.0"
  },
  "devDependencies": {
    "concurrently": "4.1.2"
  },
  "homepage": "http://localhost:3000",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start-client": "react-scripts start",
    "start-server": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "concurrently \"yarn start-client\" \"yarn start-server\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@stripe/stripe-js": "^7.3.0",
    "@stripe/crypto": "^0.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.0"
  },
  "homepage": "http://localhost:3000",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
1. Build the server

~~~
pip3 install -r requirements.txt
~~~
1. Build the server

~~~
bundle install
~~~
1. Build the server

~~~
composer install
~~~
1. Build the server

~~~
dotnet restore
~~~
1. Build the server

~~~
mvn package
~~~

2. Run the server

~~~
export FLASK_APP=server.py
python3 -m flask run --port=4242
~~~

2. Run the server

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

2. Run the server

~~~
php -S 127.0.0.1:4242 --docroot=public
~~~

2. Run the server

~~~
dotnet run
~~~

2. Run the server

~~~
java -cp target/sample-jar-with-dependencies.jar com.stripe.sample.Server
~~~

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000](http://localhost:3000)

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

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000](http://localhost:3000)

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

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000](http://localhost:3000)

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

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000](http://localhost:3000)

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

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000](http://localhost:3000)

3. Go to [http://localhost:4242/onramp.html](http://localhost:4242/onramp.html)
1. Run the server

~~~
go run server.go
~~~

2. Build the client app

~~~
npm install
~~~

3. Run the client app

~~~
npm start
~~~

4. Go to [http://localhost:3000](http://localhost:3000)
1. Run the server

~~~
go run server.go
~~~

2. Go to [http://localhost:4242/onramp.html](http://localhost:4242/onramp.html)
1. Build the application

~~~
npm install
~~~

2. Run the application

~~~
npm start
~~~

3. Go to [http://localhost:3000](http://localhost:3000)
1. Build the server

~~~
npm install
~~~

2. Run the server

~~~
npm start
~~~

3. Go to [http://localhost:4242/onramp.html](http://localhost:4242/onramp.html)
\### Development
1. Build the application
~~~shell
$ npm install
~~~

2. _Optional_: download and run the [Stripe CLI](https://stripe.com/docs/stripe-cli)
~~~shell
$ stripe listen --forward-to localhost:3000/api/webhooks
~~~

3. Run the application
~~~shell
$ STRIPE_WEBHOOK_SECRET=$(stripe listen --print-secret) npm run dev
~~~

4. Go to [localhost:3000](http://localhost:3000)

### Production
1. Build the application
~~~shell
$ npm install

$ npm build
~~~

2. Run the application
~~~shell
$ npm start
~~~
### Stripe Node ライブラリーをインストールする

パッケージをインストールし、それをコードにインポートします。また、まったくゼロから開始していて package.json ファイルが必要な場合には、コードエディターのダウンロードリンクを使用してプロジェクトファイルをダウンロードします。

#### npm

ライブラリーをインストールします。

```bash
npm install --save stripe
```

#### GitHub

または、stripe-node ライブラリーのソースコードを直接 [GitHub から](https://github.com/stripe/stripe-node)ダウンロードします。

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

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

#### Terminal

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

```bash
gem install stripe
```

#### Bundler

この行を Gemfile に追加します。

```bash
gem 'stripe'
```

#### GitHub

または、stripe-ruby gem のソースコードを直接 [GitHub から](https://github.com/stripe/stripe-ruby)ダウンロードします。

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

ビルドに依存関係を追加し、ライブラリーをインポートします。まったくゼロから開始していてサンプルの pom.xml ファイル (Maven 用) が必要な場合は、コードエディターのリンクを使用してプロジェクトファイルをダウンロードします。

#### Maven

POM に以下の依存関係を追加し、{VERSION} を使用するバージョン番号に置き換えます。

```bash
<dependency>\n<groupId>com.stripe</groupId>\n<artifactId>stripe-java</artifactId>\n<version>{VERSION}</version>\n</dependency>
```

#### Gradle

build.gradle ファイルに依存関係を追加し、{VERSION} を使用するバージョン番号に置き換えます。

```bash
implementation "com.stripe:stripe-java:{VERSION}"
```

#### GitHub

JAR を直接 [GitHub から](https://github.com/stripe/stripe-java/releases/latest)ダウンロードします。

### Stripe Python パッケージをインストールする

Stripe パッケージをインストールし、コードにインポートします。まったくゼロから開始していて requirements.txt が必要な場合には、コードエディターのリンクを使用してプロジェクトファイルをダウンロードします。

#### pip

pip を使用してパッケージをインストールします。

```bash
pip3 install stripe
```

#### GitHub

stripe-python ライブラリのソースコードを [GitHub から](https://github.com/stripe/stripe-python)直接ダウンロードします。

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

Composer を使用してライブラリーをインストールし、シークレット API キーで初期化します。まったくゼロから開始していて composer.json ファイルが必要な場合には、コードエディターのリンクを使用してファイルをダウンロードします。

#### Composer

ライブラリーをインストールします。

```bash
composer require stripe/stripe-php
```

#### GitHub

または、stripe-php ライブラリーのソースコードを直接 [GitHub から](https://github.com/stripe/stripe-php)ダウンロードします。

### サーバーを設定する

ビルドに依存関係を追加し、ライブラリーをインポートします。まったくゼロから開始していて go.mod ファイルが必要な場合には、コードエディターのリンクを使用してプロジェクトファイルをダウンロードします。

#### Go

必ず Go モジュールを使用してを初期化してください。

```bash
go get -u github.com/stripe/stripe-go/v84
```

#### GitHub

または、stripe-go モジュールのソースコードを直接 [GitHub から](https://github.com/stripe/stripe-go)ダウンロードします。

### Stripe.net ライブラリーをインストールする

.NET または NuGet でパッケージをインストールします。まったくゼロから開始する場合には、設定済みの .csproj ファイルが含まれるファイルをダウンロードします。

#### dotnet

ライブラリーをインストールします。

```bash
dotnet add package Stripe.net
```

#### NuGet

ライブラリーをインストールします。

```bash
Install-Package Stripe.net
```

#### GitHub

または、Stripe.net ライブラリーのソースコードを直接 [GitHub から](https://github.com/stripe/stripe-dotnet)ダウンロードします。

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

パッケージをインストールし、コードにインポートします。まったくゼロから開始していて `package.json` が必要な場合には、コードエディターのリンクを使用してプロジェクトファイルをダウンロードします。

ライブラリーをインストールします。

```bash
npm install --save stripe @stripe/stripe-js next
```

### OnrampSession を作成する

[OnrampSession](https://docs.stripe.com/api/crypto/onramp_sessions.md) オブジェクトを作成するエンドポイントをサーバーに追加します。`OnrampSession` オブジェクトは、顧客のオンランプライフサイクルを追跡し、注文の詳細を記録して、顧客への請求に重複が発生しないようにします。`OnrampSession` オブジェクトの *client Secret* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) をレスポンスで返すと、クライアント側でのオンランプが完了します。

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

### React アプリに Stripe を追加する

*Stripe.js* (Use Stripe.js’ APIs to tokenize customer information, collect sensitive card data, and accept payments with browser payment APIs) および [Stripe 暗号資産 SDK](https://www.npmjs.com/@stripe/crypto) を使用して、*PCI 準拠* (Any party involved in processing, transmitting, or storing credit card data must comply with the rules specified in the Payment Card Industry (PCI) Data Security Standards. PCI compliance is a shared responsibility and applies to both Stripe and your business) を維持します。暗号資産 SDK には、TypeScript の型定義が含まれています。

```bash
npm install --save @stripe/crypto @stripe/stripe-js
```

### Stripe Crypto SDK を初期化する

Stripe の公開可能 API キーを使用して `loadStripeOnramp()` を呼び出し、Stripe ライブラリを設定します。

### Stripe Crypto SDK を読み込む

*Stripe.js* (Use Stripe.js’ APIs to tokenize customer information, collect sensitive card data, and accept payments with browser payment APIs) および [Stripe 暗号資産 SDK](https://www.npmjs.com/package/@stripe/crypto) を使用して、*PCI 準拠* (Any party involved in processing, transmitting, or storing credit card data must comply with the rules specified in the Payment Card Industry (PCI) Data Security Standards. PCI compliance is a shared responsibility and applies to both Stripe and your business) を維持します。互換性を確保するため、これらのスクリプトは常に Stripe のドメイン (https://js.stripe.com および https://crypto-js.stripe.com) から直接読み込んでください。スクリプトをバンドルに含めたり、自分でコピーをホストしたりしないでください。その場合、警告なしに導入が壊れる可能性があります。

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

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

### Stripe Crypto SDK を初期化する

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

### OnrampSession を取得する

ページが読み込まれたらすぐに、サーバーのエンドポイントにリクエストを行い、新しい `OnrampSession` オブジェクトを作成します。エンドポイントから返された *clientSecret* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) を使用してオンランプが完了します。

### Stripe Elements を定義する

`StripeOnramp` オブジェクトのアクセスとオンランプウィジェットのレンダリングを簡素化するために、コードでコンポーネントを定義します。

> これらのコンポーネントは今後、`@stripe/react-stripe-js` と同様に ES モジュールとしてリリースされます。

### Stripe Elements を初期化する

結果として生成されたプロミスを `loadStripeOnramp` から Elements プロバイダーに渡します。これにより、子コンポーネントが、Elements コンシューマーを介して Stripe サービスにアクセスできるようになります。

### OnrampElement を追加する

`OnrampElement` コンポーネントをページに追加します。暗号資産の購入と提供を完了するために必要な注文、ID、支払いの詳細を収集する動的な UI によって iframe が埋め込まれます。

> [ここで提供される値](https://docs.stripe.com/crypto/onramp/embedded.md#sandbox-values) を使用して、*サンドボックス* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) でオンランプ取引を完了します。

### OnrampElement を作成する

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

> [ここで提供される値](https://docs.stripe.com/crypto/onramp/embedded.md#sandbox-values) を使用して、*サンドボックス* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) でオンランプ取引を完了します。

## 実装を強化する

決済時にユーザーがプラットフォームまたは Dapp から直接暗号資産を安全に購入できるようにする準備が完了しました。以下の手順に進み、機能を追加します。

### オンランプウィジェットのスタイルを設定する

ダッシュボードの[ブランド設定](https://dashboard.stripe.com/settings/branding)を使用して、オンランプ UI をカスタマイズします。自社のカラースキームを使用して、オンランプページの他の部分と調和するようにします。

### ダークモード

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

### OnrampSession のステータスのコールバックを設定する

コールバックを初期化すると、オンランプセッション完了時に状況に応じたユーザーインターフェイスが作成されます。たとえば、前のタスクを再開したり、目的の宛先に戻ったりするようにユーザーを誘導できます。

### OnrampSession のステータスのリスナーを設定する

リスナーを初期化すると、オンランプセッション完了時に状況に応じたユーザーインターフェイスに移行されます。たとえば、前のタスクを再開したり、目的の宛先に戻ったりするようにユーザーを誘導できます。

## 次のステップ

#### [デザインをカスタマイズする](https://docs.stripe.com/crypto/onramp/embedded.md#customize-onramp)

オンランプのデザインをカスタマイズします。

#### [パラメーターの事前入力](https://docs.stripe.com/crypto/onramp/embedded.md#prepopulate-onramp)

顧客情報の事前入力やデフォルトの暗号資産の設定など、`OnrampSession` をカスタマイズします。

#### [コンバージョンの見積もりを設定する](https://docs.stripe.com/crypto/onramp/embedded.md#quotes)

Onramp Quotes API を使用すると、さまざまなネットワークで各種の暗号資産へのオンランプ換算の見積もりを取得できます。

#### [バックエンド導入のベストプラクティス](https://docs.stripe.com/crypto/onramp/embedded.md#use-case)

自社製品のユースケースに基づいて設定する、推奨の `OnrampSession` パラメーターを確認します。