PayTo-ZahlungenNur auf Einladung

So akzeptieren Sie Zahlungen per PayTo.

PayTo ist eine Echtzeit-Zahlungsmethode in Australien für die Annahme von einmaligen und wiederkehrenden Zahlungen. Bei der Zahlung mit PayTo authentifizieren und genehmigen Kundinnen und Kunden Vereinbarungen mit ihrer mobilen Banking-App.

Sie erhalten eine verzögerte Benachrichtigung darüber, ob die Zahlung erfolgreich war oder nicht. Stripe sendet normalerweise innerhalb von 30 Sekunden nach der Autorisierung der Vereinbarung eine Benachrichtigung über den endgültigen Status der Zahlung.

Vorsicht

Stripe passt die den Kundinnen/Kunden angezeigten Zahlungsmethoden automatisch an Währung, geltende Einschränkungen und andere Parameter an. Wir empfehlen Ihnen, Ihre Zahlungsmethoden im Dashboard zu konfigurieren und sich dabei an dem Artikel Zahlungen annehmen zu orientieren.

Wenn Sie weiterhin manuell konfigurieren möchten, welche Zahlungsmethoden Ihren Kundinnen/Kunden mit Checkout angezeigt werden sollen, können Sie sich an diesem Leitfaden orientieren. Aktualisieren Sie andernfalls Ihre Integration, um Zahlungsmethoden im Dashboard zu konfigurieren.

Stripe einrichten
Serverseitig

Zunächst benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.

Um von Ihrer Anwendung auf die Stripe API zuzugreifen, verwenden Sie unsere offiziellen Bibliotheken:

PaymentIntent erstellen
Serverseitig

Ein PaymentIntent ist ein Objekt, das Ihre Absicht darstellt, eine Kundenzahlung einzuziehen, und den Zahlungsvorgang dokumentiert. Um einen PaymentIntent zu erstellen, der eine ShopeePay-Zahlungsmethode akzeptiert, geben Sie den einzuziehenden Betrag, aud als Währung und payto in der Liste der payment_method_types an. Wenn Sie eine Liste mit Zahlungsmethodentypen haben, die Sie beim Erstellen eines PaymentIntent übergeben, fügen Sie dieser Liste payto hinzu.

Client-Geheimnis abrufen

Im PaymentIntent ist ein Client-Geheimnis enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client.

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:

Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

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.

Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine HTTPS-Verbindung sicher 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 verlangen.

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, wenn Sie zur Annahme von Live-Zahlungen bereit sind.

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.

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

Erstellen Sie auf Ihrer Bezahlseite eine Instanz von Stripe mit dem folgenden JavaScript:

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'
, {
  betas: 'payto_pm_beta_1',
});

Payment Element Ihrer Bezahlseite hinzufügen

Das Payment Element benötigt einen festen Platz auf Ihrer Zahlungsseite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular:

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Wenn das vorherige Formular geladen wurde, erstellen Sie eine Instanz des Payment Element und verbinden es mit dem DOM-Knoten (Container). Übergeben Sie das Client-Geheimnis aus dem vorherigen Schritt an options, wenn Sie die Elements-Instanz erstellen:

Gehen Sie sorgfältig mit dem Client-Geheimnis um, denn es kann die Zahlung abschließen. Protokollieren Sie es nicht, betten Sie es nicht in URLs ein und geben Sie es nur dem/der Kund/in preis.

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);
// Optional: Autofill user's saved payment methods. If the customer's
// email is known when the page is loaded, you can pass the email
// to the linkAuthenticationElement on mount:
//
//   linkAuthenticationElement.mount("#link-authentication-element",  {
//     defaultValues: {
//       email: 'jenny.rosen@example.com',
//     }
//   })

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Zahlung an Stripe senden
Clientseitig

Verwenden Sie stripe.confirmPayment, um die Zahlung mit den Angaben aus dem Payment Element abzuschließen. Dadurch wird eine Autorisierungsanfrage an die Käufer/innen gesendet.

Notiz

Die Ausführung von stripe.confirmPayment kann einige Sekunden dauern, während Sie auf die Autorisierung der Zahlung auf Kundenseite warten. Während dieser Zeit sollten Sie Ihr Formular deaktivieren, damit keine erneute Absendung erfolgen kann. Lassen Sie stattdessen ein Wartesymbol einblenden, wie beispielsweise eine Sanduhr. Tritt ein Fehler auf, lassen Sie eine Fehlermeldung für die Kundin/den Kunden anzeigen, aktivieren Sie das Formular erneut und blenden Sie das Wartesymbol aus.

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error, paymentIntent} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    redirect: 'if_required',
  });

  const message = document.querySelector('#message')
  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    message.innerText = error.message;
  } else {
    // This will execute if the confirm request is successful, or if the
    // payment fails asynchronously.
    switch (paymentIntent.status) {
      case 'succeeded':
        message.innerText = 'Success! Payment received.';
        break;

      case 'processing':
        message.innerText = "Payment processing. We'll update you when payment is received.";
        break;

      case 'requires_payment_method':
        message.innerText = 'Payment failed. Please try another payment method.';
        // Redirect your user back to your payment page to attempt collecting
        // payment again
        break;

      default:
        message.innerText = 'Something went wrong.';
        break;
    }
  }
});

Integration testen

Testen Sie Ihre PayTo-Integration mit Ihren Test-API-Schlüsseln, indem Sie die verschiedenen Test-PayIDs und Bankkontodaten unten verwenden. Jeder Datensatz hat ein anderes Szenario zufolge, mit dem Ihre Integration im Live-Modus häufig konfrontiert wird.

PayID	Beschreibung

`{any_prefix}+succeed@{any_domain}`	Der Status des PaymentIntent wechselt nach 20 Sekunden von `requires_action` zu `processing` und dann nach weiteren 2 Sekunden zu `succeeded`.
`{any_prefix}+decline@{any_domain}`	Der Status des PaymentIntent wechselt nach 20 Sekunden von `requires_action` zu `requires_payment_method`. Stripe gibt den Fehlercode `payment_method_provider_decline` und den Ablehnungscode `invalid_authorization` zurück.
`{any_prefix}+expire@{any_domain}`	Der Status des PaymentIntent wechselt nach 1 Minute von `requires_action` zu `requires_payment_method`. Stripe gibt den Fehlercode `payment_method_provider_timeout` und den Ablehnungscode `generic_decline` zurück.
`{any_prefix}+insufficient_funds@{any_domain}`	Der Status des PaymentIntent wechselt nach 20 Sekunden von `requires_action` zu `processing` und dann nach weiteren 2 Sekunden zu `requires_payment_method`. Stripe gibt den Fehlercode `payment_method_provider_decline` und den Ablehnungscode `insufficient_funds` zurück.
`{any_prefix}+agreement_type_not_supported@{any_domain}`	Der Status des PaymentIntent wechselt nach 20 Sekunden von `requires_action` zu `requires_payment_method`. Stripe gibt den Fehlercode `payment_method_provider_decline` zurück. Das Mandat geht in den Status `inactive` über.