# Stablecoin-Zahlungen annehmen Beginnen Sie mit der Annahme von Stablecoins, indem Sie die Zahlungsmethode „Krypto“ aktivieren. Sie können Zahlungen mit *Stablecoins* (A cryptocurrency that's pegged to the value of a fiat currency or other asset in order to limit volatility) über *Payment Links* (A link to a secure, hosted payment page that you can generate without code. Share it directly with your customers, or point them to it with a button or QR code), *, Checkout* (A low-code payment integration that creates a customizable form for collecting payments. You can embed Checkout directly in your website, redirect customers to a Stripe-hosted payment page, or create a customized checkout page with Stripe Elements), *,* (A set of UI components for building a web checkout flow. They adapt to your customer's locale, validate input, and use tokenization, keeping sensitive customer data from touching your server)Elements** oder die *Payment Intents APII* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) akzeptieren. Bei Zahlungen mit Stablecoins wie USDC werden Kundinnen und Kunden zu **crypto.stripe.com** weitergeleitet, um ihre Krypto-Wallet zu verbinden und die Transaktion abzuschließen. Die Gelder werden in USD auf Ihrem Stripe-Saldo gutgeschrieben. ## Before you begin > Ihre Kundinnen und Kunden können Stablecoins weltweit zur Zahlung verwenden, doch derzeit können nur Unternehmen in den USA können Zahlungen mit Stablecoin akzeptieren. So akzeptieren Sie Stablecoin-Zahlungen: 1. Stellen Sie sicher, dass Sie [Ihr Stripe-Konto eingerichtet](https://docs.stripe.com/get-started/account/set-up.md) haben. 1. Gehen Sie zu Ihren Einstellungen der [Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) im Dashboard und fordern Sie die Zahlungsmethode **Stablecoins und Krypto** an. 1. Stripe prüft Ihre Anfrage und kann Sie bei Bedarf für weitere Informationen kontaktieren. Die Zahlungsmethode wird während der Überprüfung als **ausstehend** angezeigt. 1. Nachdem wir Ihre Anfrage genehmigt haben, wird **Stablecoins und Krypto** im Dashboard aktiv. ## Verwendung mit dynamischen Zahlungsmethoden (Recommended) Wenn Sie die standardmäßigen [dynamischen Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) von Stripe mit Payment Links, Hosted Checkout, Embedded Checkout Forms oder Elements verwenden, sind keine weiteren Aktualisierungen erforderlich. Stripe zeigt berechtigten Kundinnen und Kunden automatisch Stablecoin-Zahlungsoptionen an. ## Verwendung mit einer benutzerdefinierten Integration Falls erforderlich, können Sie die Krypto-Zahlungsmethode manuell in Ihre Zahlungsintegration aufnehmen. # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/accept-stablecoin-payments?payment-ui=checkout. Führen Sie bei der Erstellung einer neuen [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions.md) folgende Schritte aus: 1. Fügen Sie `crypto` zur Liste der `payment_method_types` hinzu. 1. Stellen Sie sicher, dass für alle `line_items` `usd` verwendet wird. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u <>: \ -d mode=payment \ -d "payment_method_types[0]"=crypto \ -d "line_items[0][price_data][currency]"=usd \ -d "line_items[0][price_data][product_data][name]"=T-shirt \ -d "line_items[0][price_data][unit_amount]"=2000 \ -d "line_items[0][quantity]"=1 \ --data-urlencode success_url="https://example.com/success" ``` ## Ihre Integration testen Testen Sie die Integration Ihrer Kryptozahlung, indem Sie die Weiterleitungsseite der Zahlung mit Ihren Test-API-Schlüsseln öffnen. Sie können einen erfolgreichen Zahlungsablauf kostenlos mit [Testnet-Assets](https://docs.stripe.com/payments/accept-stablecoin-payments.md#testnet-assets) testen. 1. Erstellen Sie in einer *Sandbox* eine neue Transaktion mit der von Ihnen gewählten Integrationsmethode und öffnen Sie die entsprechende Weiterleitungs-URL. 1. Verbinden Sie Ihre bevorzugte Wallet und Ihr bevorzugtes Zahlungsnetzwerk. 1. Schließen Sie die Zahlung ab und bestätigen Sie, dass Sie an die erwartete URL weitergeleitet werden. ### Zahlungen mit Testnet-Assets testen Die meisten Kryptowährungen bieten Testnet-Assets oder -Token ohne Geldwert an, die Sie zum Testen von Blockchain-Transaktionen verwenden können. Stripe empfiehlt die MetaMask-Wallet, das Polygon Amoy Testnet und den Circle-Faucet zum Testen, aber Sie können Ihre eigenen bevorzugten Dienste verwenden. #### Wallet installieren 1. [Laden Sie die MetaMask-Erweiterung](https://metamask.io/download) für Ihren Webbrowser herunter. 1. [Erstellen Sie eine neue Wallet](https://support.metamask.io/start/creating-a-new-wallet/) oder [importieren Sie eine bestehende](https://support.metamask.io/start/use-an-existing-wallet/). #### Testnet aktivieren 1. Wählen Sie in Ihrer MetaMask-Wallet im Hauptmenü **Netzwerke** aus. 1. Klicken Sie auf **Benutzerdefiniertes Netzwerk hinzufügen**. 1. Geben Sie die folgenden Details ein: - **Netzwerkname**: `Amoy` - **Standard-RPC-URL**: `https://rpc-amoy.polygon.technology/` - **Ketten-ID**: `80002` - **Währungssymbol**: `POL` - **Explorer-URL blockieren**: `https://amoy.polygonscan.com/` 1. Klicken Sie auf **Speichern**. #### Token importieren 1. Wählen Sie in Ihrer MetaMask-Wallet unter **Token** die Option **Amoy** aus dem Netzwerk-Dropdown-Menü aus. 1. Klicken Sie auf das Überlaufmenü (⋯) und wählen Sie **Token importieren** aus. 1. Klicken Sie auf **Netzwerk auswählen** > **Amoy**. 1. Fügen Sie unter **Token Vertragsadresse** die Testnet-Vertragsadresse für Polygon Amoy ein: ``` 0x41E94Eb019C0762f9Bfcf9Fb1E58725BfB0e7582 ``` Das Feld **Tokensymbol** wird automatisch mit `USDC` und das Feld **Dezimalstellen** mit `6` aktualisiert. 1. Klicken Sie auf **Weiter**. 1. Verifizieren Sie, dass Sie den `USDC`-Token importieren, und klicken Sie dann auf **Importieren**. Ihre MetaMask-Wallet zeigt jetzt **POL** und **USDC** in der Tokenliste an. Beim Testen von Rückerstattungen kann es vorkommen, dass der an Ihre Wallet gesendete Token einen anderen Vertrag hat als derjenige, der für die Zahlung verwendet wurde. Wir empfehlen Ihnen, den [transaction_hash](https://docs.stripe.com/api/refunds/object.md?rds=1#refund_object-destination_details-crypto-reference) Ihrer Rückerstattung im Block Explorer zu überprüfen und den Vertrag dieses Tokens zu Ihrer Wallet hinzuzufügen. Beispielsweise könnte für Sepolia ETH-USDC-Rückerstattungen die Token-Vertragsadresse `0x58277ebcabbe2a6694fbca8daf9e23163dbacf3e` angezeigt werden. #### Testnet-Assets abrufen > Um einige Testnet-Faucets zu verwenden, müssen Sie möglicherweise eine kleine Menge an Mainnet-Token halten. 1. Öffnen Sie [faucet.circle.com](https://faucet.circle.com/) 1. Klicken Sie auf **USDC**. 1. Wählen Sie unter **Netzwerk** **Polygon POS Amoy** aus. 1. Fügen Sie unter **Senden an** Ihre Wallet Adresse ein. 1. Klicken Sie auf **20 USDC senden**. Zusätzlich zu USDC für Zahlungen benötigen Sie POL, um Transaktionskosten zu bezahlen: 1. Öffnen Sie [faucet.polygon.technology](https://faucet.polygon.technology/). 1. Wählen Sie unter **Kette und Token auswählen** **Polygon Amoy** und **POL** aus. 1. Klicken Sie unter **Ihre Identität verifizieren** auf die Drittanbieterplattform, bei der Sie sich authentifizieren möchten, und schließen Sie den Anmeldeprozess ab. 1. Fügen Sie unter **Wallet-Adresse eingeben** Ihre Wallet-Adresse ein. 1. Klicken Sie auf **Anspruch**. Die Durchführung von Testnet-Transaktionen kann einige Minuten dauern. Überprüfen Sie Ihre Wallet, um zu bestätigen, dass die Überweisungen von USDC und POL durchgeführt wurden. ### Weitere Testnet-Faucets Weitere Optionen zum Testen von Token finden Sie in diesen Faucet-Diensten: - [Paxos USDP](https://faucet.paxos.com/) - [Devnet SOL](https://faucet.solana.com/) - [Sepolia ETH](https://faucets.chain.link/sepolia) - [Amoy POL](https://faucet.polygon.technology/) # Checkout Sessions API > This is a Checkout Sessions API for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/accept-stablecoin-payments?payment-ui=elements&api-integration=checkout. Informationen dazu, welche API den Anforderungen Ihres Unternehmens entspricht, finden Sie im [Vergleichsleitfaden](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Verwenden Sie das [Payment Element](https://docs.stripe.com/payments/payment-element.md), um ein nutzerdefiniertes Stripe-Zahlungsformular in Ihre Website oder Anwendung einzubetten und Kundinnen und Kunden Zahlungsmethoden anzubieten. Erweiterte Konfigurationen und Anpassungen finden Sie im Integrationsleitfaden für die [Zahlungsannahme](https://docs.stripe.com/payments/accept-a-payment.md) Betten Sie ein benutzerdefiniertes Zahlungsformular in Ihre Website oder Anwendung mit dem [Payment Element](https://docs.stripe.com/payments/payment-element.md) ein. Das Payment Element unterstützt automatisch Krypto und andere Zahlungsmethoden. Für weitere Konfigurations- und Anpassungsoptionen siehe [Eine Zahlung akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout). ## Server einrichten [Serverseitig] Verwenden Sie die offiziellen Bibliotheken von Stripe, um von Ihrer Anwendung aus auf die API zuzugreifen. #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Checkout-Sitzung erstellen [Serverseitig] Fügen Sie einen Endpoint auf Ihrem Server hinzu, der eine [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions/create.md) erstellt und sein [Client-Geheimnis](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) an Ihr Frontend zurückgibt. Eine Checkout-Sitzung stellt die Sitzung Ihres Kunden/Ihrer Kundin dar, während er/sie per Checkout für einmalige Käufe oder Abonnements bezahlt. Checkout-Sitzungen laufen 24 Stunden nach Erstellung ab. Wir empfehlen die Verwendung [dynamischer Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), um allen Kundinnen und Kunden dynamisch die relevantesten infrage kommenden Zahlungsmethoden anzuzeigen und die Konversionsrate zu maximieren. Sie können [Zahlungsmethoden auch manuell auflisten](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually), wodurch dynamische Zahlungsmethoden deaktiviert werden. #### Zahlungsmethoden über das Dashboard verwalten #### TypeScript ```javascript import express, {Express} from 'express'; const app: Express = express(); app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => { const session = await stripe.checkout.sessions.create({ line_items: [ { price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 1099, }, quantity: 1, }, ], mode: 'payment', ui_mode: 'elements', return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}' }); res.json({checkoutSessionClientSecret: session.client_secret}); }); app.listen(3000, () => { console.log('Running on port 3000'); }); ``` #### Zahlungsmethoden manuell auflisten #### TypeScript ```javascript import express, {Express} from 'express'; const app: Express = express(); app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => { const session = await stripe.checkout.sessions.create({ line_items: [ { price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 1099, }, quantity: 1, }, ], mode: 'payment', ui_mode: 'elements', payment_method_types: ['crypto'], return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}' }); res.json({checkoutSessionClientSecret: session.client_secret}); }); app.listen(3000, () => { console.log('Running on port 3000'); }); ``` ## Frontend einrichten [Clientseitig] #### HTML + JS Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es zum `head` Ihrer HTML-Datei hinzufügen. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie es nicht selbst. Stellen Sie sicher, dass Sie die neueste Stripe.js-Version verwenden, indem Sie das Script-Tag `einfügen.`. Erfahren Sie mehr über die [Versionierung von Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md). ```html Checkout ``` > Stripe stellt ein npm-Paket zur Verfügung, mit dem Sie Stripe.js als Modul laden können. Siehe das [Projekt auf GitHub](https://github.com/stripe/stripe-js). Version [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) oder höher ist erforderlich. Stripe.js initialisieren ```js // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe( '<>', ); ``` #### React Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus der öffentlichen npm-Registry. Sie benötigen mindestens Version 5.0.0 für React Stripe.js und Version 8.0.0 für den Stripe.js-Loader. ```bash npm install --save @stripe/react-stripe-js@^5.0.0 @stripe/stripe-js@^8.0.0 ``` Initialisieren Sie eine `stripe`-Instanz auf Ihrem Frontend mit Ihrem veröffentlichbaren Schlüssel. ```javascript import {loadStripe} from '@stripe/stripe-js'; const stripe = loadStripe("<>"); ``` ## Bezahlvorgang initialisieren [Clientseitig] #### HTML + JS Rufen Sie [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init) auf und übergeben Sie `clientSecret`. `initCheckoutElementsSdk` gibt ein [Checkout](https://docs.stripe.com/js/custom_checkout)-Objekt zurück, das Daten aus der Checkout-Session und Methoden zur Aktualisierung enthält. Lesen Sie `total` und `lineItems` aus [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session) und zeigen Sie sie in Ihrer Benutzeroberfläche an. So können Sie neue Funktionen mit minimalen Codeänderungen aktivieren. Zum Beispiel erfordert das Hinzufügen [manueller Währungspreise](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) keine UI-Änderungen, wenn `total` angezeigt wird. ```html
``` ```javascript const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const checkout = stripe.initCheckoutElementsSdk({clientSecret}); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const session = loadActionsResult.actions.getSession(); const checkoutContainer = document.getElementById('checkout-container'); checkoutContainer.append(JSON.stringify(session.lineItems, null, 2)); checkoutContainer.append(document.createElement('br')); checkoutContainer.append(`Total: ${session.total.total.amount}`); } ``` #### React Umhüllen Sie Ihre Anwendung mit der Komponente [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) und übergeben Sie dabei `clientSecret` und die `Stripe`-Instanz. ```jsx import React from 'react'; import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout'; import CheckoutForm from './CheckoutForm'; const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const App = () => { return ( ); }; export default App; ``` Greifen Sie auf das [Checkout](https://docs.stripe.com/js/custom_checkout)-Objekt in Ihrer Checkout-Formularkomponente, indem Sie den `useCheckout()`-Hook verwenden. Das `Checkout`-Objekt enthält Daten aus der Checkout-Sitzung und Methoden zu ihrer Aktualisierung. Lesen Sie `total` und `lineItems` aus dem `Checkout`-Objekt und zeigen Sie sie in Ihrer Benutzeroberfläche an. So können Sie Funktionen mit minimalen Codeänderungen aktivieren. Zum Beispiel erfordert das Hinzufügen [manueller Währungspreise](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) keine UI-Änderungen, wenn `total` angezeigt wird. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => {const checkoutState = useCheckout(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount}
); }; ``` ## Kunden-E-Mail-Adresse erfassen [Clientseitig] #### HTML + JS Bitte geben Sie beim Abschluss einer Checkout-Sitzung eine gültige E-Mail-Adresse an. Diese Anweisungen erstellen eine E-Mail-Eingabe und verwenden [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) aus dem Objekt `Checkout`. Alternativ können Sie: - Übergeben Sie die Werte [Kunde_E-Mail](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [Kunden_Konto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (für Kundinnen und Kunden, die als kundenkonfigurierte `Account`-Objekte dargestellt werden), oder [Kundin/Kunde](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (für Kundinnen und Kunden, die `Customer`-Objekte dargestellt werden), wenn Sie die Checkout-Session erstellen. Stripe validiert E-Mail-Adressen, die in dieser Weise bereitgestellt werden. - Geben Sie eine E-Mail-Adresse ein, die Sie bereits bei [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm) validiert haben. ```html
``` ```javascript const checkout = stripe.initCheckoutElementsSdk({clientSecret}); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const {actions} = loadActionsResult; const emailInput = document.getElementById('email'); const emailErrors = document.getElementById('email-errors'); emailInput.addEventListener('input', () => { // Clear any validation errors emailErrors.textContent = ''; }); emailInput.addEventListener('blur', () => { const newEmail = emailInput.value;actions.updateEmail(newEmail).then((result) => { if (result.error) { emailErrors.textContent = result.error.message; } }); }); } ``` #### React Bitte geben Sie beim Abschluss einer Checkout-Sitzung eine gültige E-Mail-Adresse an. Diese Anweisungen erstellen eine E-Mail-Eingabe und verwenden [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) aus dem Objekt `Checkout`. Alternativ können Sie: - Übergeben Sie die Werte [Kunde_E-Mail](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [Kunden_Konto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (für Kundinnen und Kunden, die als kundenkonfigurierte `Account`-Objekte dargestellt werden), oder [Kundin/Kunde](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (für Kundinnen und Kunden, die `Customer`-Objekte dargestellt werden), wenn Sie die Checkout-Session erstellen. Stripe validiert E-Mail-Adressen, die in dieser Weise bereitgestellt werden. - Geben Sie eine E-Mail-Adresse ein, die Sie bereits auf [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm) validiert haben. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const EmailInput = () => { const checkoutState = useCheckout(); const [email, setEmail] = React.useState(''); const [error, setError] = React.useState(null); if (checkoutState.type === 'loading') { return (
Loading...
); } else if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => { if (result.type === 'error') { setError(result.error); } }) }; const handleChange = (e) => { setError(null); setEmail(e.target.value); }; return (
{error &&
{error.message}
}
); }; export default EmailInput; ``` ## Zahlungsdaten erfassen [Clientseitig] Erfassen Sie Zahlungsdetails auf dem Client mit dem [Payment Element](https://docs.stripe.com/payments/payment-element.md). Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, das die Erfassung von Zahlungsdaten für verschiedene Zahlungsmethoden vereinfacht. Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine sichere HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung voraussetzen. Wenn Sie sich für die Verwendung eines Iframes entscheiden und Apple Pay oder Google Pay akzeptieren möchten, muss das Attribut [Zulassen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) des Iframes auf `"payment*"` gesetzt sein. Die Adresse der Bezahlseite muss mit `https://` beginnen, nicht mit `http://`, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, dieses zu [aktivieren](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren. #### HTML + JS Erstellen Sie zunächst ein Container-DOM-Element, um das [Payment Element](https://docs.stripe.com/payments/payment-element.md) zu verbinden. Erstellen Sie dann eine Instanz des `Payment Element` mit [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) und verbinden Sie es durch Aufrufen von [element.mount](https://docs.stripe.com/js/element/mount), wobei Sie entweder einen CSS-Selektor oder das Container-DOM-Element angeben. ```html
``` ```javascript const paymentElement = checkout.createPaymentElement(); paymentElement.mount('#payment-element'); ``` Die unterstützten Optionen finden Sie in der [Stripe.js-Dokumentation](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options). Sie können das [Erscheinungsbild](https://docs.stripe.com/payments/checkout/customization/appearance.md) aller Elements anpassen, indem Sie [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) übergeben, wenn Sie Checkout im Frontend initialisieren. #### React Integrieren Sie die Komponente [Payment Element](https://docs.stripe.com/payments/payment-element.md) in den [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ```jsx import React from 'react';import {PaymentElement, useCheckout} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount} ); }; export default CheckoutForm; ``` Die unterstützten Optionen finden Sie in der [Stripe.js-Dokumentation](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options). Sie können das [Erscheinungsbild aller Elemente anpassen](https://docs.stripe.com/payments/checkout/customization/appearance.md), indem Sie [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) an den [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) übergeben. ## Zahlung übermitteln [Clientseitig] #### HTML + JS Zeigen Sie eine Schaltfläche **Bezahlen** an, die [confirm](https://docs.stripe.com/js/custom_checkout/confirm) von der `Checkout`-Instanz aufruft, um die Zahlung zu übermitteln. ```html
``` ```js const checkout = stripe.initCheckoutElementsSdk({clientSecret}); checkout.on('change', (session) => { document.getElementById('pay-button').disabled = !session.canConfirm; }); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const {actions} = loadActionsResult; const button = document.getElementById('pay-button'); const errors = document.getElementById('confirm-errors'); button.addEventListener('click', () => { // Clear any validation errors errors.textContent = ''; actions.confirm().then((result) => { if (result.type === 'error') { errors.textContent = result.error.message; } }); }); } ``` #### React Zeigen Sie eine Schaltfläche **Bezahlen** an, die [bestätigen](https://docs.stripe.com/js/custom_checkout/confirm) von [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) aufruft, um die Zahlung zu übermitteln. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const PayButton = () => { const checkoutState = useCheckout(); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); if (checkoutState.type !== "success") { return null; } const handleClick = () => { setLoading(true);checkoutState.checkout.confirm().then((result) => { if (result.type === 'error') { setError(result.error) } setLoading(false); }) }; return (
{error &&
{error.message}
}
) }; export default PayButton; ``` ## Ihre Integration testen Testen Sie die Integration Ihrer Kryptozahlung, indem Sie die Weiterleitungsseite der Zahlung mit Ihren Test-API-Schlüsseln öffnen. Sie können einen erfolgreichen Zahlungsablauf kostenlos mit [Testnet-Assets](https://docs.stripe.com/payments/accept-stablecoin-payments.md#testnet-assets) testen. 1. Erstellen Sie in einer *Sandbox* eine neue Transaktion mit der von Ihnen gewählten Integrationsmethode und öffnen Sie die entsprechende Weiterleitungs-URL. 1. Verbinden Sie Ihre bevorzugte Wallet und Ihr bevorzugtes Zahlungsnetzwerk. 1. Schließen Sie die Zahlung ab und bestätigen Sie, dass Sie an die erwartete URL weitergeleitet werden. ### Zahlungen mit Testnet-Assets testen Die meisten Kryptowährungen bieten Testnet-Assets oder -Token ohne Geldwert an, die Sie zum Testen von Blockchain-Transaktionen verwenden können. Stripe empfiehlt die MetaMask-Wallet, das Polygon Amoy Testnet und den Circle-Faucet zum Testen, aber Sie können Ihre eigenen bevorzugten Dienste verwenden. #### Wallet installieren 1. [Laden Sie die MetaMask-Erweiterung](https://metamask.io/download) für Ihren Webbrowser herunter. 1. [Erstellen Sie eine neue Wallet](https://support.metamask.io/start/creating-a-new-wallet/) oder [importieren Sie eine bestehende](https://support.metamask.io/start/use-an-existing-wallet/). #### Testnet aktivieren 1. Wählen Sie in Ihrer MetaMask-Wallet im Hauptmenü **Netzwerke** aus. 1. Klicken Sie auf **Benutzerdefiniertes Netzwerk hinzufügen**. 1. Geben Sie die folgenden Details ein: - **Netzwerkname**: `Amoy` - **Standard-RPC-URL**: `https://rpc-amoy.polygon.technology/` - **Ketten-ID**: `80002` - **Währungssymbol**: `POL` - **Explorer-URL blockieren**: `https://amoy.polygonscan.com/` 1. Klicken Sie auf **Speichern**. #### Token importieren 1. Wählen Sie in Ihrer MetaMask-Wallet unter **Token** die Option **Amoy** aus dem Netzwerk-Dropdown-Menü aus. 1. Klicken Sie auf das Überlaufmenü (⋯) und wählen Sie **Token importieren** aus. 1. Klicken Sie auf **Netzwerk auswählen** > **Amoy**. 1. Fügen Sie unter **Token Vertragsadresse** die Testnet-Vertragsadresse für Polygon Amoy ein: ``` 0x41E94Eb019C0762f9Bfcf9Fb1E58725BfB0e7582 ``` Das Feld **Tokensymbol** wird automatisch mit `USDC` und das Feld **Dezimalstellen** mit `6` aktualisiert. 1. Klicken Sie auf **Weiter**. 1. Verifizieren Sie, dass Sie den `USDC`-Token importieren, und klicken Sie dann auf **Importieren**. Ihre MetaMask-Wallet zeigt jetzt **POL** und **USDC** in der Tokenliste an. Beim Testen von Rückerstattungen kann es vorkommen, dass der an Ihre Wallet gesendete Token einen anderen Vertrag hat als derjenige, der für die Zahlung verwendet wurde. Wir empfehlen Ihnen, den [transaction_hash](https://docs.stripe.com/api/refunds/object.md?rds=1#refund_object-destination_details-crypto-reference) Ihrer Rückerstattung im Block Explorer zu überprüfen und den Vertrag dieses Tokens zu Ihrer Wallet hinzuzufügen. Beispielsweise könnte für Sepolia ETH-USDC-Rückerstattungen die Token-Vertragsadresse `0x58277ebcabbe2a6694fbca8daf9e23163dbacf3e` angezeigt werden. #### Testnet-Assets abrufen > Um einige Testnet-Faucets zu verwenden, müssen Sie möglicherweise eine kleine Menge an Mainnet-Token halten. 1. Öffnen Sie [faucet.circle.com](https://faucet.circle.com/) 1. Klicken Sie auf **USDC**. 1. Wählen Sie unter **Netzwerk** **Polygon POS Amoy** aus. 1. Fügen Sie unter **Senden an** Ihre Wallet Adresse ein. 1. Klicken Sie auf **20 USDC senden**. Zusätzlich zu USDC für Zahlungen benötigen Sie POL, um Transaktionskosten zu bezahlen: 1. Öffnen Sie [faucet.polygon.technology](https://faucet.polygon.technology/). 1. Wählen Sie unter **Kette und Token auswählen** **Polygon Amoy** und **POL** aus. 1. Klicken Sie unter **Ihre Identität verifizieren** auf die Drittanbieterplattform, bei der Sie sich authentifizieren möchten, und schließen Sie den Anmeldeprozess ab. 1. Fügen Sie unter **Wallet-Adresse eingeben** Ihre Wallet-Adresse ein. 1. Klicken Sie auf **Anspruch**. Die Durchführung von Testnet-Transaktionen kann einige Minuten dauern. Überprüfen Sie Ihre Wallet, um zu bestätigen, dass die Überweisungen von USDC und POL durchgeführt wurden. ### Weitere Testnet-Faucets Weitere Optionen zum Testen von Token finden Sie in diesen Faucet-Diensten: - [Paxos USDP](https://faucet.paxos.com/) - [Devnet SOL](https://faucet.solana.com/) - [Sepolia ETH](https://faucets.chain.link/sepolia) - [Amoy POL](https://faucet.polygon.technology/) # Payment Intents API > This is a Payment Intents API for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/accept-stablecoin-payments?payment-ui=elements&api-integration=paymentintents. Informationen dazu, welche API den Anforderungen Ihres Unternehmens entspricht, finden Sie im [Vergleichsleitfaden](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Verwenden Sie das [Payment Element](https://docs.stripe.com/payments/payment-element.md), um ein nutzerdefiniertes Stripe-Zahlungsformular in Ihre Website oder Anwendung einzubetten und Kundinnen und Kunden Zahlungsmethoden anzubieten. Erweiterte Konfigurationen und Anpassungen finden Sie im Integrationsleitfaden für die [Zahlungsannahme](https://docs.stripe.com/payments/accept-a-payment.md) ## Stripe einrichten [Serverseitig] [Erstellen Sie ein Stripe-Konto](https://dashboard.stripe.com/register), um zu beginnen. Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API über Ihre Anwendung: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Zahlungsdaten erfassen [Clientseitig] Sie können nun mit dem Payment Element Zahlungsdetails auf dem Client erfassen. Das Payment Element ist eine vorgefertigte UI-Komponente, die die Erfassung von Zahlungsdaten für eine Vielzahl von Zahlungsmethoden vereinfacht. Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine sichere HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung voraussetzen. Die Adresse der Bezahlseite muss mit `https://` und nicht `http://` beginnen, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, es zu [aktivieren](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren. #### HTML + JS ### Stripe.js einrichten Das Payment Element ist ein Feature von Stripe.js und steht damit automatisch zur Verfügung. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es in den `head` Ihrer HTML-Datei einbinden. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon. ```html Checkout ``` Erstellen Sie auf Ihrer Zahlungsseite eine Instanz von Stripe mit dem folgenden JavaScript: ```javascript // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` ### Payment Element zu Ihrer Checkout-Seite hinzufügen Das Payment Element benötigt einen Platz auf Ihrer Checkout-Seite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular: ```html
``` #### Zahlungsmethoden über das Dashboard steuern Nachdem das obige Formular geladen wurde, erstellen Sie eine Elements-Instanz mit einem Wert für `mode`, `amount` und `currency`. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kundinnen/Kunden angezeigt werden. Um eine neue Zahlungsmethode in Ihrem Fomular anzugeben, müssen Sie sie unbedingt im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) aktivieren. ```javascript const options = {mode:'payment', amount:1099, currency: 'usd', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### Zahlungsmethoden manuell auflisten Um die Zahlungsmethoden, die verfügbar sein sollen, manuell aufzulisten, fügen Sie jede einzelne zu den `paymentMethodTypes` hinzu. Erstellen Sie dann eine Instanz des Payment Element und verbinden Sie sie mit dem Container DOM-Knoten. ```javascript const options = {mode:'payment', amount:1099, currency: 'usd', paymentMethodTypes: ['crypto'], // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### React ### Stripe.js einrichten Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` ### Den Elements-Anbieter zu Ihrer Checkout-Seite hinzufügen und konfigurieren Um die Payment Element-Komponente zu verwenden, schließen Sie die Komponente Ihrer Bezahlseite in einen [Elements-Anbieter](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) ein. Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den `Elements`-Anbieter. #### Zahlungsmethoden über das Dashboard steuern Der `Elements`-Anbieter akzeptiert auch Werte für `mode`, `amount` und `currency`. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kundinnen/Kunden angezeigt werden. Um eine neue Zahlungsmethode in Ihrem Formular anzugeben, müssen Sie sie unbedingt im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) aktivieren. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = {mode:'payment', amount:1099, currency: 'usd', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` #### Zahlungsmethoden manuell auflisten ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = {mode:'payment', amount:1099, currency: 'usd', paymentMethodTypes: ['crypto'], // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Payment Element hinzufügen Verwenden Sie die Komponente `PaymentElement`, um Ihr Formular zu erstellen. ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (
); }; export default CheckoutForm; ``` Sie können das Payment Element an das Design Ihrer Website anpassen, indem Sie beim Erstellen des `Elements`-Anbieters das [Erscheinungs-Objekt](https://docs.stripe.com/elements/appearance-api.md) an `options` übergeben. ### Adressen einholen Standardmäßig erfasst das Payment Element nur die erforderlichen Angaben zur Rechnungsadresse. Einige Verhaltensweisen, wie z. B. die [Berechnung der Steuer](https://docs.stripe.com/api/tax/calculations/create.md) oder die Eingabe der Versanddaten, erfordern die vollständige Adresse Ihrer Kundin/Ihres Kunden. Sie können Folgendes tun: - Verwenden Sie das [Address Element](https://docs.stripe.com/elements/address-element.md), um die Vorteile der Funktionen der automatischen Vervollständigung und Lokalisierung zu nutzen, um die vollständige Adresse Ihrer Kundin oder Ihres Kunden zu erfassen. Dies trägt dazu bei, eine möglichst genaue Steuerberechnung zu gewährleisten. - Erfassen Sie Adressdaten mit Ihrem eigenen benutzerdefinierten Formular. ## Erstellen Sie ein PaymentIntent [Serverseitig] > #### Benutzerdefinierte Geschäftslogik unmittelbar vor der Zahlungsbestätigung ausführen > > Navigieren Sie zu [Schritt 5](https://docs.stripe.com/payments/finalize-payments-on-the-server.md?platform=web&type=payment#submit-payment) im Leitfaden zum Abschließen von Zahlungen, um Ihre nutzerdefinierte Geschäftslogik unmittelbar vor der Zahlungsbestätigung auszuführen. Führen Sie andernfalls die folgenden Schritte für eine einfachere Integration aus, die `stripe.confirmPayment` auf dem Client verwendet, um die Zahlung zu bestätigen und alle nächsten Aktionen abzuwickeln. #### Zahlungsmethoden über das Dashboard steuern Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, verwenden Sie einen *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), um den Bestätigungs- und Zahlungsvorgang zu vereinfachen. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem `amount` und einer `currency`. Um zu verhindern, dass böswillige Kundinnen/Kunden ihre eigenen Preise wählen, entscheiden Sie, wie viel Sie berechnen möchten, immer auf der Serverseite (einer vertrauenswürdigen Umgebung) und nicht auf dem Client. Zu einem `PaymentIntent` gehört ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)). Geben Sie diesen Wert an Ihren Client zurück, damit Stripe.js den Zahlungsvorgang sicher abschließen kann. #### Accounts v2 #### Ruby ```ruby require 'stripe' client = Stripe::StripeClient.new('<>') post '/create-intent' do intent = client.v1.payment_intents.create({ # To allow saving and retrieving payment methods, provide the customer's Account ID. customer_account: "{{CUSTOMER_ACCOUNT_ID}}", amount: 1099, currency: 'usd', }) {client_secret: intent.client_secret}.to_json end ``` #### Customers v1 #### Ruby ```ruby require 'stripe' client = Stripe::StripeClient.new('<>') post '/create-intent' do intent = client.v1.payment_intents.create({ # To allow saving and retrieving payment methods, provide the Customer ID. customer: customer.id, amount: 1099, currency: 'usd', }) {client_secret: intent.client_secret}.to_json end ``` #### Zahlungsmethoden manuell auflisten Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, verwenden Sie einen *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), um den Bestätigungs- und Zahlungsvorgang zu vereinfachen. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem `amount`, einer `currency` und einer oder mehreren Zahlungsmethoden mithilfe von `payment_method_types`. Um zu verhindern, dass böswillige Kundinnen und Kunden ihre eigenen Preise wählen, sollten Sie den Preis immer auf der Serverseite (einer vertrauenswürdigen Umgebung) festlegen und nicht auf dem Client. Zu einem PaymentIntent gehört ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)). Geben Sie diesen Wert an Ihren Client zurück, damit Stripe.js den Zahlungsvorgang sicher abschließen kann. #### Ruby ```ruby require 'stripe' client = Stripe::StripeClient.new('<>') post '/create-intent' do intent = client.v1.payment_intents.create({ # To allow saving and retrieving payment methods, provide the Customer ID. customer: customer.id, amount: 1099, currency: 'usd', payment_method_types: ['crypto'], }) {client_secret: intent.client_secret}.to_json end ``` ## Zahlung an Stripe senden [Clientseitig] Verwenden Sie [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment), um die Zahlung mit den Angaben aus dem Payment Element abzuschließen. Geben Sie eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) für diese Funktion an, um anzugeben, wohin Stripe den/die Nutzer/in nach Abschluss der Zahlung weiterleitet. Ihre Nutzer/innen werden möglicherweise zunächst an eine Zwischenwebsite, z. B. eine Bankautorisierungsseite, weitergeleitet, bevor sie zur `return_url` weitergeleitet werden. Bei Kartenzahlungen erfolgt die Weiterleitung zur `return_url` sofort, wenn eine Zahlung erfolgreich ist. Wenn Sie bei Kartenzahlungen nach Abschluss der Zahlung keine Weiterleitung wünschen, können Sie [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) auf `if_required` festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit auf Weiterleitung basierenden Zahlungsmethoden bezahlen. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); const submitBtn = document.getElementById('submit'); const handleError = (error) => { const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; submitBtn.disabled = false; } form.addEventListener('submit', async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); // Prevent multiple form submissions if (submitBtn.disabled) { return; } // Disable form submission while loading submitBtn.disabled = true; // Trigger form validation and wallet collection const {error: submitError} = await elements.submit(); if (submitError) { handleError(submitError); return; } // Create the PaymentIntent and obtain clientSecret const res = await fetch("/create-intent", { method: "POST", }); const {client_secret: clientSecret} = await res.json(); // Confirm the PaymentIntent using the details collected by the Payment Element const {error} = await stripe.confirmPayment({ elements, clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point is only reached if there's an immediate error when // confirming the payment. Show the error to your customer (for example, payment details incomplete) handleError(error); } else { // Your customer is redirected to your `return_url`. For some payment // methods like iDEAL, your customer is redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; export default function CheckoutForm() { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(); const [loading, setLoading] = useState(false); const handleError = (error) => { setLoading(false); setErrorMessage(error.message); } const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } setLoading(true); // Trigger form validation and wallet collection const {error: submitError} = await elements.submit(); if (submitError) { handleError(submitError); return; } // Create the PaymentIntent and obtain clientSecret const res = await fetch("/create-intent", { method: "POST", }); const {client_secret: clientSecret} = await res.json(); // Confirm the PaymentIntent using the details collected by the Payment Element const {error} = await stripe.confirmPayment({ elements, clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point is only reached if there's an immediate error when // confirming the payment. Show the error to your customer (for example, payment details incomplete) handleError(error); } else { // Your customer is redirected to your `return_url`. For some payment // methods like iDEAL, your customer is redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (
{errorMessage &&
{errorMessage}
} ); } ``` ## Optional: Updates vom Server abrufen [Clientseitig] Möglicherweise möchten Sie Attribute des PaymentIntent aktualisieren, nachdem das Payment Element gerendert wurde, z. B. den [Betrag](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) (z. B. für Rabattcodes oder Versandkosten). Auf Ihrem Server können Sie [den PaymentIntent aktualisieren](https://docs.stripe.com/api/payment_intents/update.md) und dann [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) aufrufen, um den neuen Betrag im Payment Element zu sehen. Dieses Beispiel zeigt Ihnen, wie Sie den Server-Endpoint erstellen, der den Betrag im PaymentIntent aktualisiert: #### Ruby ```ruby # Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. # Find your keys at https://dashboard.stripe.com/apikeys. client = Stripe::StripeClient.new('<>') get '/update' do intent = client.v1.payment_intents.update( '{{PAYMENT_INTENT_ID}}', {amount: 1499}, ) {status: intent.status}.to_json end ``` Dieses Beispiel zeigt, wie die Nutzeroberfläche aktualisiert wird, um die Änderungen auf der Client-Seite zu berücksichtigen: ```javascript (async () => { const response = await fetch('/update'); if (response.status === 'requires_payment_method') { const {error} = await elements.fetchUpdates(); } })(); ``` ## Optional: Weiterleitung manuell verarbeiten [Serverseitig] Wir empfehlen, die Verarbeitung von Weiterleitungen mit `confirmPayment` Stripe.js zu überlassen. Wenn Sie Ihre Kundinnen/Kunden jedoch manuell weiterleiten müssen: 1. Geben Sie die URL an, an die Ihre Kundinnen/Kunden weitergeleitet werden sollen, sobald sie ihre Zahlung abgeschlossen haben. ```curl curl https://api.stripe.com/v1/payment_intents/pi_1DRuHnHgsMRlo4MtwuIAUe6u/confirm \ -u "<>:" \ -d payment_method=pm_1EnPf7AfTbPYpBIFLxIc8SD9 \ --data-urlencode "return_url=https://shop.example.com/crtA6B28E1" ``` 1. Bestätigen Sie, dass sich der `PaymentIntent` im Status `requires_action` befindet. Der Typ für die `next_action` ist `redirect_to_url`. ```json "next_action": { "type": "redirect_to_url", "redirect_to_url": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } } ``` 1. Leiten Sie Kundinnen/Kunden an die in der Eigenschaft `next_action` angegebene URL weiter. Bei Abschluss des Bezahlvorgangs werden die Kundinnen/Kunden an das Ziel `return_url` weitergeleitet. Die URL-Abfrageparameter `payment_intent` und `payment_intent_client_secret` sind enthalten und Sie können wie oben beschrieben Ihre eigenen Abfrageparameter übergeben. ## Optional: Ereignisse nach Zahlung verarbeiten Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). - **Manuelles Bearbeiten von Ereignissen im Dashboard** Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen. - **Erstellen eines benutzerdefinierten Webhooks** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Integrieren einer vorgefertigten App** Bearbeiten Sie häufige Unternehmensereignisse, wie z. B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren. ## Ihre Integration testen Testen Sie die Integration Ihrer Kryptozahlung, indem Sie die Weiterleitungsseite der Zahlung mit Ihren Test-API-Schlüsseln öffnen. Sie können einen erfolgreichen Zahlungsablauf kostenlos mit [Testnet-Assets](https://docs.stripe.com/payments/accept-stablecoin-payments.md#testnet-assets) testen. 1. Erstellen Sie in einer *Sandbox* eine neue Transaktion mit der von Ihnen gewählten Integrationsmethode und öffnen Sie die entsprechende Weiterleitungs-URL. 1. Verbinden Sie Ihre bevorzugte Wallet und Ihr bevorzugtes Zahlungsnetzwerk. 1. Schließen Sie die Zahlung ab und bestätigen Sie, dass Sie an die erwartete URL weitergeleitet werden. ### Zahlungen mit Testnet-Assets testen Die meisten Kryptowährungen bieten Testnet-Assets oder -Token ohne Geldwert an, die Sie zum Testen von Blockchain-Transaktionen verwenden können. Stripe empfiehlt die MetaMask-Wallet, das Polygon Amoy Testnet und den Circle-Faucet zum Testen, aber Sie können Ihre eigenen bevorzugten Dienste verwenden. #### Wallet installieren 1. [Laden Sie die MetaMask-Erweiterung](https://metamask.io/download) für Ihren Webbrowser herunter. 1. [Erstellen Sie eine neue Wallet](https://support.metamask.io/start/creating-a-new-wallet/) oder [importieren Sie eine bestehende](https://support.metamask.io/start/use-an-existing-wallet/). #### Testnet aktivieren 1. Wählen Sie in Ihrer MetaMask-Wallet im Hauptmenü **Netzwerke** aus. 1. Klicken Sie auf **Benutzerdefiniertes Netzwerk hinzufügen**. 1. Geben Sie die folgenden Details ein: - **Netzwerkname**: `Amoy` - **Standard-RPC-URL**: `https://rpc-amoy.polygon.technology/` - **Ketten-ID**: `80002` - **Währungssymbol**: `POL` - **Explorer-URL blockieren**: `https://amoy.polygonscan.com/` 1. Klicken Sie auf **Speichern**. #### Token importieren 1. Wählen Sie in Ihrer MetaMask-Wallet unter **Token** die Option **Amoy** aus dem Netzwerk-Dropdown-Menü aus. 1. Klicken Sie auf das Überlaufmenü (⋯) und wählen Sie **Token importieren** aus. 1. Klicken Sie auf **Netzwerk auswählen** > **Amoy**. 1. Fügen Sie unter **Token Vertragsadresse** die Testnet-Vertragsadresse für Polygon Amoy ein: ``` 0x41E94Eb019C0762f9Bfcf9Fb1E58725BfB0e7582 ``` Das Feld **Tokensymbol** wird automatisch mit `USDC` und das Feld **Dezimalstellen** mit `6` aktualisiert. 1. Klicken Sie auf **Weiter**. 1. Verifizieren Sie, dass Sie den `USDC`-Token importieren, und klicken Sie dann auf **Importieren**. Ihre MetaMask-Wallet zeigt jetzt **POL** und **USDC** in der Tokenliste an. Beim Testen von Rückerstattungen kann es vorkommen, dass der an Ihre Wallet gesendete Token einen anderen Vertrag hat als derjenige, der für die Zahlung verwendet wurde. Wir empfehlen Ihnen, den [transaction_hash](https://docs.stripe.com/api/refunds/object.md?rds=1#refund_object-destination_details-crypto-reference) Ihrer Rückerstattung im Block Explorer zu überprüfen und den Vertrag dieses Tokens zu Ihrer Wallet hinzuzufügen. Beispielsweise könnte für Sepolia ETH-USDC-Rückerstattungen die Token-Vertragsadresse `0x58277ebcabbe2a6694fbca8daf9e23163dbacf3e` angezeigt werden. #### Testnet-Assets abrufen > Um einige Testnet-Faucets zu verwenden, müssen Sie möglicherweise eine kleine Menge an Mainnet-Token halten. 1. Öffnen Sie [faucet.circle.com](https://faucet.circle.com/) 1. Klicken Sie auf **USDC**. 1. Wählen Sie unter **Netzwerk** **Polygon POS Amoy** aus. 1. Fügen Sie unter **Senden an** Ihre Wallet Adresse ein. 1. Klicken Sie auf **20 USDC senden**. Zusätzlich zu USDC für Zahlungen benötigen Sie POL, um Transaktionskosten zu bezahlen: 1. Öffnen Sie [faucet.polygon.technology](https://faucet.polygon.technology/). 1. Wählen Sie unter **Kette und Token auswählen** **Polygon Amoy** und **POL** aus. 1. Klicken Sie unter **Ihre Identität verifizieren** auf die Drittanbieterplattform, bei der Sie sich authentifizieren möchten, und schließen Sie den Anmeldeprozess ab. 1. Fügen Sie unter **Wallet-Adresse eingeben** Ihre Wallet-Adresse ein. 1. Klicken Sie auf **Anspruch**. Die Durchführung von Testnet-Transaktionen kann einige Minuten dauern. Überprüfen Sie Ihre Wallet, um zu bestätigen, dass die Überweisungen von USDC und POL durchgeführt wurden. ### Weitere Testnet-Faucets Weitere Optionen zum Testen von Token finden Sie in diesen Faucet-Diensten: - [Paxos USDP](https://faucet.paxos.com/) - [Devnet SOL](https://faucet.solana.com/) - [Sepolia ETH](https://faucets.chain.link/sepolia) - [Amoy POL](https://faucet.polygon.technology/) ## Fehlercodes In der folgenden Tabelle finden Sie häufige Fehlercodes und die empfohlenen Maßnahmen: | Fehlercode | Empfohlene Maßnahme | | --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent_invalid_currency` | Geben Sie eine unterstützte Währung ein. | | `missing_required_parameter` | In der Fehlermeldung erhalten Sie weitere Informationen zum erforderlichen Parameter. | | `payment_intent_payment_attempt_failed` | Dieser Code kann im Feld [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) eines PaymentIntent angezeigt werden. Eine genauere Fehlerursache und Vorschläge zur Fehlerbehebung finden Sie in der Fehlermeldung. | | `payment_intent_authentication_failure` | Dieser Code kann im Feld [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) eines PaymentIntent erscheinen. Prüfen Sie die Fehlermeldung für einen detaillierten Grund des Fehlers und Hinweise zur Fehlerbehandlung. Dieser Fehler tritt auf, wenn Sie während des Testens Ihrer Integration manuell einen Fehler auslösen. | | `payment_intent_redirect_confirmation_without_return_url` | Geben Sie eine `return_url` an, wenn Sie einen PaymentIntent bestätigen. | # Direct API > This is a Direct API for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/accept-stablecoin-payments?payment-ui=direct-api. Integrieren Sie „Mit Krypto bezahlen“ direkt über die *Payment Intents API* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods). ## Stripe einrichten [Serverseitig] [Erstellen Sie zunächst ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login). Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## PaymentIntent erstellen und das Client-Geheimnis abrufen [Serverseitig] Das [PaymentIntent](https://docs.stripe.com/api/payment_intents.md)-Objekt stellt Ihre Absicht dar, eine Zahlung von der Kundin/dem Kunden einzuziehen und verfolgt den Zahlungsablauf. Erstellen Sie einen PaymentIntent auf Ihrem Server und geben Sie den einzuziehenden Betrag und eine unterstützte Währung an. Wenn Sie über eine PaymentIntents-Integration verfügen, fügen Sie `crypto` zur Liste der [payment_method_types](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) hinzu. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "payment_method_types[]=crypto" ``` ### Client-Geheimnis abrufen Im PaymentIntent ist ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client. #### Einseitige Anwendung Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion `fetch` verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt: #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab: ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Serverseitiges Rendering Übergeben Sie das Client-Geheimnis von Ihrem Server an den Client. Diese Vorgehensweise funktioniert am besten, wenn Ihre Anwendung statische Inhalte auf dem Server generiert, bevor sie an den Browser gesendet werden. Fügen Sie das [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem PaymentIntent ab: #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## Auf die Stablecoin-Zahlungsseite weiterleiten Verwenden Sie [Stripe.js](https://docs.stripe.com/js.md), um die Zahlung an Stripe zu übermitteln, wenn ein Kunde/eine Kundin **Krypto** als Zahlungsmethode auswählt. Stripe.js ist die grundlegende JavaScript-Bibliothek für die Erstellung von Zahlungsabläufen. Sie verarbeitet automatisch komplexe Szenarien wie die nachfolgend beschriebene Weiterleitung und ermöglicht die Erweiterung Ihrer Integration durch zusätzliche Zahlungsmethoden. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es im `` Ihrer HTML-Datei einfügen. ```html Checkout ``` Erstellen Sie auf Ihrer Bezahlseite mit dem folgenden JavaScript eine Instanz von Stripe.js: ```javascript // Set your publishable key. Remember to change this to your live publishable key in production! // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` Verwenden Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des PaymentIntent und rufen Sie `stripe.confirmPayment` auf, um die „Mit Krypto bezahlen“-Weiterleitung zu handhaben. Fügen Sie eine `return_url` hinzu, um festzulegen, wohin Stripe die Kundinnen/Kunden nach Durchführung der Zahlung weiterleitet. ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async function(event) { event.preventDefault(); // Set the clientSecret of the PaymentIntent const { error } = await stripe.confirmPayment({ clientSecret: clientSecret, confirmParams: { payment_method_data: { type: 'crypto', }, // Return URL where the customer should be redirected after the authorization return_url: `${window.location.href}`, }, }); if (error) { // Inform the customer that there was an error. const errorElement = document.getElementById('error-message'); errorElement.textContent = result.error.message; } }); ``` Die `return_url` verweist auf eine Seite auf Ihrer Website, auf der das Ergebnis der Zahlung angezeigt wird. Sie können festlegen, was angezeigt werden soll, indem Sie den [Status](https://docs.stripe.com/payments/payment-intents/verifying-status.md#checking-status) des PaymentIntent überprüfen. Um den Status zu verifizieren, enthält die Stripe-Weiterleitung zur `return_url` die folgenden URL-Abfrageparameter. Sie können auch Ihre eigenen Abfrageparameter an die `return_url` anhängen. Sie bleiben während des gesamten Weiterleitungsvorgangs bestehen. | | | | | `payment_intent` | Die eindeutige ID für den `PaymentIntent`. | | `payment_intent_client_secret` | Das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts. | ## Optional: Ereignisse nach der Zahlung verarbeiten Stripe sendet ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie das Dashboard, einen nutzerdefinierten [Webhook](https://docs.stripe.com/webhooks.md) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen, wie das Versenden einer Bestellbestätigung per E-Mail, das Erfassen des Verkaufs in einer Datenbank oder das Initiieren eines Versandworkflows, auszuführen. Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients die Antwort manipulieren könnten. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie auch zukünftig zusätzliche Zahlungsmethoden akzeptieren. Informationen über die Unterschiede zwischen allen unterstützten Zahlungsmethoden finden Sie in unserem Leitfaden zu [Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). ### Ereignisse empfangen und Geschäftsaktionen ausführen Es gibt mehrere Möglichkeiten, Geschäftsaktionen zu empfangen und auszuführen: - **Manuell:** Im [Stripe-Dashboard](https://dashboard.stripe.com/test/payments) können Sie alle Stripe-Zahlungen anzeigen, Zahlungsbelege per E-Mail versenden, Auszahlungen abwickeln oder fehlgeschlagene Zahlungen erneut durchführen. - **Benutzerdefinierter Code:** [Erstellen Sie einen Webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)-Handler, um Ereignisse zu überwachen und benutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben. - **Vorgefertigte Apps:** Verarbeiten Sie häufige Geschäftsereignisse, wie [Automatisierung](https://stripe.partners/?f_category=automation) oder [Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales) durch Integration einer Partneranwendung. ### Unterstützte Währungen Sie können Krypto-Zahlungen in den Währungen erstellen, die Ihrem Land zugeordnet sind. Die lokale Standardwährung für Kryptowährungen ist USD, wobei die Kundinnen/Kunden ihren Kaufbetrag auch in dieser Währung sehen. ## Optional: Weiterleitung manuell verarbeiten [Serverseitig] Wir empfehlen, die Verarbeitung von Weiterleitungen mit `confirmPayment` Stripe.js zu überlassen. Wenn Sie Ihre Kundinnen/Kunden jedoch manuell weiterleiten müssen: 1. Geben Sie die URL an, an die Ihre Kundinnen/Kunden weitergeleitet werden sollen, sobald sie ihre Zahlung abgeschlossen haben. ```curl curl https://api.stripe.com/v1/payment_intents/pi_1DRuHnHgsMRlo4MtwuIAUe6u/confirm \ -u "<>:" \ -d payment_method=pm_1EnPf7AfTbPYpBIFLxIc8SD9 \ --data-urlencode "return_url=https://shop.example.com/crtA6B28E1" ``` 1. Bestätigen Sie, dass sich der `PaymentIntent` im Status `requires_action` befindet. Der Typ für die `next_action` ist `redirect_to_url`. ```json "next_action": { "type": "redirect_to_url", "redirect_to_url": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } } ``` 1. Leiten Sie Kundinnen/Kunden an die in der Eigenschaft `next_action` angegebene URL weiter. Bei Abschluss des Bezahlvorgangs werden die Kundinnen/Kunden an das Ziel `return_url` weitergeleitet. Die URL-Abfrageparameter `payment_intent` und `payment_intent_client_secret` sind enthalten und Sie können wie oben beschrieben Ihre eigenen Abfrageparameter übergeben. ## Ihre Integration testen Testen Sie die Integration Ihrer Kryptozahlung, indem Sie die Weiterleitungsseite der Zahlung mit Ihren Test-API-Schlüsseln öffnen. Sie können einen erfolgreichen Zahlungsablauf kostenlos mit [Testnet-Assets](https://docs.stripe.com/payments/accept-stablecoin-payments.md#testnet-assets) testen. 1. Erstellen Sie in einer *Sandbox* eine neue Transaktion mit der von Ihnen gewählten Integrationsmethode und öffnen Sie die entsprechende Weiterleitungs-URL. 1. Verbinden Sie Ihre bevorzugte Wallet und Ihr bevorzugtes Zahlungsnetzwerk. 1. Schließen Sie die Zahlung ab und bestätigen Sie, dass Sie an die erwartete URL weitergeleitet werden. ### Zahlungen mit Testnet-Assets testen Die meisten Kryptowährungen bieten Testnet-Assets oder -Token ohne Geldwert an, die Sie zum Testen von Blockchain-Transaktionen verwenden können. Stripe empfiehlt die MetaMask-Wallet, das Polygon Amoy Testnet und den Circle-Faucet zum Testen, aber Sie können Ihre eigenen bevorzugten Dienste verwenden. #### Wallet installieren 1. [Laden Sie die MetaMask-Erweiterung](https://metamask.io/download) für Ihren Webbrowser herunter. 1. [Erstellen Sie eine neue Wallet](https://support.metamask.io/start/creating-a-new-wallet/) oder [importieren Sie eine bestehende](https://support.metamask.io/start/use-an-existing-wallet/). #### Testnet aktivieren 1. Wählen Sie in Ihrer MetaMask-Wallet im Hauptmenü **Netzwerke** aus. 1. Klicken Sie auf **Benutzerdefiniertes Netzwerk hinzufügen**. 1. Geben Sie die folgenden Details ein: - **Netzwerkname**: `Amoy` - **Standard-RPC-URL**: `https://rpc-amoy.polygon.technology/` - **Ketten-ID**: `80002` - **Währungssymbol**: `POL` - **Explorer-URL blockieren**: `https://amoy.polygonscan.com/` 1. Klicken Sie auf **Speichern**. #### Token importieren 1. Wählen Sie in Ihrer MetaMask-Wallet unter **Token** die Option **Amoy** aus dem Netzwerk-Dropdown-Menü aus. 1. Klicken Sie auf das Überlaufmenü (⋯) und wählen Sie **Token importieren** aus. 1. Klicken Sie auf **Netzwerk auswählen** > **Amoy**. 1. Fügen Sie unter **Token Vertragsadresse** die Testnet-Vertragsadresse für Polygon Amoy ein: ``` 0x41E94Eb019C0762f9Bfcf9Fb1E58725BfB0e7582 ``` Das Feld **Tokensymbol** wird automatisch mit `USDC` und das Feld **Dezimalstellen** mit `6` aktualisiert. 1. Klicken Sie auf **Weiter**. 1. Verifizieren Sie, dass Sie den `USDC`-Token importieren, und klicken Sie dann auf **Importieren**. Ihre MetaMask-Wallet zeigt jetzt **POL** und **USDC** in der Tokenliste an. Beim Testen von Rückerstattungen kann es vorkommen, dass der an Ihre Wallet gesendete Token einen anderen Vertrag hat als derjenige, der für die Zahlung verwendet wurde. Wir empfehlen Ihnen, den [transaction_hash](https://docs.stripe.com/api/refunds/object.md?rds=1#refund_object-destination_details-crypto-reference) Ihrer Rückerstattung im Block Explorer zu überprüfen und den Vertrag dieses Tokens zu Ihrer Wallet hinzuzufügen. Beispielsweise könnte für Sepolia ETH-USDC-Rückerstattungen die Token-Vertragsadresse `0x58277ebcabbe2a6694fbca8daf9e23163dbacf3e` angezeigt werden. #### Testnet-Assets abrufen > Um einige Testnet-Faucets zu verwenden, müssen Sie möglicherweise eine kleine Menge an Mainnet-Token halten. 1. Öffnen Sie [faucet.circle.com](https://faucet.circle.com/) 1. Klicken Sie auf **USDC**. 1. Wählen Sie unter **Netzwerk** **Polygon POS Amoy** aus. 1. Fügen Sie unter **Senden an** Ihre Wallet Adresse ein. 1. Klicken Sie auf **20 USDC senden**. Zusätzlich zu USDC für Zahlungen benötigen Sie POL, um Transaktionskosten zu bezahlen: 1. Öffnen Sie [faucet.polygon.technology](https://faucet.polygon.technology/). 1. Wählen Sie unter **Kette und Token auswählen** **Polygon Amoy** und **POL** aus. 1. Klicken Sie unter **Ihre Identität verifizieren** auf die Drittanbieterplattform, bei der Sie sich authentifizieren möchten, und schließen Sie den Anmeldeprozess ab. 1. Fügen Sie unter **Wallet-Adresse eingeben** Ihre Wallet-Adresse ein. 1. Klicken Sie auf **Anspruch**. Die Durchführung von Testnet-Transaktionen kann einige Minuten dauern. Überprüfen Sie Ihre Wallet, um zu bestätigen, dass die Überweisungen von USDC und POL durchgeführt wurden. ### Weitere Testnet-Faucets Weitere Optionen zum Testen von Token finden Sie in diesen Faucet-Diensten: - [Paxos USDP](https://faucet.paxos.com/) - [Devnet SOL](https://faucet.solana.com/) - [Sepolia ETH](https://faucets.chain.link/sepolia) - [Amoy POL](https://faucet.polygon.technology/) # iOS > This is a iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/accept-stablecoin-payments?payment-ui=mobile&platform=ios. Wir empfehlen die Verwendung des [Mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?=ios), einem einbettbaren Zahlungsformular, über das Sie „Mit Krypto bezahlen“ und weitere Zahlungsmethoden mit wenig Aufwand zu Ihrer Integration hinzufügen können. „Mit Krypto bezahlen“ ist eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage), bei der Kundinnen/Kunden ihre Zahlungen [authentifizieren](https://docs.stripe.com/payments/payment-methods.md#customer-actions) müssen. Kundinnen/Kunden werden von Ihrer App weitergeleitet, autorisieren die Zahlung mit Stripe Krypto und kehren dann zu Ihrer App zurück. Sie werden [sofort benachrichtigt](https://docs.stripe.com/payments/payment-methods.md#payment-notification), wenn die Zahlung erfolgreich ist oder fehlschlägt. ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### Serverseitig Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie die offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [Stripe iOS SDK](https://github.com/stripe/stripe-ios) ist Open Source, [vollständig dokumentiert](https://stripe.dev/stripe-ios/index.html) und kompatibel mit Apps, die iOS 13 oder höher unterstützen. #### Swift Package Manager Führen Sie zur Installation des SDK die folgenden Schritte aus: 1. Wählen Sie in Xcode **Datei** > **Add Package Dependencies** (Paketabhängigkeiten hinzufügen) aus und geben Sie als Repository-URL `https://github.com/stripe/stripe-ios-spm` ein. 1. Wählen auf unserer [Veröffentlichungsseite](https://github.com/stripe/stripe-ios/releases) die neueste Version aus. 1. Fügen Sie das Produkt **StripePaymentsUI** zum [Ziel Ihrer App](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app) hinzu. #### CocoaPods 1. Falls noch nicht geschehen, installieren Sie bitte die aktuellste Version von [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Wenn Sie keine bestehende [Podfile](https://guides.cocoapods.org/syntax/podfile.html) haben, führen Sie folgenden Befehl aus, um eine zu erstellen: ```bash pod init ``` 1. Fügen Sie folgende Zeile in Ihre `Podfile` ein: ```podfile pod 'StripePaymentsUI' ``` 1. Führen Sie folgenden Befehl aus: ```bash pod install ``` 1. Vergessen Sie nicht, ab jetzt in Zukunft anstelle der Datei `.xcodeproj` die Datei `.xcworkspace` zum Öffnen Ihres Projekts in Xcode zu verwenden. 1. Führen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK Folgendes aus: ```bash pod update StripePaymentsUI ``` #### Carthage 1. Falls noch nicht geschehen, installieren Sie bitte die aktuelle Version von [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Fügen Sie folgende Zeile in Ihre `Cartfile` ein: ```cartfile github "stripe/stripe-ios" ``` 1. Befolgen Sie die [Carthage-Installationsanweisungen](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Vergewissern Sie sich, dass Sie alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking) aufgeführten erforderlichen Frameworks einbetten. 1. Führen Sie für zukünftige Updates auf die aktuelle Version unseres SDK einfach folgenden Befehl aus: ```bash carthage update stripe-ios --platform ios ``` #### Manuelles Framework 1. Gehen Sie auf unsere [GitHub-Release-Seite](https://github.com/stripe/stripe-ios/releases/latest), laden Sie **Stripe.xcframework.zip** herunter und entpacken Sie die Datei. 1. Ziehen Sie **StripePaymentsUI.xcframework** in den Abschnitt **Embedded Binaries** (Eingebettete Binärdateien) der Einstellungen unter **General** (Allgemeines) Ihres Xcode-Projekts. Aktivieren Sie dabei die Option **Copy items if needed** (Elemente kopieren, falls nötig). 1. Wiederholen Sie Schritt 2 für alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking) aufgeführten erforderlichen Frameworks. 1. Wiederholen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK die Schritte 1–3. > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-ios/releases) auf GitHub. Um bei Veröffentlichung einer neuen Version eine Benachrichtigung zu erhalten, [achten Sie auf die Releases zum jeweiligen Repository](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository). Konfigurieren Sie das SDK mit Ihrem [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/test/apikeys) von Stripe, um es beim Start der App auszuführen. Dadurch kann Ihre App Anfragen an die Stripe-API senden. #### Swift ```swift import UIKitimportStripePaymentsUI @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<>" // do any other necessary launch configuration return true } } ``` > Verwenden Sie Ihre [Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App. ## Erstellen Sie ein PaymentIntent [Serverseitig] [Clientseitig] ### Serverseitig Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) ist ein Objekt, das Ihre Absicht, eine Kundenzahlung einzuziehen, darstellt und den gesamten Zahlungsvorgang dokumentiert. #### Zahlungsmethoden im Dashboard verwalten Sie können Zahlungsmethoden im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag und einer Währung. Aktivieren Sie vor dem Erstellen des PaymentIntent unbedingt **Mit Krypto bezahlen** in Ihrem [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods). > Legen Sie den zu zahlenden Betrag immer serverseitig fest, also in einer vertrauenswürdigen Umgebung, und nicht auf Client-Seite. So wird verhindert, dass Kundinnen und Kunden ihre eigenen Preise festlegen können. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" ``` #### Zahlungsmethoden manuell auflisten Wenn Sie das Dashboard nicht nutzen oder die Zahlungsmethoden manuell angeben möchten, können Sie diese mit dem Attribut `payment_method_types` auflisten. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag, einer Währung und einer Liste der Zahlungsmethoden. > Legen Sie den zu zahlenden Betrag immer serverseitig fest, also in einer vertrauenswürdigen Umgebung, und nicht auf Client-Seite. So wird verhindert, dass Kundinnen und Kunden ihre eigenen Preise festlegen können. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "payment_method_types[]=crypto" ``` ### Clientseitig Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie sein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)). #### Swift ```swift class CheckoutViewController: UIViewController { var paymentIntentClientSecret: String? // ...continued from previous step override func viewDidLoad() { // ...continued from previous step startCheckout() } func startCheckout() { // Request a PaymentIntent from your server and store its client secret // Click View full sample to see a complete implementation } } ``` ## Zahlung an Stripe senden [Clientseitig] Wenn Kundinnen/Kunden auf die Schaltfläche „Mit Krypto bezahlen“ tippen, bestätigen Sie den `PaymentIntent`, um die Zahlung abzuschließen. Konfigurieren Sie ein `STPPaymentIntentParams`-Objekt mit dem [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`. Das Client-Geheimnis unterscheidet sich von Ihren API-Schlüsseln, die Anfragen der Stripe-API authentifizieren. Gehen Sie vorsichtig damit um, da Sie damit die Zahlung durchführen können. Es darf nicht protokolliert, in URLs eingebettet oder Personen außer dem/der jeweiligen Kund/in zugänglich gemacht werden. ### Rückgabe-URL einrichten Das iOS SDK zeigt eine Webansicht in Ihrer App an, um die Zahlung über „Mit Krypto bezahlen“ abzuschließen. Wenn die Authentifizierung abgeschlossen ist, kann die Webansicht automatisch geschlossen werden, ohne dass Ihr Kunde/Ihre Kundin sie schließen muss. Um dieses Verhalten zu aktivieren, konfigurieren Sie ein nutzerdefiniertes URL-Schema oder einen Universal-Link und richten Sie Ihre App so ein, dass die URL an das SDK weitergeleitet wird. #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } return false } // This method handles opening universal link URLs (for example, "https://example.com/stripe_ios_callback") func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool { if userActivity.activityType == NSUserActivityTypeBrowsingWeb { if let url = userActivity.webpageURL { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } } } return false } ``` Übergeben Sie die URL als `return_url`, wenn Sie den PaymentIntent bestätigen. Nach Abschluss der Authentifizierung über die Webansicht leitet Stripe die Nutzer/innen an die `return_url` weiter. ### Zahlung über „Mit Krypto bezahlen“ bestätigen Schließen Sie die Zahlung ab, indem Sie `STPPaymentHandler.confirmPayment` aufrufen. Dies entspricht einer Webansicht, in der die Kundinnen/Kunden die Zahlung über „Mit Krypto bezahlen“ durchführen können. Nach Abschluss ruft Stripe den Completion-Block mit dem Ergebnis der Zahlung auf. #### Swift ```swift let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret) // Pay with Crypto does not require additional parameters so we only need to pass the initialized // STPPaymentMethodCryptoParams instance to STPPaymentMethodParams let crypto = STPPaymentMethodCryptoParams() let paymentMethodParams = STPPaymentMethodParams(crypto: crypto, billingDetails: nil, metadata: nil) paymentIntentParams.paymentMethodParams = paymentMethodParams paymentIntentParams.returnURL = "payments-example://stripe-redirect" STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (handlerStatus, paymentIntent, error) in switch handlerStatus { case .succeeded: // Payment succeeded // ... case .canceled: // Payment canceled // ... case .failed: // Payment failed // ... @unknown default: fatalError() } } ``` ## Optional: Weiterleitung manuell verarbeiten [Serverseitig] Wir empfehlen, die Verarbeitung von Weiterleitungen mit `confirmPayment` Stripe.js zu überlassen. Wenn Sie Ihre Kundinnen/Kunden jedoch manuell weiterleiten müssen: 1. Geben Sie die URL an, an die Ihre Kundinnen/Kunden weitergeleitet werden sollen, sobald sie ihre Zahlung abgeschlossen haben. ```curl curl https://api.stripe.com/v1/payment_intents/pi_1DRuHnHgsMRlo4MtwuIAUe6u/confirm \ -u "<>:" \ -d payment_method=pm_1EnPf7AfTbPYpBIFLxIc8SD9 \ --data-urlencode "return_url=https://shop.example.com/crtA6B28E1" ``` 1. Bestätigen Sie, dass sich der `PaymentIntent` im Status `requires_action` befindet. Der Typ für die `next_action` ist `redirect_to_url`. ```json "next_action": { "type": "redirect_to_url", "redirect_to_url": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } } ``` 1. Leiten Sie Kundinnen/Kunden an die in der Eigenschaft `next_action` angegebene URL weiter. Bei Abschluss des Bezahlvorgangs werden die Kundinnen/Kunden an das Ziel `return_url` weitergeleitet. Die URL-Abfrageparameter `payment_intent` und `payment_intent_client_secret` sind enthalten und Sie können wie oben beschrieben Ihre eigenen Abfrageparameter übergeben. ## Optional: Ereignisse nach der Zahlung verarbeiten Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). - **Manuelles Bearbeiten von Ereignissen im Dashboard** Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen. - **Erstellen eines benutzerdefinierten Webhooks** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Integrieren einer vorgefertigten App** Bearbeiten Sie häufige Unternehmensereignisse, wie z. B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren. # Android > This is a Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/accept-stablecoin-payments?payment-ui=mobile&platform=android. Verwenden Sie das [Mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android), ein einbettbares Zahlungsformular, über das Sie Pay with Crypto und weitere Zahlungsmethoden mit wenig Aufwand zu Ihrer Integration hinzufügen können. „Mit Krypto bezahlen“ ist eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage), bei der Kundinnen/Kunden ihre Zahlungen [authentifizieren](https://docs.stripe.com/payments/payment-methods.md#customer-actions) müssen. Kundinnen/Kunden werden von Ihrer App weitergeleitet, autorisieren die Zahlung bei Stripe und kehren dann zu Ihrer App zurück. Sie werden [sofort benachrichtigt](https://docs.stripe.com/payments/payment-methods.md#payment-notification), wenn die Zahlung erfolgreich ist oder fehlschlägt. ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### Serverseitig Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie diese offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [Stripe Android SDK](https://github.com/stripe/stripe-android) ist Open Source und [vollständig dokumentiert](https://stripe.dev/stripe-android/). Um das SDK zu installieren, fügen Sie `stripe-android` in den Block `dependencies` Ihrer [app/build.gradle](https://developer.android.com/studio/build/dependencies)-Datei ein: #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Stripe Android SDK implementation("com.stripe:stripe-android:23.3.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.3.0") } ``` > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-android/releases) auf GitHub. Um bei Veröffentlichung eines neuen Release eine Benachrichtigung zu erhalten, [beobachten Sie Veröffentlichungen für das jeweilige Repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). Konfigurieren Sie das SDK mit Ihrem [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/apikeys) von Stripe so, dass dieser Anfragen an die API stellen kann, wie beispielsweise in Ihrer Unterklasse `Application`: #### Kotlin ```kotlin import com.stripe.android.PaymentConfiguration class MyApp : Application() { override fun onCreate() { super.onCreate() PaymentConfiguration.init( applicationContext, "<>" ) } } ``` > Verwenden Sie Ihre [Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App. Stripe-Beispiele nutzen auch [OkHttp](https://github.com/square/okhttp) und [GSON](https://github.com/google/gson), um HTTP-Anfragen an einen Server zu stellen. ## Erstellen Sie ein PaymentIntent [Serverseitig] [Clientseitig] ### Serverseitig Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) ist ein Objekt, das Ihre Absicht, eine Kundenzahlung einzuziehen, darstellt und den gesamten Zahlungsvorgang dokumentiert. #### Zahlungsmethoden im Dashboard verwalten Sie können Zahlungsmethoden im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag und einer Währung. Bevor Sie den PaymentIntent erstellen, aktivieren Sie unbedingt **Mit Krypto bezahlen** auf der Seite mit den [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods). > Legen Sie den zu zahlenden Betrag immer serverseitig fest, also in einer vertrauenswürdigen Umgebung, und nicht auf Client-Seite. So wird verhindert, dass Kundinnen und Kunden ihre eigenen Preise festlegen können. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" ``` #### Zahlungsmethoden manuell auflisten Wenn Sie das Dashboard nicht nutzen oder die Zahlungsmethoden manuell angeben möchten, können Sie diese mit dem Attribut `payment_method_types` auflisten. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag, einer Währung und einer Liste der Zahlungsmethoden. > Legen Sie den zu zahlenden Betrag immer serverseitig fest, also in einer vertrauenswürdigen Umgebung, und nicht auf Client-Seite. So wird verhindert, dass Kundinnen und Kunden ihre eigenen Preise festlegen können. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "payment_method_types[]=crypto" ``` ### Clientseitig Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie sein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)). #### Kotlin ```kotlin class CheckoutActivity : AppCompatActivity() { private lateinit var paymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... startCheckout() } private fun startCheckout() { // Request a PaymentIntent from your server and store its client secret in paymentIntentClientSecret // Click View full sample to see a complete implementation } } ``` ## Zahlung an Stripe senden [Clientseitig] Wenn Kundinnen/Kunden auf die Schaltfläche „Mit Krypto bezahlen“ tippen, bestätigen Sie den `PaymentIntent`, um die Zahlung abzuschließen. Konfigurieren Sie ein `ConfirmPaymentIntentParams`-Objekt mit dem [Client/Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`. Das Client-Geheimnis unterscheidet sich von Ihren API-Schlüsseln, die Anfragen der Stripe-API authentifizieren. Gehen Sie vorsichtig damit um, da Sie damit die Zahlung durchführen können. Es darf nicht protokolliert, in URLs eingebettet oder Personen außer dem/der jeweiligen Kund/in zugänglich gemacht werden. ### Zahlung mit Kryptowährung bestätigen Schließen Sie die Zahlung ab, indem Sie [PaymentLauncher bestätigen](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/confirm.html) aufrufen. Dadurch werden Kundinnen/Kunden zu **https://crypto.stripe.com/pay**, weitergeleitet, wo sie mit Krypto bezahlen können. Nach Abschluss ruft Stripe den von Ihnen festgelegten `PaymentResultCallback` mit dem Ergebnis der Zahlung auf. #### Kotlin ```kotlin class CheckoutActivity : AppCompatActivity() { // ... private val paymentLauncher: PaymentLauncher by lazy { val paymentConfiguration = PaymentConfiguration.getInstance(applicationContext) PaymentLauncher.create( activity = this, publishableKey = paymentConfiguration.publishableKey, stripeAccountId = paymentConfiguration.stripeAccountId, callback = ::onPaymentResult, ) } // … private fun startCheckout() { // ... val cryptoParams = PaymentMethodCreateParams.createCrypto() val confirmParams = ConfirmPaymentIntentParams .createWithPaymentMethodCreateParams( paymentMethodCreateParams = cryptoParams, clientSecret = paymentIntentClientSecret, ) paymentLauncher.confirm(confirmParams) } private fun onPaymentResult(paymentResult: PaymentResult) { // Handle the payment result… } } ``` ## Optional: Weiterleitung manuell verarbeiten [Serverseitig] Wir empfehlen, die Verarbeitung von Weiterleitungen mit `confirmPayment` Stripe.js zu überlassen. Wenn Sie Ihre Kundinnen/Kunden jedoch manuell weiterleiten müssen: 1. Geben Sie die URL an, an die Ihre Kundinnen/Kunden weitergeleitet werden sollen, sobald sie ihre Zahlung abgeschlossen haben. ```curl curl https://api.stripe.com/v1/payment_intents/pi_1DRuHnHgsMRlo4MtwuIAUe6u/confirm \ -u "<>:" \ -d payment_method=pm_1EnPf7AfTbPYpBIFLxIc8SD9 \ --data-urlencode "return_url=https://shop.example.com/crtA6B28E1" ``` 1. Bestätigen Sie, dass sich der `PaymentIntent` im Status `requires_action` befindet. Der Typ für die `next_action` ist `redirect_to_url`. ```json "next_action": { "type": "redirect_to_url", "redirect_to_url": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } } ``` 1. Leiten Sie Kundinnen/Kunden an die in der Eigenschaft `next_action` angegebene URL weiter. Bei Abschluss des Bezahlvorgangs werden die Kundinnen/Kunden an das Ziel `return_url` weitergeleitet. Die URL-Abfrageparameter `payment_intent` und `payment_intent_client_secret` sind enthalten und Sie können wie oben beschrieben Ihre eigenen Abfrageparameter übergeben. ## Optional: Ereignisse nach der Zahlung verarbeiten Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). - **Manuelles Bearbeiten von Ereignissen im Dashboard** Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen. - **Erstellen eines benutzerdefinierten Webhooks** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Integrieren einer vorgefertigten App** Bearbeiten Sie häufige Unternehmensereignisse, wie z. B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren. ### Ihre Integration testen Testen Sie die Integration Ihrer Kryptozahlung, indem Sie die Weiterleitungsseite der Zahlung mit Ihren Test-API-Schlüsseln öffnen. Sie können einen erfolgreichen Zahlungsablauf kostenlos mit [Testnet-Assets](https://docs.stripe.com/payments/accept-stablecoin-payments.md#testnet-assets) testen. 1. Erstellen Sie in einer *Sandbox* eine neue Transaktion mit der von Ihnen gewählten Integrationsmethode und öffnen Sie die entsprechende Weiterleitungs-URL. 1. Verbinden Sie Ihre bevorzugte Wallet und Ihr bevorzugtes Zahlungsnetzwerk. 1. Schließen Sie die Zahlung ab und bestätigen Sie, dass Sie an die erwartete URL weitergeleitet werden. ### Zahlungen mit Testnet-Assets testen Die meisten Kryptowährungen bieten Testnet-Assets oder -Token ohne Geldwert an, die Sie zum Testen von Blockchain-Transaktionen verwenden können. Stripe empfiehlt die MetaMask-Wallet, das Polygon Amoy Testnet und den Circle-Faucet zum Testen, aber Sie können Ihre eigenen bevorzugten Dienste verwenden. #### Wallet installieren 1. [Laden Sie die MetaMask-Erweiterung](https://metamask.io/download) für Ihren Webbrowser herunter. 1. [Erstellen Sie eine neue Wallet](https://support.metamask.io/start/creating-a-new-wallet/) oder [importieren Sie eine bestehende](https://support.metamask.io/start/use-an-existing-wallet/). #### Testnet aktivieren 1. Wählen Sie in Ihrer MetaMask-Wallet im Hauptmenü **Netzwerke** aus. 1. Klicken Sie auf **Benutzerdefiniertes Netzwerk hinzufügen**. 1. Geben Sie die folgenden Details ein: - **Netzwerkname**: `Amoy` - **Standard-RPC-URL**: `https://rpc-amoy.polygon.technology/` - **Ketten-ID**: `80002` - **Währungssymbol**: `POL` - **Explorer-URL blockieren**: `https://amoy.polygonscan.com/` 1. Klicken Sie auf **Speichern**. #### Token importieren 1. Wählen Sie in Ihrer MetaMask-Wallet unter **Token** die Option **Amoy** aus dem Netzwerk-Dropdown-Menü aus. 1. Klicken Sie auf das Überlaufmenü (⋯) und wählen Sie **Token importieren** aus. 1. Klicken Sie auf **Netzwerk auswählen** > **Amoy**. 1. Fügen Sie unter **Token Vertragsadresse** die Testnet-Vertragsadresse für Polygon Amoy ein: ``` 0x41E94Eb019C0762f9Bfcf9Fb1E58725BfB0e7582 ``` Das Feld **Tokensymbol** wird automatisch mit `USDC` und das Feld **Dezimalstellen** mit `6` aktualisiert. 1. Klicken Sie auf **Weiter**. 1. Verifizieren Sie, dass Sie den `USDC`-Token importieren, und klicken Sie dann auf **Importieren**. Ihre MetaMask-Wallet zeigt jetzt **POL** und **USDC** in der Tokenliste an. Beim Testen von Rückerstattungen kann es vorkommen, dass der an Ihre Wallet gesendete Token einen anderen Vertrag hat als derjenige, der für die Zahlung verwendet wurde. Wir empfehlen Ihnen, den [transaction_hash](https://docs.stripe.com/api/refunds/object.md?rds=1#refund_object-destination_details-crypto-reference) Ihrer Rückerstattung im Block Explorer zu überprüfen und den Vertrag dieses Tokens zu Ihrer Wallet hinzuzufügen. Beispielsweise könnte für Sepolia ETH-USDC-Rückerstattungen die Token-Vertragsadresse `0x58277ebcabbe2a6694fbca8daf9e23163dbacf3e` angezeigt werden. #### Testnet-Assets abrufen > Um einige Testnet-Faucets zu verwenden, müssen Sie möglicherweise eine kleine Menge an Mainnet-Token halten. 1. Öffnen Sie [faucet.circle.com](https://faucet.circle.com/) 1. Klicken Sie auf **USDC**. 1. Wählen Sie unter **Netzwerk** **Polygon POS Amoy** aus. 1. Fügen Sie unter **Senden an** Ihre Wallet Adresse ein. 1. Klicken Sie auf **20 USDC senden**. Zusätzlich zu USDC für Zahlungen benötigen Sie POL, um Transaktionskosten zu bezahlen: 1. Öffnen Sie [faucet.polygon.technology](https://faucet.polygon.technology/). 1. Wählen Sie unter **Kette und Token auswählen** **Polygon Amoy** und **POL** aus. 1. Klicken Sie unter **Ihre Identität verifizieren** auf die Drittanbieterplattform, bei der Sie sich authentifizieren möchten, und schließen Sie den Anmeldeprozess ab. 1. Fügen Sie unter **Wallet-Adresse eingeben** Ihre Wallet-Adresse ein. 1. Klicken Sie auf **Anspruch**. Die Durchführung von Testnet-Transaktionen kann einige Minuten dauern. Überprüfen Sie Ihre Wallet, um zu bestätigen, dass die Überweisungen von USDC und POL durchgeführt wurden. ### Weitere Testnet-Faucets Weitere Optionen zum Testen von Token finden Sie in diesen Faucet-Diensten: - [Paxos USDP](https://faucet.paxos.com/) - [Devnet SOL](https://faucet.solana.com/) - [Sepolia ETH](https://faucets.chain.link/sepolia) - [Amoy POL](https://faucet.polygon.technology/)