# Rampe d'accès à la cryptomonnaie

# Configurer une intégration de rampe d’accès intégrable

Créez une intégration complète et fonctionnelle à la [rampe d’accès à la cryptomonnaie](https://docs.stripe.com/crypto/onramp.md) de Stripe avec votre clé API de test. Pour personnaliser l’apparence, accédez aux [paramètres d’adaptation à la marque](https://dashboard.stripe.com/account/branding) du Dashboard. Dans le Dashboard, assurez-vous d’avoir ajouté à la [liste blanche des domaines](https://dashboard.stripe.com/crypto-onramp/allowlist-domains) les domaines que vous utiliserez pour héberger la page de la rampe d’accès.

// 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": "^21.0.1"
  }
}
{
  "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": "21.0.1"
  },
  "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.0.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.0.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
~~~
### Installer la bibliothèque Node de Stripe

Installez le package et importez-le dans votre code. Si vous partez de zéro et qu’il vous faut un fichier package.json, vous pouvez également télécharger les fichiers du projet à l’aide du lien de téléchargement dans l’éditeur de code.

#### npm

Installez la bibliothèque&nbsp;:

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

#### GitHub

Vous pouvez sinon télécharger le code source de la bibliothèque Node de Stripe directement [depuis GitHub](https://github.com/stripe/stripe-node).

### Installer la bibliothèque Ruby de Stripe

Installez le gem Ruby de Stripe et exigez-le dans votre code. Si vous partez de zéro et avez besoin d’un Gemfile, téléchargez les fichiers du projet à l’aide du lien dans l’éditeur de code.

#### Terminal

Installez le gem&nbsp;:

```bash
gem install stripe
```

#### Bundler

Ajoutez cette ligne à votre Gemfile&nbsp;:

```bash
gem 'stripe'
```

#### GitHub

Vous pouvez sinon télécharger le code source du gem Ruby de Stripe directement [depuis GitHub](https://github.com/stripe/stripe-ruby).

### Installer la bibliothèque Java

Ajoutez la dépendance à votre build et importez la bibliothèque. Ou bien, si vous partez de zéro et avez besoin d’un exemple de fichier pom.xml (pour Maven), téléchargez les fichiers du projet à l’aide du lien de téléchargement dans l’éditeur de code.

#### Maven

Ajoutez la dépendance suivante à votre POM et remplacez {VERSION} par le numéro de version que vous souhaitez utiliser.

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

#### Gradle

Ajoutez la dépendance à votre fichier build.gradle et remplacez {VERSION} par le numéro de version que vous souhaitez utiliser.

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

#### GitHub

Téléchargez le fichier JAR directement [depuis GitHub](https://github.com/stripe/stripe-java/releases/latest).

### Installer le package Python de Stripe

Installez le package Stripe et importez-le dans votre code. Si vous partez de zéro et qu’il vous faut un fichier requirements.txt, téléchargez les fichiers du projet à l’aide du lien de téléchargement dans l’éditeur de code.

#### pip

Installez le package via pip&nbsp;:

```bash
pip3 install stripe
```

#### GitHub

Téléchargez le code source de la bibliothèque stripe-python directement [depuis GitHub](https://github.com/stripe/stripe-python).

### Installer la bibliothèque PHP

Installez la bibliothèque avec composer et initialisez-la avec votre clé API secrète. Si vous partez de zéro et que vous avez besoin d’un fichier composer.json, vous pouvez également télécharger les fichiers à l’aide du lien de téléchargement dans l’éditeur de code.

#### Composer

Installez la bibliothèque&nbsp;:

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

#### GitHub

Vous pouvez sinon télécharger le code source de la bibliothèque php de Stripe directement [depuis GitHub](https://github.com/stripe/stripe-php).

### Configurer votre serveur

Ajoutez la dépendance à votre build et importez la bibliothèque. Si vous partez de zéro et avez besoin d’un fichier go.mod, téléchargez les fichiers du projet à l’aide du lien de téléchargement dans l’éditeur de code.

#### Go

Veillez à initialiser avec des modules Go&nbsp;:

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

#### GitHub

Vous pouvez sinon télécharger le code source de la bibliothèque Go de Stripe directement [depuis GitHub](https://github.com/stripe/stripe-go).

### Installer la bibliothèque Stripe.net

Installez le package avec .NET ou NuGet. Si vous partez de zéro, vous pouvez également télécharger les fichiers qui contiennent un fichier .csproj configuré.

#### .NET

Installez la bibliothèque&nbsp;:

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

#### NuGet

Installez la bibliothèque&nbsp;:

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

#### GitHub

Vous pouvez sinon télécharger le code source de la bibliothèque .NET de Stripe directement [depuis GitHub](https://github.com/stripe/stripe-dotnet).

### Installer les bibliothèques Stripe

Installez les packages et importez-les dans votre code. Si vous partez de zéro et qu’il vous faut un fichier `package.json`, vous pouvez également télécharger les fichiers du projet à l’aide du lien de téléchargement dans l’éditeur de code.

Installez les bibliothèques&nbsp;:

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

### Créer une OnrampSession

Ajoutez un endpoint sur votre serveur qui crée un objet [OnrampSession](https://docs.stripe.com/api/crypto/onramp_sessions.md). L’objet `OnrampSession` suit le cycle de vie de la rampe d’accès du client, en conservant les détails de la commande et en s’assurant que le client n’est facturé qu’une seule fois. Renvoyez la *clé secrète du client* (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) de l’objet `OnrampSession` dans la réponse pour terminer le processus d’intégration de la rampe d’accès du client.

> Nos bibliothèques officielles ne prennent pas en charge de manière intégrée les endpoints de l’API, car l’API de la rampe d’accès est actuellement en version bêta limitée. Ce guide inclut une extension personnalisée des bibliothèques Stripe officielles pour créer des sessions de rampe d’accès. Vous pouvez les trouver dans l’exemple de code téléchargeable sur la droite.

### Ajouter Stripe à votre application React

Utilisez *Stripe.js* (Use Stripe.js’ APIs to tokenize customer information, collect sensitive card data, and accept payments with browser payment APIs) et le [SDK crypto de Stripe](https://www.npmjs.com/@stripe/crypto) pour rester *conforme à la norme 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). Le SDK crypto inclut les définitions de type TypeScript.

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

### Initialiser le SDK de cryptomonnaie Stripe

Appelez `loadStripeOnramp()` avec votre clé API publiable Stripe pour configurer la bibliothèque Stripe.

### Charger le SDK de cryptomonnaie Stripe

Utilisez *Stripe.js* (Use Stripe.js’ APIs to tokenize customer information, collect sensitive card data, and accept payments with browser payment APIs) et le [SDK crypto de Stripe](https://www.npmjs.com/package/@stripe/crypto) pour rester *conforme à la norme 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). Ces scripts doivent toujours être chargés directement depuis les domaines de Stripe (https://js.stripe.com et https://crypto-js.stripe.com) pour des raisons de compatibilité. N’incluez pas les scripts dans un paquet et n’en hébergez pas de copie vous-même. Dans le cas contraire, votre intégration pourrait cesser de fonctionner sans avertissement.

### Définir le conteneur de rampe d’accès

Ajoutez un espace réservé `div` vide à votre page pour héberger le widget de rampe d’accès. Stripe insère un iframe pour collecter en toute sécurité les informations de paiement du client et d’autres informations sensibles.

### Initialiser le SDK de cryptomonnaie Stripe

Initialisez le SDK de cryptomonnaie Stripe à l’aide de vos clés API publiables. Vous l’utiliserez pour récupérer l’objet `OnrampSession` et mener à bien la rampe d’accès sur le client.

### Récupérer une OnrampSession

Envoyez immédiatement une requête au endpoint sur votre serveur pour créer un nouvel objet `OnrampSession` dès que votre page est chargée. La *clé secrète du client* (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) renvoyée par votre endpoint est utilisée pour mener à bien la rampe d’accès.

### Définir Stripe Elements

Définissez des composants dans votre code pour simplifier l’accès de l’objet `StripeOnramp` et l’affichage du widget de rampe d’accès.

> Ces composants seront prochainement disponibles sous la forme d’un module ES similaire à `@stripe/react-stripe-js`.

### Initialiser Stripe Elements

Transmettez la promesse résultante de l’appel `loadStripeOnramp` au fournisseur Elements. Cela permet aux composants enfants d’accéder au service Stripe via le consommateur Elements.

### Ajouter le OnrampElement

Ajoutez un composant `OnrampElement` à votre page. Il intègre un iframe avec une interface utilisateur dynamique qui collecte les informations de commande, d’identité et de paiement nécessaires pour mener à bien l’achat et l’envoi de la cryptomonnaie.

> Utilisez les valeurs [fournies ici](https://docs.stripe.com/crypto/onramp/embedded.md#sandbox-values) pour effectuer une transaction sur la rampe dans un environnement de test**.

### Créer le OnrampElement

Créez une instance `OnrampSession` et montez-la dans le placeholder `<div>` de votre page. Elle intègre une iframe avec une interface dynamique qui recueille les détails de la commande, de l’identité et du paiement nécessaires pour compléter l’achat et la livraison de crypto-monnaie.

> Utilisez les valeurs [fournies ici](https://docs.stripe.com/crypto/onramp/embedded.md#sandbox-values) pour effectuer une transaction sur la rampe dans un environnement de test**.

## Optimiser votre intégration

Vous pouvez permettre à vos utilisateurs d’acheter en toute sécurité des cryptomonnaies directement depuis votre plateforme ou Dapp au moment du paiement. Suivez les étapes ci-dessous pour ajouter d’autres fonctionnalités.

### Styliser le widget de rampe d’accès

Personnalisez l’interface utilisateur de rampe d’accès depuis les [paramètres de marque](https://dashboard.stripe.com/settings/branding) du Dashboard. Utilisez les couleurs de votre entreprise pour assortir l’interface au reste de votre page de rampe d’accès.

### Mode sombre

Appliquez le mode sombre au widget de rampe d’accès à l’aide du paramètre `theme`.

### Configurer des rappels d’état OnrampSession

Initialisez des rappels pour créer une interface réactive à la fin d’une session de rampe d’accès. Par exemple, vous pouvez demander à l’utilisateur de reprendre son précédent parcours utilisateur ou de revenir à la destination prévue.

### Configurer des écouteurs d’état OnrampSession

Initialisez des écouteurs pour offrir une interface utilisateur réactive à la fin d’une session de rampe d’accès. Par exemple, vous pouvez demander à l’utilisateur de reprendre son précédent parcours utilisateur ou de revenir à la destination prévue.

## Prochaines étapes

#### [Personnaliser l’apparence](https://docs.stripe.com/crypto/onramp/embedded.md#customize-onramp)

Personnalisez l’apparence de la rampe d’accès.

#### [Pré-remplir les paramètres](https://docs.stripe.com/crypto/onramp/embedded.md#prepopulate-onramp)

Personnalisez le champ `OnrampSession`, par exemple en préremplissant les informations client et en définissant les cryptomonnaies par défaut.

#### [Configurer les devis de conversion](https://docs.stripe.com/crypto/onramp/embedded.md#quotes)

Utilisez l’API Onramp Quotes pour récupérer des devis estimatifs pour les conversions de la rampe d’accès dans diverses cryptomonnaies sur différents réseaux.

#### [Bonnes pratiques en matière d’intégration back-end](https://docs.stripe.com/crypto/onramp/embedded.md#use-case)

Passez en revue les paramètres `OnrampSession` suggérés à définir en fonction de votre produit.