# 法币兑加密货币入金

# Set up an embeddable onramp integration 

Build a full, working Stripe [fiat-to-crypto onramp](https://docs.stripe.com/crypto/onramp.md) integration with your test API key. To customize the look and feel, go to the [branding settings](https://dashboard.stripe.com/account/branding) of the Dashboard. In the Dashboard, make sure you’ve added domains to the [domain allowlist](https://dashboard.stripe.com/crypto-onramp/allowlist-domains) for the domains you’ll use to host the onramp page.

// 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");
// Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
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.
\# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')
  \# Create an OnrampSession with amount and currency
  response = client.raw_request(
    :post,
    '/v1/crypto/onramp_sessions',
    params: {
      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
    }
  )
  onramp_session = response.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.
\# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = stripe.StripeClient('<<YOUR_SECRET_KEY>>')
    try:
        data = json.loads(request.data)
        \# Create an OnrampSession with the order amount and currency
        response = client.raw_request(
          "post",
          "/v1/crypto/onramp_sessions",
          params={
            "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,
          })
        onramp_session = response.data

        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,
    ];
// Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
$stripeSecretKey = '<<YOUR_SECRET_KEY>>';
  "github.com/stripe/stripe-go/v85"
  // 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.
  // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
  sc := stripe.NewClient("<<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(sc, 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.
      // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
      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.
    // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
    StripeClient client = new StripeClient("<<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 = client.v1().crypto().onrampSessions().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/dahlia/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": "^22.2.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": "22.2.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/v85 v85.2.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==15.2.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 文件，请用代码编辑器中的 Download 链接来下载项目文件。

#### npm

安装库：

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

#### GitHub

也可以直接[从 GitHub](https://github.com/stripe/stripe-node) 下载 stripe-node 库源代码。

### 安装 Stripe Ruby 库

安装 Stripe ruby gem，并在代码中要求使用它。或者，如果您要从头开始且需要 Gemfile 的话，请用代码编辑器中的链接来下载项目文件。

#### Terminal

安装 gem：

```bash
gem install stripe
```

#### Bundler

将这一行添加到您的 Gemfile：

```bash
gem 'stripe'
```

#### GitHub

也可直接[从 GitHub](https://github.com/stripe/stripe-ruby) 下载 stripe-ruby gem 源代码。

### 安装 Stripe Java 库

将依赖项添加到您的版本并导入库。或者，如果您要从头开始且需要 pom.xml 样本文件 (Maven) 的话，可以用代码编辑器中的 Download 链接来下载项目文件。

#### 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

直接[从 GitHub](https://github.com/stripe/stripe-java/releases/latest) 下载 JAR。

### 安装 Stripe Python 软件包

安装 Stripe 软件包并将它导入到您的代码。或者，如果您要从头开始且需要 requirements.txt 文件的话，可以用代码编辑器中的 Download 链接来下载项目文件。

#### pip

通过 pip 安装软件包：

```bash
pip3 install stripe
```

#### GitHub

直接[从 GitHub](https://github.com/stripe/stripe-python) 下载 stripe-python 库的源代码。

### 安装 Stripe PHP 库

用 composer 安装库，并用您的秘密 API 密钥初始化。或者，如果您要从头开始且需要 composer.json 文件的话，可以用代码编辑器中的 Download 链接来下载文件。

#### Composer

安装库：

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

#### GitHub

也可以直接[从 GitHub](https://github.com/stripe/stripe-php) 下载 stripe-php 库源代码。

### 设置您的服务器

将依赖项添加到您的版本并导入库。或者，如果您要从头开始且需要 go.mod 文件的话，可以用代码编辑器中的 Download 链接来下载项目文件。

#### Go

请务必用 Go 模块进行初始化：

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

#### GitHub

也可以直接[从 GitHub](https://github.com/stripe/stripe-go) 下载 stripe-go 模块源代码。

### 安装 Stripe.net 库

使用 .NET 或 NuGet 安装软件包。或者，如果您要从头开始，请下载包含已配置的 .csproj 文件的文件。

#### dotnet

安装库：

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

#### NuGet

安装库：

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

#### GitHub

也可以直接[从 GitHub](https://github.com/stripe/stripe-dotnet) 下载 Stripe.net 库源代码。

### 安装 Stripe 库

安装软件包并将其导入到您的代码中。或者，如果您要从头开始且需要 `package.json` 文件，请用代码编辑器中的链接来下载项目文件。

安装库：

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

### Create a OnrampSession

Add an endpoint on your server that creates an [OnrampSession](https://docs.stripe.com/api/crypto/onramp_sessions.md) 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* (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) in the response to finish the onramp on the client.

> Our official libraries don’t contain built-in support for the API endpoints because the onramp API is in limited beta. This guide includes custom extension to the official Stripe libraries for minting onramp sessions. You can find them in the downloadable sample code on the right.

### 将 Stripe 添加到您的 React 应用

Use the *Stripe.js* (Use Stripe.js’ APIs to tokenize customer information, collect sensitive card data, and accept payments with browser payment APIs) and the [Stripe crypto SDK](https://www.npmjs.com/@stripe/crypto) to remain *PCI compliant* (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). The crypto SDK includes Typescript type definitions.

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

### Initialize the Stripe crypto SDK

Call `loadStripeOnramp()` with your Stripe publishable API key to configure the Stripe library.

### Load Stripe Crypto SDK

Use *Stripe.js* (Use Stripe.js’ APIs to tokenize customer information, collect sensitive card data, and accept payments with browser payment APIs) and the [Stripe crypto SDK](https://www.npmjs.com/package/@stripe/crypto) to remain *PCI compliant* (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). 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.

### Define the onramp container

Add one empty placeholder `div` to your page to host the onramp widget. Stripe inserts an iframe to securely collect the customer’s payment and other sensitive information.

### Initialize Stripe crypto SDK

Initialize Stripe crypto SDK with your publishable API keys. You’ll use it to retrieve the `OnrampSession` object and complete the onramp on the client.

### Fetch an OnrampSession

Immediately make a request to the endpoint on your server to create a new `OnrampSession` object as soon as your page loads. The *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) returned by your endpoint is used to complete the onramp.

### Define Stripe Elements

Define components in your code to simplify the access of the `StripeOnramp` object and rendering of the onramp widget.

> These components will be released as an ES module in the future similar to `@stripe/react-stripe-js`.

### 初始化 Stripe Elements

Pass the resulting promise from the `loadStripeOnramp` call to the Elements provider. This allows the child components to access the Stripe service through the Elements consumer.

### Add the OnrampElement

Add an `OnrampElement` component to your page. It embeds an iframe with a dynamic UI that collects necessary order, identity, and payment details to complete the purchase and delivery of crypto.

> Use the [values provided here](https://docs.stripe.com/crypto/onramp/embedded.md#sandbox-values) to complete an onramp transaction in *sandbox* (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).

### Create the OnrampElement

Create an `OnrampSession` instance and mount it to the placeholder `<div>` on your page. It embeds an iframe with a dynamic UI that collects necessary order, identity, and payment details to complete the purchase and delivery of crypto.

> Use the [values provided here](https://docs.stripe.com/crypto/onramp/embedded.md#sandbox-values) to complete an onramp transaction in *sandbox* (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).

## 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

Customize the Onramp UI with [brand settings](https://dashboard.stripe.com/settings/branding) in your dashboard. Use your company’s color scheme to make it match with the rest of your onramp page.

### 暗色模式

Apply dark mode to the onramp widget with the `theme` parameter.

### Set up OnrampSession state callbacks

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

### 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.

## 后续步骤

#### [Customize appearance](https://docs.stripe.com/crypto/onramp/embedded.md#customize-onramp)

Customize the appearance of the onramp.

#### [Pre-populate parameters](https://docs.stripe.com/crypto/onramp/embedded.md#prepopulate-onramp)

Customze the `OnrampSession`, such as pre-populating customer information and setting default cryptocurrencies.

#### [Configure conversion quotes](https://docs.stripe.com/crypto/onramp/embedded.md#quotes)

Use the Onramp Quotes API to fetch estimated quotes for onramp conversions into various cryptocurrencies on different networks.

#### [Back-end integration best practices](https://docs.stripe.com/crypto/onramp/embedded.md#use-case)

Review the suggested `OnrampSession` parameters to set based on your product use case.