Thanks for your order!

` in Ihrem Zahlungsformular. Checkout wird in einem iFrame gerendert, der Zahlungsdaten sicher über eine HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, Checkout in einem anderen iFrame zu platzieren, da bei einigen Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung erforderlich ist. ### Checkout initialisieren Um den untergeordneten Komponenten den Zugriff auf den Stripe-Dienst über eingebettete Checkout-Verbraucher/innen zu ermöglichen, übergeben Sie das resultierende Promise von `loadStripe` und das Client-Geheimnis als `option` an den integrierten Checkout-Anbieter. ### Endpoint erstellen, um eine Checkout-Sitzung abzurufen Fügen Sie einen Endpoint hinzu, um den Status einer Checkout-Sitzung abzurufen. ### Rückgabeseite hinzufügen Um Ihren Kundinnen und Kunden Bestellinformationen anzuzeigen, erstellen Sie eine Rückgabeseite für die URL, die Sie als `return_url` der Checkout-Sitzung angegeben haben. Stripe führt die Weiterleitung zu dieser Seite durch, nachdem der Kunde/die Kundin den Bezahlvorgang abgeschlossen hat. ### Rückgabekomponente hinzufügen Um Ihren Kundinnen und Kunden Bestellinformationen anzuzeigen, fügen Sie eine neue Route und eine Rückgabekomponente für die URL hinzu, die Sie als `return_url` der Checkout-Sitzung angegeben haben. Stripe führt die Weiterleitung zu dieser Seite durch, nachdem der Kunde/die Kundin den Bezahlvorgang abgeschlossen hat. ### Rückgabeseite hinzufügen Um Ihren Kundinnen und Kunden Bestellinformationen anzuzeigen, fügen Sie unter `pages/` eine Datei für die URL hinzu, die Sie als `return_url` der Checkout-Sitzung angegeben haben. Stripe leitet Ihren Kunden/Ihre Kundin an diese Seite weiter, nachdem er/sie den Bezahlvorgang abgeschlossen hat. ### Eine Checkout-Sitzung abrufen Sobald Ihre Rückgabeseite geladen ist, stellen Sie sofort eine Anfrage an den Endpoint auf Ihrem Server. Verwenden Sie die Checkout Session-ID in der URL, um den Status der Checkout-Sitzung abzurufen. ### Sitzung verarbeiten Verarbeiten Sie das Ergebnis der Sitzung anhand ihres Status: - `complete`: Die Zahlung war erfolgreich. Verwenden Sie die Informationen aus der Checkout-Sitzung, um eine Bestätigungsseite zu rendern. - `open`: Die Zahlung ist fehlgeschlagen oder wurde storniert. Stellen Sie erneut eine Verbindung zu Checkout her, damit Ihre Kundinnen/Kunden es erneut versuchen können. ### Legen Sie Ihre Umgebungsvariablen fest Fügen Sie Ihre veröffentlichbaren und Geheimschlüssel zu einer `.env`-Datei hinzu. Next.js lädt sie automatisch als [Umgebungsvariablen](https://nextjs.org/docs/basic-features/environment-variables) in ihre Anwendung. Jeder Webhook-Endpoint verfügt über ein eindeutiges Signatur-Geheimnis. Webhooks werden in [Workbench](https://docs.stripe.com/workbench.md) im Dashboard verwaltet. Das Geheimnis finden Sie in der Detailansicht des Ziels für Ihren Webhook-Endpoint in der [Registerkarte Webhooks](https://dashboard.stripe.com/workbench/webhooks) von Workbench. Wenn Sie lokal mit der Stripe-CLI testen, können Sie das Geheimnis auch über die CLI-Ausgabe mit dem Befehl `stripe listen` abrufen. Um ein Signatur-Geheimnis für einen Webhook-Endpoint zur Überwachung von [Ereignissen](https://docs.stripe.com/event-destinations.md) hinzuzufügen, rufen Sie die Registerkarte [Ereignisziele](https://dashboard.stripe.com/workbench/webhooks) in Workbench auf oder verwenden Sie die [Stripe-CLI](https://docs.stripe.com/stripe-cli.md). ### Anwendung ausführen Starten Sie Ihren Server und gehen Sie zu . ### Anwendung ausführen Starten Sie Ihren Server und gehen Sie zu . ### Anwendung ausführen Starten Sie Ihre Anwendung mit `npm run dev` und gehen Sie zu . ### Jetzt testen Klicken Sie auf die Schaltfläche „Bezahlen“, um die Zahlung abzuschließen, die Sie auf die angegebene Rückgabeseite weiterleitet. Wenn Sie die Rückgabeseite und die Zahlung in der Liste der [erfolgreichen Zahlungen](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful) im Dashboard sehen, funktioniert Ihre Integration erfolgreich. Verwenden Sie eine der folgenden Testkarten, um eine Zahlung zu simulieren: | Scenario | Card Number | | ----------------------------------- | ---------------- | | Payment succeeds | 4242424242424242 | | Payment requires 3DS authentication | 4000002500003155 | | Payment is declined | 4000000000009995 | ## Herzlichen Glückwunsch! Ihre grundlegende Checkout-Integration funktioniert. Erfahren Sie nun, wie Sie das Erscheinungsbild Ihrer Bezahlseite anpassen und den Steuereinzug automatisieren können. ### Checkout-Seite anpassen [Passen Sie](https://docs.stripe.com/payments/checkout/customization.md) das Erscheinungsbild des eingebetteten Formulars an, indem Sie: - Fügen Sie Ihr Farbdesign und Ihre Schriftart zu Ihren [Branding-Einstellungen](https://dashboard.stripe.com/settings/branding/checkout) hinzu. - Mit der [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions/create.md) zusätzliche Funktionen wie das Erfassen von Adressen und das Vorausfüllen von Kundendaten aktivieren. ### Kundendaten vorab ausfüllen Verwenden Sie [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), um die E-Mail-Adresse des Kunden/der Kundin in das E-Mail-Eingabefeld zu übernehmen. Sie können auch eine [Kunden](https://docs.stripe.com/api/customers.md)-ID an das Feld `customer` übergeben, um die für den Kunden/die Kundin gespeicherte E-Mail-Adresse in das E-Mail-Adressfeld zu übernehmen. ### Schaltfläche zum Absenden auswählen Ändern Sie den Text der Schaltfläche „Senden“, um zu `pay`, `donate` oder `book`, indem Sie den [submit_type](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-submit_type) festlegen. Der Standardtext ist `pay`. ### Angaben zur Abrechnung und zum Versand erfassen Verwenden Sie [billing_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) und [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection), um die Adresse Ihres Kunden/Ihrer Kundin zu erfassen. [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection) erfordert eine Liste von `allowed_countries`. Checkout zeigt diese in einem Dropdown-Menü auf der Seite an. ### Steuereinzug automatisieren Berechnen und erheben Sie den richtigen Steuerbetrag für Ihre Stripe-Transaktionen. Erfahren Sie mehr über [Stripe Tax](https://docs.stripe.com/tax.md) und [Stripe Tax zu Checkout hinzugefügt wird](https://docs.stripe.com/tax/checkout.md). ### Richten Sie Stripe Tax im Dashboard ein [Aktivieren Sie Stripe Tax](https://dashboard.stripe.com/tax), um Ihre Steuerverpflichtungen zu überwachen, Steuern automatisch einzuziehen und auf die Berichte zuzugreifen, die Sie zum Einreichen von Steuererklärungen benötigen. ### Parameter für den automatischen Steuereinzug hinzufügen Setzen Sie den Parameter `automatic_tax` auf `enabled: true`. ### Neue und wiederkehrende Kundinnen und Kunden Standardmäßig erstellt Checkout nur dann [Kundinnen und Kunden](https://docs.stripe.com/api/customers.md), wenn ein Kunde/eine Kundin erforderlich ist (z. B. für Abonnements). Andernfalls verwendet Checkout [Gastkundinnen und Gastkunden](https://docs.stripe.com/payments/checkout/guest-customers.md), um Zahlungen im Dashboard zu gruppieren. Optional können Sie Checkout so konfigurieren, dass immer neue Kundinnen und Kunden erstellt werden oder dass wiederkehrende Kundinnen und Kunden angegeben werden. ### Kundinnen und Kunden immer erstellen Um immer dann Kundinnen und Kunden zu erstellen, wenn keine Kundin/ein Kunde angegeben ist, legen Sie [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_creation) auf `'always'` fest. ### Geben Sie wiederkehrende Kundinnen und Kunden an Um einen Bezahlvorgang mit einem bereits vorhandenen Kunden/einer bereits vorhandenen Kundin zu verknüpfen, geben Sie [den Kunden/die Kundin](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) beim Erstellen einer Sitzung an. Wenn Sie Kunden/Kundinnen mit Accounts v2 modellieren, können Sie auch eine Konto-ID an das Feld [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) übergeben, um die zugehörige E-Mail-Adresse vorab auszufüllen. Erfahren Sie mehr über den [Unterschied zwischen der Verwendung von v1-Customers und v2-Accounts](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md). // This test secret API key is a placeholder. Don't include personal details in requests with this key. // To see your test secret API key embedded in code samples, sign in to your Stripe account. // You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys. // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. const stripe = require('stripe')('<>'); const YOUR_DOMAIN = 'http://localhost:4242'; const YOUR_DOMAIN = 'http://localhost:3000'; const session = await stripe.checkout.sessions.create({ ui_mode: 'embedded_page', customer_email: 'customer@example.com', submit_type: 'donate', billing_address_collection: 'auto', shipping_address_collection: { allowed_countries: ['US', 'CA'], }, line_items: [ { // Provide the exact Price ID (for example, price_1234) of the product you want to sell price: '{{PRICE_ID}}', quantity: 1, }, ], mode: {{CHECKOUT_MODE}}, return_url: `${YOUR_DOMAIN}/return?session_id={CHECKOUT_SESSION_ID}`, return_url: `${YOUR_DOMAIN}/return.html?session_id={CHECKOUT_SESSION_ID}`, automatic_tax: {enabled: true}, customer_creation: 'always', // Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session // customer: '{{CUSTOMER_ID}}' }); res.send({clientSecret: session.client_secret}); app.get('/session-status', async (req, res) => { const session = await stripe.checkout.sessions.retrieve(req.query.session_id); res.send({ status: session.status, customer_email: session.customer_details.email }); }); { "name": "stripe-sample", "version": "1.0.0", "description": "A sample Stripe implementation", "main": "server.js", "scripts": { "start": "node server.js" }, "author": "stripe-samples", "license": "ISC", "dependencies": { "express": "^4.17.1", "stripe": "^21.0.1" } } { "name": "stripe-sample", "version": "0.1.0", "dependencies": { "@stripe/react-stripe-js": "^3.7.0", "@stripe/stripe-js": "^7.3.0", "express": "^4.17.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^3.4.0", "stripe": "21.0.1" }, "devDependencies": { "concurrently": "4.1.2" }, "homepage": "http://localhost:3000/checkout", "proxy": "http://localhost:4242", "scripts": { "start-client": "react-scripts start", "start-server": "node server.js", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "start": "concurrently \"yarn start-client\" \"yarn start-server\"" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } \# This test secret API key is a placeholder. Don't include personal details in requests with this key. # To see your test secret API key embedded in code samples, sign in to your Stripe account. # You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys. \# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. client = Stripe::StripeClient.new('<>') YOUR_DOMAIN = 'http://localhost:4242' YOUR_DOMAIN = 'http://localhost:3000' session = client.v1.checkout.sessions.create({ ui_mode: 'embedded_page', customer_email: 'customer@example.com', submit_type: 'donate', billing_address_collection: 'required', shipping_address_collection: { allowed_countries: ['US', 'CA'], }, line_items: [{ \# Provide the exact Price ID (for example, price_1234) of the product you want to sell price: '{{PRICE_ID}}', quantity: 1, }], mode: {{CHECKOUT_MODE}}, return_url: YOUR_DOMAIN + '/return.html?session_id={CHECKOUT_SESSION_ID}', return_url: YOUR_DOMAIN + '/return?session_id={CHECKOUT_SESSION_ID}', automatic_tax: {enabled: true}, customer_creation: 'always', \# Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session # customer: '{{CUSTOMER_ID}}' }) {clientSecret: session.client_secret}.to_json get '/session-status' do session = client.v1.checkout.sessions.retrieve(params[:session_id]) {status: session.status, customer_email: session.customer_details.email}.to_json end import stripe \# This test secret API key is a placeholder. Don't include personal details in requests with this key. # To see your test secret API key embedded in code samples, sign in to your Stripe account. # You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys. \# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. client = stripe.StripeClient('<>') YOUR_DOMAIN = 'http://localhost:4242' YOUR_DOMAIN = 'http://localhost:3000' session = client.v1.checkout.sessions.create(params={ 'ui_mode': 'embedded_page', 'customer_email': 'customer@example.com', 'submit_type': 'donate', 'billing_address_collection': 'auto', 'shipping_address_collection': { 'allowed_countries': ['US', 'CA'], }, 'line_items': [ { \# Provide the exact Price ID (for example, price_1234) of the product you want to sell 'price': '{{PRICE_ID}}', 'quantity': 1, }, ], 'mode': {{CHECKOUT_MODE}}, 'return_url': YOUR_DOMAIN + '/return.html?session_id={CHECKOUT_SESSION_ID}', 'return_url': YOUR_DOMAIN + '/return?session_id={CHECKOUT_SESSION_ID}', 'automatic_tax': {'enabled': True}, 'customer_creation': 'always', \# Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session # 'customer': '{{CUSTOMER_ID}}' }) return jsonify(clientSecret=session.client_secret) @app.route('/session-status', methods=['GET']) def session_status(): session = client.v1.checkout.sessions.retrieve(request.args.get('session_id')) return jsonify(status=session.status, customer_email=session.customer_details.email) certifi==2026.1.4 chardet==5.2.0 click==8.3.1 Flask==3.1.2 idna==3.11 itsdangerous==2.2.0 Jinja2==3.1.6 MarkupSafe==3.0.3 requests==2.32.5 stripe==15.0.0 toml==0.10.2 Werkzeug==3.1.5 $stripe = new \Stripe\StripeClient($stripeSecretKey); $YOUR_DOMAIN = 'http://localhost:4242'; $YOUR_DOMAIN = 'http://localhost:3000'; $checkout_session = $stripe->checkout->sessions->create([ 'ui_mode' => 'embedded_page', 'customer_email' => 'customer@example.com', 'submit_type' => 'donate', 'billing_address_collection' => 'required', 'shipping_address_collection' => [ 'allowed_countries' => ['US', 'CA'], ], 'line_items' => [[ \# Provide the exact Price ID (for example, price_1234) of the product you want to sell 'price' => '{{PRICE_ID}}', 'quantity' => 1, ]], 'mode' => {{CHECKOUT_MODE}}, 'return_url' => $YOUR_DOMAIN . '/return.html?session_id={CHECKOUT_SESSION_ID}', 'return_url' => $YOUR_DOMAIN . '/return?session_id={CHECKOUT_SESSION_ID}', 'automatic_tax' => [ 'enabled' => true, ], 'customer_creation' => 'always', \# Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session # 'customer' => '{{CUSTOMER_ID}}' ]); echo json_encode(array('clientSecret' => $checkout_session->client_secret)); try { // retrieve JSON from POST body $jsonStr = file_get_contents('php://input'); $jsonObj = json_decode($jsonStr); $session = $stripe->checkout->sessions->retrieve($jsonObj->session_id); echo json_encode(['status' => $session->status, 'customer_email' => $session->customer_details->email]); http_response_code(200); } catch (Error $e) { http_response_code(500); echo json_encode(['error' => $e->getMessage()]); } // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. $stripeSecretKey = '<>'; // This test secret API key is a placeholder. Don't include personal details in requests with this key. // To see your test secret API key embedded in code samples, sign in to your Stripe account. // You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys. // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. services.AddSingleton(new StripeClient("<>")); var domain = "http://localhost:4242"; var domain = "http://localhost:3000"; UiMode = "embedded_page", CustomerEmail = "customer@example.com", SubmitType = "donate", BillingAddressCollection = "auto", ShippingAddressCollection = new SessionShippingAddressCollectionOptions { AllowedCountries = new List { "US", "CA", }, }, LineItems = new List { new SessionLineItemOptions { // Provide the exact Price ID (for example, price_1234) of the product you want to sell Price = "{{PRICE_ID}}", Quantity = 1, }, }, Mode = {{CHECKOUT_MODE}}, ReturnUrl = domain + "/return.html?session_id={CHECKOUT_SESSION_ID}", ReturnUrl = domain + "/return?session_id={CHECKOUT_SESSION_ID}", AutomaticTax = new SessionAutomaticTaxOptions { Enabled = true }, CustomerCreation = "always", // Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session // Customer="cus_RnhPlBnbBbXapY", Session session = _client.V1.Checkout.Sessions.Create(options); return Json(new {clientSecret = session.ClientSecret}); [Route("session-status")] [ApiController] public class SessionStatusController : Controller { private readonly StripeClient _client; public SessionStatusController(StripeClient client) { _client = client; } [HttpGet] public ActionResult SessionStatus([FromQuery] string session_id) { Session session = _client.V1.Checkout.Sessions.Get(session_id); return Json(new {status = session.Status, customer_email = session.CustomerDetails.Email}); } } "github.com/stripe/stripe-go/v85" // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. sc := stripe.NewClient("<>") domain := "http://localhost:4242" domain := "http://localhost:3000" params := &stripe.CheckoutSessionCreateParams{ UIMode: stripe.String("embedded_page"), ReturnURL: stripe.String(domain + "/return.html?session_id={CHECKOUT_SESSION_ID}"), ReturnURL: stripe.String(domain + "/return?session_id={CHECKOUT_SESSION_ID}"), CustomerEmail: stripe.String("customer@example.com"), SubmitType: stripe.String("donate"), BillingAddressCollection: stripe.String("auto"), ShippingAddressCollection: &stripe.CheckoutSessionShippingAddressCollectionParams{ AllowedCountries: stripe.StringSlice([]string{ "US", "CA", }), }, LineItems: []*stripe.CheckoutSessionCreateLineItemParams{ { // Provide the exact Price ID (for example, price_1234) of the product you want to sell Price: stripe.String("{{PRICE_ID}}"), Quantity: stripe.Int64(1), }, }, Mode: stripe.String("{{CHECKOUT_MODE}}"), AutomaticTax: &stripe.CheckoutSessionAutomaticTaxParams{Enabled: stripe.Bool(true)}, CustomerCreation: stripe.String(stripe.CheckoutSessionCustomerCreationAlways), // Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session // Customer: stripe.String("{{CUSTOMER_ID}}"), } s, err := sc.V1CheckoutSessions.Create(context.TODO(), params) if err != nil { log.Printf("sc.V1CheckoutSessions.Create: %v", err) } writeJSON(w, struct { ClientSecret string `json:"clientSecret"` }{ ClientSecret: s.ClientSecret, }) func retrieveCheckoutSession(sc *stripe.Client, w http.ResponseWriter, r *http.Request) { s, _ := sc.V1CheckoutSessions.Retrieve(context.TODO(), r.URL.Query().Get("session_id"), nil) writeJSON(w, struct { Status string `json:"status"` CustomerEmail string `json:"customer_email"` }{ Status: string(s.Status), CustomerEmail: string(s.CustomerDetails.Email), }) } require github.com/stripe/stripe-go/v85 v85.0.0 // This test secret API key is a placeholder. Don't include personal details in requests with this key. // To see your test secret API key embedded in code samples, sign in to your Stripe account. // You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys. // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. StripeClient client = new StripeClient("<>"); String YOUR_DOMAIN = "http://localhost:4242"; String YOUR_DOMAIN = "http://localhost:3000"; SessionCreateParams params = SessionCreateParams.builder() .setUiMode(SessionCreateParams.UiMode.EMBEDDED_PAGE) .setCustomerEmail("customer@example.com") .setSubmitType(SessionCreateParams.SubmitType.DONATE) .setBillingAddressCollection(SessionCreateParams.BillingAddressCollection.REQUIRED) .setShippingAddressCollection( SessionCreateParams.ShippingAddressCollection.builder() .addAllowedCountry(SessionCreateParams.ShippingAddressCollection.AllowedCountry.CA) .addAllowedCountry(SessionCreateParams.ShippingAddressCollection.AllowedCountry.US) .build()) .setMode({{CHECKOUT_MODE}}) .setReturnUrl(YOUR_DOMAIN + "/return?session_id={CHECKOUT_SESSION_ID}") .setReturnUrl(YOUR_DOMAIN + "/return.html?session_id={CHECKOUT_SESSION_ID}") .setAutomaticTax( SessionCreateParams.AutomaticTax.builder() .setEnabled(true) .build()) .setCustomerCreation(SessionCreateParams.CustomerCreation.ALWAYS) // Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session // .setCustomer("{{CUSTOMER_ID}}") .addLineItem( SessionCreateParams.LineItem.builder() .setQuantity(1L) // Provide the exact Price ID (for example, price_1234) of the product you want to sell .setPrice("{{PRICE_ID}}") .build()) .build(); Map map = new HashMap(); map.put("clientSecret", session.getRawJsonObject().getAsJsonPrimitive("client_secret").getAsString()); return map; get("/session-status", (request, response) -> { Session session = client.v1().checkout().sessions().retrieve(request.queryParams("session_id")); Map map = new HashMap(); map.put("status", session.getRawJsonObject().getAsJsonPrimitive("status").getAsString()); map.put("customer_email", session.getRawJsonObject().getAsJsonObject("customer_details").getAsJsonPrimitive("email").getAsString()); return map; }, gson::toJson);

We appreciate your business! A confirmation email will be sent to {customerEmail}. If you have any questions, please email orders@example.com.

) } return null; } } /> { "name": "stripe-sample", "version": "0.1.0", "dependencies": { "@stripe/react-stripe-js": "^3.7.0", "@stripe/stripe-js": "^7.3.0", "express": "^4.17.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^3.4.0", "stripe": "^8.202.0" }, "devDependencies": { "concurrently": "4.1.2" }, "homepage": "http://localhost:3000/checkout", "proxy": "http://localhost:4242", "scripts": { "start-client": "react-scripts start", "start-server": "node server.js", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "start": "concurrently \"yarn start-client\" \"yarn start-server\"" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@stripe/react-stripe-js": "^3.7.0", "@stripe/stripe-js": "^7.3.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^3.4.0" }, "homepage": "http://localhost:3000/checkout", "proxy": "http://localhost:4242", "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } // Create Checkout Sessions from body params. const session = await stripe.checkout.sessions.create({ ui_mode: 'embedded_page', customer_email: 'customer@example.com', submit_type: 'donate', billing_address_collection: 'auto', shipping_address_collection: { allowed_countries: ['US', 'CA'], }, line_items: [ { // Provide the exact Price ID (for example, price_1234) of // the product you want to sell price: '{{PRICE_ID}}', quantity: 1 } ], mode: 'payment', return_url: `${origin}/return?session_id={CHECKOUT_SESSION_ID}`, automatic_tax: {enabled: true}, }) import { EmbeddedCheckout, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js' import { loadStripe } from '@stripe/stripe-js' import { fetchClientSecret } from '../actions/stripe' const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY) \# https://dashboard.stripe.com/apikeys NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<> STRIPE_SECRET_KEY=<> \# Set this environment variable to support webhooks — https://stripe.com/docs/webhooks#verify-events # STRIPE_WEBHOOK_SECRET=whsec_12345 export default async function Return({ searchParams }) { const { status, customer_details: { email: customerEmail } } = await stripe.checkout.sessions.retrieve(session_id, { expand: ['line_items', 'payment_intent'] }) if (status === 'open') { return redirect('/') } if (status === 'complete') { return (

We appreciate your business! A confirmation email will be sent to{' '} {customerEmail}. If you have any questions, please email{' '}

orders@example.com.

) } import 'server-only' import Stripe from 'stripe' export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY) 1. Build the server ~~~ pip3 install -r requirements.txt ~~~ 1. Build the server ~~~ bundle install ~~~ 1. Build the server ~~~ composer install ~~~ 1. Build the server ~~~ dotnet restore ~~~ 1. Build the server ~~~ mvn package ~~~ 2. Run the server ~~~ export FLASK_APP=server.py python3 -m flask run --port=4242 ~~~ 2. Run the server ~~~ ruby server.rb -o 0.0.0.0 ~~~ 2. Run the server ~~~ php -S 127.0.0.1:4242 --docroot=public ~~~ 2. Run the server ~~~ dotnet run ~~~ 2. Run the server ~~~ java -cp target/sample-jar-with-dependencies.jar com.stripe.sample.Server ~~~ 3. Build the client app ~~~ npm install ~~~ 4. Run the client app ~~~ npm start ~~~ If you run into an error, when running npm start, try running the following code and starting again: ~~~ export NODE_OPTIONS=--openssl-legacy-provider ~~~ 5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout) 3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html) 3. Build the client app ~~~ npm install ~~~ 4. Run the client app ~~~ npm start ~~~ 5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout) 3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html) 3. Build the client app ~~~ npm install ~~~ 4. Run the client app ~~~ npm start ~~~ 5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout) 3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html) 3. Build the client app ~~~ npm install ~~~ 4. Run the client app ~~~ npm start ~~~ 5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout) 3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html) 3. Build the client app ~~~ npm install ~~~ 4. Run the client app ~~~ npm start ~~~ 5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout) 3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html) 1. Run the server ~~~ go run server.go ~~~ 2. Build the client app ~~~ npm install ~~~ 3. Run the client app ~~~ npm start ~~~ 4. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout) 1. Run the server ~~~ go run server.go ~~~ 2. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html) 1. Build the application ~~~ npm install ~~~ 2. Run the application ~~~ npm start ~~~ 3. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout) 1. Build the server ~~~ npm install ~~~ 2. Run the server ~~~ npm start ~~~ 3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html) \### Development 1. Build the application ~~~shell $ npm install ~~~ 2. _Optional_: download and run the [Stripe CLI](https://stripe.com/docs/stripe-cli) ~~~shell $ stripe listen --forward-to localhost:3000/api/webhooks ~~~ 3. Run the application ~~~shell $ STRIPE_WEBHOOK_SECRET=$(stripe listen --print-secret) npm run dev ~~~ 4. Go to [localhost:3000](http://localhost:3000) ### Production 1. Build the application ~~~shell $ npm install $ npm build ~~~ 2. Run the application ~~~shell $ npm start ~~~ ## Nächste Schritte #### [Bestellungen ausführen](https://docs.stripe.com/checkout/fulfillment.md) Richten Sie einen Webhook ein, um Bestellungen nach erfolgreicher Zahlung auszuführen. Webhooks sind der zuverlässigste Weg, geschäftskritische Ereignisse zu verarbeiten. #### [Auszahlungen empfangen](https://docs.stripe.com/payouts.md) Erfahren Sie, wie Sie Gelder von Ihrem Stripe-Konto auf Ihr Bankkonto überweisen können. #### [Zahlungen zurückerstatten und stornieren](https://docs.stripe.com/refunds.md) Bearbeiten Sie Rückerstattungsanfragen über die Stripe-API oder das Dashboard. #### [Kundenverwaltung](https://docs.stripe.com/customer-management.md) Lassen Sie Ihre Kundinnen und Kunden ihre Zahlungsdaten, Rechnungen und Abonnements selbst verwalten