Weiter zum Inhalt
Konto erstellen oder anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellenAnmelden
ÜbersichtZahlung annehmenAktualisieren Sie Ihre Integration
Online-Zahlungen
ÜbersichtIhren Use case findenVerwenden Sie Managed PaymentsWiederkehrende Zahlungen
Präsenzzahlungen
Zahlungsmethoden
Zahlungsvorgänge
Salden und AbwicklungsdauerZahlungsbelegeRückerstattungen und Stornierungen
Erweiterte Integrationen
Mehr als Zahlungen

Cash App Pay-Zahlungen

Fügen Sie Ihrer Integration Unterstützung für Cash App Pay hinzu.

Verwenden Sie das Payment Element, 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

Kompatibilität bestimmen

Für die Unterstützung von Zahlungen per Cash App Pay muss eine Checkout-Sitzung alle folgenden Bedingungen erfüllen:

  • Die Preise für alle Posten müssen in USD angegeben werden.

Server einrichten
Serverseitig

Verwenden Sie die offiziellen Bibliotheken von Stripe für den Zugriff auf die Stripe-API über Ihre Anwendung.

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Checkout-Sitzung erstellen
Serverseitig

Fügen Sie auf Ihrem Server einen Endpoint hinzu, der eine Checkout-Session erstellt und sein Client-Geheimnis an Ihr Frontend zurückgibt. Eine Checkout-Sitzung stellt die Sitzung Ihrer Kundin/Ihres Kunden dar, während sie/er für einmalige Käufe oder Abos bezahlt. Checkout-Sitzungen laufen 24 Stunden nach Erstellung ab.

Wir empfehlen die Verwendung dynamischer Zahlungsmethoden, um allen Kundinnen und Kunden dynamisch die relevantesten infrage kommenden Zahlungsmethoden anzuzeigen und die Konversionsrate zu maximieren. Sie können Zahlungsmethoden auch manuell auflisten, wodurch dynamische Zahlungsmethoden deaktiviert werden.

server.ts
TypeScript
Node.js
Ruby
PHP
Python
Gehen Sie zu
.NET
Java
No results
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: 'custom',
    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

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.<script src=“https://js.stripe.com/clover/stripe.js”></script>. Erfahren Sie mehr über die Versionierung von Stripe.js.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></script>
</head>

Hinweis

Stripe stellt ein npm-Paket zur Verfügung, mit dem Sie Stripe.js als Modul laden können. Siehe das Projekt auf GitHub. Version 7.0.0 oder höher ist erforderlich.

Stripe.js initialisieren

checkout.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(
  
'pk_test_TYooMQauvdEDq54NiTphI7jx'
,
);

Bezahlvorgang initialisieren
Clientseitig

Erstellen Sie entweder ein clientSecret-Promise, das mit dem Client-Geheimnis aufgelöst wird oder legen Sie es direkt als Geheimnis fest. Rufen Sie initCheckout auf und übergeben Sie clientSecret. initCheckout gibt ein Promise zurück, das in eine Checkout-Instanz aufgelöst wird.

Das Objekt Checkout bildet die Grundlage Ihre Checkout-Seite und enthält Daten aus der Checkout-Sitzung sowie Methoden zum Aktualisieren der Sitzung.

Das von actions.getSession() zurückgegebene Objekt enthält Ihre Preisinformationen. Wir empfehlen, total und lineItems aus der Sitzung in Ihrer Nutzeroberfläche zu lesen und anzuzeigen.

Auf diese Weise können Sie neue Funktionen mit minimalen Codeänderungen aktivieren. Zum Beispiel erfordert das Hinzufügen von Preisen in manuellen Währungen keine Änderungen der Nutzeroberfläche, wenn Sie den Parameter total anzeigen.

checkout.html
<div id="checkout-container"></div>
checkout.js
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({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}`);
}

Kunden-E-Mail-Adresse erfassen
Clientseitig

Erstellen Sie eine E-Mail-Eingabe, um die E-Mail-Adresse Ihrer Kundinnen und Kunden zu erfassen. Rufen Sie updateEmail auf, wenn Ihre Kundin/Ihre Kunde die Eingabe abgeschlossen hat, um die E-Mail-Adresse zu validieren und zu speichern.

Je nach Design Ihres Bezahlformulars können Sie updateEmail folgendermaßen aufrufen:

  • Direkt vor dem Senden der Zahlung. Sie können auch updateEmail aufrufen, um die Validierung zu einem früheren Zeitpunkt durchzuführen, z. B. bei Eingabeunschärfe.
  • Vor dem Übergang zum nächsten Schritt, z. B. dem Klicken auf die Schaltfläche Speichern, wenn Ihr Formular mehrere Schritte umfasst.
checkout.html
<input type="text" id="email" />
<div id="email-errors"></div>
checkout.js
const checkout = stripe.initCheckout({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;
      }
    });
  });
}

Zahlungsdetails erfassen
Clientseitig

Erfassen Sie Zahlungsdetails auf dem Client mit dem Payment Element. Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, das die Erfassung von Zahlungsdaten für verschiedene Zahlungsmethoden vereinfacht.

Erstellen Sie zunächst ein Container-DOM-Element, um das Payment Element zu verbinden. Erstellen Sie dann eine Instanz des Payment Element mit checkout.createPaymentElement und verbinden Sie es durch Aufrufen von element.mount, wobei Sie entweder einen CSS-Selektor oder das Container-DOM-Element angeben.

checkout.html
<div id="payment-element"></div>
checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

Die unterstützten Optionen finden Sie in der Stripe.js-Dokumentation.

Sie können das Erscheinungsbild aller Elements anpassen, indem Sie elementsOptions.appearance übergeben, wenn Sie Checkout im Frontend initialisieren.

Zahlung übermitteln
Clientseitig

Zeigen Sie eine Schaltfläche Bezahlen an, die confirm von der Checkout-Instanz aufruft, um die Zahlung zu übermitteln.

checkout.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
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;
      }
    });
  });
}

Integration testen

Um Ihre Integration zu testen, wählen Sie als Zahlungsmethode Cash App Pay aus und tippen Sie auf Bezahlen. Während des Tests werden Sie auf eine Testzahlungsseite weitergeleitet, auf der Sie die Zahlung genehmigen oder ablehnen können.

Wenn Sie im Live-Modus auf Bezahlen tippen, werden Sie zur mobilen Anwendung von Cash App weitergeleitet. In der Cash App haben Sie keine Möglichkeit, die Zahlung zu genehmigen oder abzulehnen. Die Zahlung wird nach abgeschlossener Weiterleitung automatisch genehmigt.