Weiter zum Inhalt
Konto erstellen oder anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellenAnmelden
ÜbersichtAktualisieren Sie Ihre Integration
Online-Zahlungen
ÜbersichtIhren Use case findenVerwenden Sie Managed Payments
Präsenzzahlungen
Zahlungsmethoden
Zahlungsszenarien
Mehr als Zahlungen

Zahlungen mit PayPay annehmenÖffentliche Vorschau

Erfahren Sie, wie Sie Ihre Integration mit PayPay einrichten können.

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 ermitteln

Für die Unterstützung von PayPay-Zahlungen muss eine Checkout-Sitzung alle folgenden Bedingungen erfüllen:

  • Die Preise für alle Posten müssen in der gleichen Währung angegeben werden.
  • Wenn Sie Posten in verschiedenen Währungen haben, erstellen Sie für jede Währung getrennte Checkout-Sitzungen.

Set up the server
Serverseitig

Verwenden Sie die offiziellen Bibliotheken von Stripe, um von Ihrer Anwendung aus auf die API zuzugreifen.

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'

Create a Checkout Session
Serverseitig

Fügen Sie einen Endpoint auf Ihrem Server hinzu, der eine Checkout-Sitzung erstellt und sein Client-Geheimnis 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, 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: 'jpy',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1000,
        },
        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 der HTML-Datei hinzufügen. Laden Sie Stripe.js immer direkt von js.stripe.com, um PCI-konform zu bleiben. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.

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 bereit, 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'
,
);

Initialize Checkout
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.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}`);
}
index.html
<div id="checkout-container"></div>

Collect customer email
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.
index.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;
      }
    });
  });
}

Zahlungsdaten erfassen
Clientseitig

Erfassen Sie Zahlungsdetails auf dem Client mit dem Payment Element. Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, die die Erfassung von Zahlungsdaten für eine Vielzahl von 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.

index.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.

Submit the payment
Clientseitig

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

index.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;
      }
    });
  });
}

Ihre Integration testen

Um Ihre Integration zu testen, wählen Sie die Zahlungsmethode aus und tippen Sie auf Bezahlen. In einer Sandbox werden Sie auf eine Test-Zahlungsseite weitergeleitet, auf der Sie die Zahlung genehmigen oder ablehnen können.

Wenn Sie im Live-Modus auf Bezahlen tippen, werden Sie zur Website von PayPay weitergeleitet. Mit PayPay haben Sie keine Möglichkeit, die Zahlung zu genehmigen oder abzulehnen.