Configurer une intégration de rampe d'accès intégrableVersion bêta publique

Comment personnaliser entièrement la rampe d'accès intégrable.

Pour intégrer le SDK de la rampe d’accès :

Installez le SDK et la bibliothèque client.
Générez une session de rampe d’accès à la cryptomonnaie sur votre back-end.
Affichez l’interface utilisateur de la rampe d’accès sur votre site Web.
Consultez l’utilisation de votre intégration dans le Dashboard Stripe.

Installez le SDK et la bibliothèque client
côté client
côté serveur

Côté client

Incluez les scripts suivants à l’aide de balises de script dans l’élément <head> de votre HTML. Ces scripts doivent toujours se charger directement depuis les domaines de Stripe (https://js.stripe.com and https://crypto-js.stripe.com) à des fins de compatibilité et de conformité PCI. Vous ne devez pas inclure le script dans un bundle ni en héberger de copie. Dans le cas contraire, votre intégration pourrait s’interrompre sans avertissement préalable.

onramp.html
<head>
  <title>Onramp</title>
  <script src="https://js.stripe.com/v3/"></script>
  <script src="https://crypto-js.stripe.com/crypto-onramp-outer.js"></script>
</head>

Utiliser le SDK Onramp JS en tant que module

Utilisez le package npm pour charger le SDK Onramp JS en tant que module ES. Le package inclut des définitions de type Typescript.

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

Côté serveur

Nos bibliothèques officielles ne prennent pas en charge les endpoints de l’API de manière intégrée, car l’API Onramp est actuellement en version bêta limitée. Par conséquent, nos exemples utilisent curl pour les interactions avec le back-end.

Générer une session de rampe d'accès à la cryptomonnaie
côté serveur

Générez une session de rampe d’accès à la cryptomonnaie en exécutant la commande curl suivante sur votre terminal :

Command Line
curl -X POST https://api.stripe.com/v1/crypto/onramp_sessions \
  -usk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "wallet_addresses[ethereum]"="0xB00F0759DbeeF5E543Cc3E3B07A6442F5f3928a2"
  # add as many parameters as you'd like

Vous recevez une réponse semblable à ce qui suit :

{
  "id": "cos_0MYfrA589O8KAxCGEDdIVYy3",
  "object": "crypto.onramp_session",
  "client_secret": "cos_0MYfrA589O8KAxCGEDdIVYy3_secret_rnpnWaxQbYQOvp6nVMvEeczx300NRU4hErZ",
  "created": 1675732824,
  "livemode": false,
  "status": "initialized",
  "transaction_details": {
    "destination_currency": null,
    "destination_amount": null,
    "destination_network": null,
    "fees": null,
    "lock_wallet_address": false,
    "source_currency": null,
    "source_amount": null,
    "destination_currencies": [
      "btc",
      "eth",
      "sol",
      "usdc"
    ],
    "destination_networks": [
      "bitcoin",
      "ethereum",
      "solana"
    ],
    "transaction_id": null,
    "wallet_address": null,
    "wallet_addresses": {
      "bitcoin": null,
      "ethereum": "0xB00F0759DbeeF5E543Cc3E3B07A6442F5f3928a2",
      "polygon": null,
      "solana": null
    }
  }
}

Consultez la documentation de l’API Onramp pour obtenir la liste complète des paramètres que vous pouvez transmettre lors de la création d’une session.

Afficher l'interface utilisateur de la rampe d'accès
côté client

Importez les bundles StripeJS et OnrampJS :

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Crypto Onramp</title>
    <meta name="description" content="A demo of the hosted onramp" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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="onramp-element" />
  </body>
</html>

Utilisez le client_secret issu de votre appel côté serveur de l’étape précédente pour initier et monter la session de rampe d’accès :

onramp.js
const stripeOnramp = StripeOnramp("pk_test_TYooMQauvdEDq54NiTphI7jx"
);
initialize();
// Initialize the onramp element with a client secret
function initialize() {
  // IMPORTANT: replace the following with your logic of how to mint/retrieve the client secret
  const clientSecret = "cos_1Lb6vsAY1pjOSNXVWF3nUtkV_secret_8fuPvTzBaxj3XRh14C6tqvdl600rpW7hG4G";
  const onrampSession = stripeOnramp.createSession({clientSecret});
  onrampSession
    .mount("#onramp-element");
}

Après l’exécution du script, la rampe d’accès restitue le dialogue qui suit :

Intégration de la rampe d’accès à la cryptomonnaie de Stripe dans une application tierce

Valeurs d’environnement de test

Avertissement

Les montants des transactions des environnements de test sont remplacés par nos limites prédéterminées.

Utilisez les valeurs suivantes pour effectuer une transaction de rampe d’accès dans un environnement de test :

Sur l’écran OTP, utilisez 000000 comme code de vérification.
Sur l’écran des informations personnelles, utilisez 000000000 pour le numéro de sécurité sociale et address_full_match pour la ligne d’adresse 1.
Sur l’écran des données de paiement, utilisez le numéro de carte de test 4242424242424242.

Consulter l'utilisation de l'intégration

Après avoir lancé la rampe d’accès, vous pouvez consulter des rapports sur l’utilisation personnalisés dans le Dashboard Stripe. Vous pouvez également revenir à la page d’inscription pour mettre à jour les domaines dans lesquels vous prévoyez d’héberger la rampe d’accès et consulter l’état des tâches d’inscription.