# Fiat-zu-Krypto-Onramp # Eine einbettbare Onramp-Integration einrichten Erstellen Sie eine vollständige, funktionierende Stripe [Fiat-zu-Krypto-Onramp](https://docs.stripe.com/crypto/onramp.md)-Integration mit Ihrem Test-API-Schlüssel. Um das Erscheinungsbild anzupassen, gehen Sie zu den [Branding-Einstellungen](https://dashboard.stripe.com/account/branding) des Dashboards. Vergewissern Sie sich im Dashboard, dass Sie Domains zur [Domain-Zulassungsliste](https://dashboard.stripe.com/crypto-onramp/allowlist-domains) für die Domains hinzugefügt haben, die Sie zum Hosten der Onramp-Seite verwenden möchten. // 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('<>'); 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('<>') \# 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('<>') 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 = '<>'; "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("<>") // 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("<>")); 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("<>"); 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("<>"); 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.`); }, []); {clientSecret && ( )} // 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 ( {children} ); }; // 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
; };
const stripeOnramp = StripeOnramp("<>"); // 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 ~~~ ### Stripe Node-Bibliothek installieren Installieren Sie das Paket und importieren Sie es in Ihren Code. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine package.json-Datei benötigen, laden Sie die Projektdateien über den Download-Link im Code-Editor herunter. #### npm Bibliothek installieren: ```bash npm install --save stripe ``` #### GitHub Oder laden Sie den Quellcode der Stripe-Node-Bibliothek direkt von [GitHub](https://github.com/stripe/stripe-node) herunter. ### Stripe-Ruby-Bibliothek installieren Installieren Sie Stripe Ruby Gem und fordern Sie es in Ihrem Code an. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine Gemfile benötigen, laden Sie die Projektdateien über den Download-Link im Code-Editor herunter. #### Terminal Gem installieren: ```bash gem install stripe ``` #### Bundler Fügen Sie diese Zeile in Ihre Gemfile ein: ```bash gem 'stripe' ``` #### GitHub Oder laden Sie den Quellcode von Stripe Ruby Gem direkt von [GitHub](https://github.com/stripe/stripe-ruby) herunter. ### Stripe Java-Bibliothek installieren Fügen Sie Ihrem Build die Abhängigkeit hinzu und importieren Sie die Bibliothek. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine pom.xml-Beispieldatei (für Maven) benötigen, laden Sie die Projektdateien über den Download-Link im Code-Editor herunter. #### Maven Fügen Sie folgende Abhängigkeit zu Ihrer POM-Datei hinzu und ersetzen Sie {VERSION} durch die Versionsnummer, die Sie verwenden möchten. ```bash \ncom.stripe\nstripe-java\n{VERSION}\n ``` #### Gradle Fügen Sie die Abhängigkeit zu Ihrer build.gradle-Datei hinzu und ersetzen Sie {VERSION} durch die Versionsnummer, die Sie verwenden möchten. ```bash implementation "com.stripe:stripe-java:{VERSION}" ``` #### GitHub Laden Sie die JAR-Datei direkt von [GitHub](https://github.com/stripe/stripe-java/releases/latest) herunter. ### Stripe-Python-Paket installieren Installieren Sie das Stripe-Paket und importieren Sie es in Ihren Code. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine requirements.txt-Datei benötigen, laden Sie die Projektdateien über den Download-Link im Code-Editor herunter. #### pip Installieren Sie das Paket über pip: ```bash pip3 install stripe ``` #### GitHub Laden Sie den Quellcode der Stripe-Python-Bibliothek direkt [von GitHub](https://github.com/stripe/stripe-python) herunter. ### Stripe PHP-Bibliothek installieren Installieren Sie die Bibliothek mit Composer und initialisieren Sie sie mit Ihrem geheimen API-Schlüssel. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine composer.csproj-Datei benötigen, laden Sie die Dateien über den Download-Link im Code-Editor herunter. #### Composer Bibliothek installieren: ```bash composer require stripe/stripe-php ``` #### GitHub Oder laden Sie den Quellcode der Stripe-PHP-Bibliothek direkt von [GitHub](https://github.com/stripe/stripe-php) herunter. ### Server einrichten Fügen Sie Ihrem Build die Abhängigkeit hinzu und importieren Sie die Bibliothek. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine go.mod-Datei benötigen, laden Sie die Projektdateien über den Download-Link im Code-Editor herunter. #### Go Nutzen Sie für die Initialisierung Go-Module: ```bash go get -u github.com/stripe/stripe-go/v85 ``` #### GitHub Oder laden Sie den Quellcode des Stripe-Go-Moduls direkt von [GitHub](https://github.com/stripe/stripe-go) herunter. ### Stripe.net-Bibliothek installieren Installieren Sie das Paket mit .NET oder NuGet. Wenn Sie aber von Grund auf neu beginnen möchten, laden Sie die Dateien herunter, die eine konfigurierte .csproj-Datei enthalten. #### dotnet Bibliothek installieren: ```bash dotnet add package Stripe.net ``` #### NuGet Bibliothek installieren: ```bash Install-Package Stripe.net ``` #### GitHub Oder laden Sie den Quellcode der Stripe.net-Bibliothek direkt von [GitHub](https://github.com/stripe/stripe-dotnet) herunter. ### Stripe-Bibliotheken installieren Installieren Sie die Pakete und importieren Sie sie in Ihren Code. Wenn Sie dagegen von Grund auf neu beginnen möchten und eine `package.json`-Datei benötigen, laden Sie die Projektdateien über den Download-Link im Code-Editor herunter. Bibliotheken installieren: ```bash npm install --save stripe @stripe/stripe-js next ``` ### OnrampSession erstellen Fügen Sie auf Ihrem Server einen Endpoint hinzu, der ein [OnrampSession](https://docs.stripe.com/api/crypto/onramp_sessions.md)-Objekt erstellt. Ein `OnrampSession`-Objekt verfolgt den Onramp-Lebenszyklus der Kundin/des Kunden, verfolgt die Bestelldetails und stellt sicher, dass das Kundenkonto nur einmal belastet wird. Geben Sie das *Client-Geheimnis* (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) des `OnrampSession`-Objekts in der Antwort zurück, um den Onramp auf dem Client zu beenden. > Unsere offiziellen Bibliotheken enthalten keine integrierte Unterstützung für die API-Endpoints, da sich die Onramp API in der begrenzten Betaphase befindet. Dieser Leitfaden enthält eine nutzerdefinierte Erweiterung der offiziellen Stripe-Bibliotheken zum Minting von Onramp-Sitzungen. Sie finden diese im herunterladbaren Beispielcode auf der rechten Seite. ### Stripe zur React-App hinzufügen Verwenden Sie das *Stripe.js* (Use Stripe.js’ APIs to tokenize customer information, collect sensitive card data, and accept payments with browser payment APIs) und das [Stripe-Krypto-SDK](https://www.npmjs.com/@stripe/crypto), um die *PCI-konform* aufrechtzuerhalten. Das Krypto-SDK enthält Definitionen des Typescript-Typs. ```bash npm install --save @stripe/crypto @stripe/stripe-js ``` ### Stripe Krypto SDK Rufen Sie `loadStripeOnramp()` mit Ihrem veröffentlichbaren Stripe-API-Schlüssel auf, um die Stripe-Bibliothek zu konfigurieren. ### Stripe Krypto SDK laden Verwenden Sie *Stripe.js* (Use Stripe.js’ APIs to tokenize customer information, collect sensitive card data, and accept payments with browser payment APIs) und das [Stripe-Krypto-SDK](https://www.npmjs.com/package/@stripe/crypto), um die Konformität mit *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). aufrechtzuerhalten. Diese Skripts müssen aus Kompatibilitätsgründen immer direkt von den Stripe-Domänen https://js.stripe.com und https://crypto-js.stripe.com geladen werden. Binden Sie die Skripts nicht in ein Paket ein und hosten Sie selbst keine Kopie davon. Andernfalls könnte Ihre Integration ohne Warnung unterbrochen werden. ### Onramp-Container definieren Fügen Sie einen leeren Platzhalter `div` zu Ihrer Seite hinzu, um das Onramp-Widget zu hosten. Stripe fügt einen iFrame ein, um die Zahlungen der Kund/innen und andere sensible Informationen sicher zu erfassen. ### Stripe Krypto SDK initialisieren Initialisieren Sie das Stripe Crypto SDK mit Ihren veröffentlichbaren API-Schlüsseln. Sie verwenden es, um das `OnrampSession`-Objekt abzurufen und den Onramp auf dem Client abzuschließen. ### Eine OnrampSession abrufen Stellen Sie sofort eine Anfrage an den Endpoint auf Ihrem Server, um ein neues `OnrampSession`-Objekt zu erstellen, sobald Ihre Seite geladen wird. Das von Ihrem Endpoint zurückgegebene *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) wird verwenden, um den Onramp abzuschließen. ### Stripe Elements definieren Definieren Sie Komponenten in Ihrem Code, um den Zugriff auf das `StripeOnramp`-Objekt und das Rendering des Onramp-Widgets zu vereinfachen. > Diese Komponenten werden in Zukunft als ES-Modul ähnlich wie `@stripe/react-stripe-js` veröffentlicht. ### Stripe Elements initialisieren Übergeben Sie das resultierende Promise aus dem `loadStripeOnramp`-Aufruf an den Elements-Anbieter. Dadurch können die untergeordneten Komponenten über „ElementsConsumer“ auf den Stripe-Dienst zugreifen. ### OnrampElement hinzufügen Fügen Sie eine `OnrampElement`-Komponente zu Ihrer Seite hinzu. Sie bettet einen iFrame mit einer dynamischen Nutzeroberfläche ein, die die notwendigen Bestell-, Identitäts- und Zahlungsdetails erfasst, um den Kauf und die Lieferung von Kryptowährungen abzuschließen. > Verwenden Sie die [hier bereitgestellten Werte](https://docs.stripe.com/crypto/onramp/embedded.md#sandbox-values), um eine Onramp-Transaktion in der *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) abzuschließen. ### OnrampElement erstellen Erstellen Sie eine `OnrampSession`-Instanz und verbinden Sie sie mit dem Platzhalter `
` auf Ihrer Seite. Dadurch wird ein iFrame mit einer dynamischen Nutzeroberfläche eingebettet, die die notwendigen Bestell-, Identitäts- und Zahlungsdetails erfasst, um den Kauf und die Lieferung von Kryptowährungen abzuschließen. > Verwenden Sie die [hier bereitgestellten Werte](https://docs.stripe.com/crypto/onramp/embedded.md#sandbox-values), um eine Onramp-Transaktion in der *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) abzuschließen. ## Ihre Integration verbessern Sie können Nutzer/innen jetzt den sicheren Kauf von Kryptowährungen direkt von Ihrer Plattform oder Dapp beim Bezahlvorgang ermöglichen. Fahren Sie mit den folgenden Schritten fort, um weitere Funktionen hinzuzufügen. ### Onramp-Widget gestalten Passen Sie die Onramp-Nutzeroberfläche mit den [Markeneinstellungen](https://dashboard.stripe.com/settings/branding) in Ihrem Dashboard an. Verwenden Sie das Farbschema Ihres Unternehmens, um es mit dem Rest Ihrer Onramp-Seite abzugleichen. ### Dunkelmodus Wenden Sie mit dem Parameter `theme` den dunklen Modus auf das Onramp-Widget an. ### Status-Rückrufe für OnrampSession einrichten Initialisieren Sie Rückrufe, um nach Abschluss einer Onramp-Sitzung eine responsive Oberfläche zu erstellen. Sie können Nutzer/innen beispielsweise anweisen, ihre vorherige Aufgabe fortzusetzen oder an ihr vorgesehenes Ziel zurückzukehren. ### Status-Listener für OnrampSession einrichten Initialisieren Sie Listener, um nach Abschluss einer Onramp-Sitzung eine responsive Nutzeroberfläche bereitzustellen. Sie können Nutzer/innen beispielsweise anweisen, ihre vorherige Aufgabe fortzusetzen oder an ihr vorgesehenes Ziel zurückzukehren. ## Nächste Schritte #### [Erscheinungsbild anpassen](https://docs.stripe.com/crypto/onramp/embedded.md#customize-onramp) Das Erscheinungsbild des Onramp anpassen. #### [Parameter vorab ausfüllen](https://docs.stripe.com/crypto/onramp/embedded.md#prepopulate-onramp) Passen Sie die `OnrampSession` an, zum Beispiel indem Sie Kundeninformationen vorab ausfüllen und Standardkryptowährungen festlegen. #### [Konversionsangebote konfigurieren](https://docs.stripe.com/crypto/onramp/embedded.md#quotes) Verwenden Sie die Onramp Quotes API, um geschätzte Angebote für Onramp-Konvertierungen in unterschiedliche Kryptowährungen in verschiedenen Netzwerken abzurufen. #### [Best Practices für die Backend-Integration](https://docs.stripe.com/crypto/onramp/embedded.md#use-case) Prüfen Sie die vorgeschlagenen `OnrampSession`-Parameter, die Sie je nach Use case Ihres Produkts festlegen sollten.