Weiter zum Inhalt
Konto erstellen
 oder
anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellen
Anmelden
ÜbersichtAktualisieren Sie Ihre Integration
Online-Zahlungen
ÜbersichtIhren Use case findenZahlungen verwalten
Zahlungsmethoden
Zahlungsschnittstellen
Zahlungsszenarien
Präsenzzahlungen
Mehr als Zahlungen

MB Way-ZahlungenNur auf Einladung

So akzeptieren Sie die Zahlungsmethode MB WAY.

MB WAY ist eine Digital Wallet-Zahlungsmethode in Portugal. Bei der Zahlung mit MB WAY veranlassen Kundinnen/Kunden Zahlungen mit ihrer Telefonnummer und authentifizieren und genehmigen diese mit ihrer MB WAY-App.

Sie werden sofort benachrichtigt, ob die Zahlung erfolgreich war oder fehlgeschlagen ist.

Notiz

MB WAY unterstützt internationale Telefonnummern, aber die Mehrheit der Kundinnen und Kunden verwendet eine portugiesische Telefonnummer, die mit +351 beginnt. Sie können Ihre Integration in einer Sandbox mit Testtelefonnummern testen.

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

Erstellen Sie zunächst ein Stripe-Konto oder melden Sie sich an.

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

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

Erstellen Sie ein PaymentIntent
Serverseitig

Ein PaymentIntent ist ein Objekt, das Ihre Absicht darstellt, eine Kundenzahlung einzuziehen, und den Zahlungsvorgang dokumentiert. Um einen PaymentIntent zu erstellen, der eine MB WAY-Zahlungsmethode akzeptiert, geben Sie den einzuziehenden Betrag, eur als Währung und mb_way 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 mb_way hinzu.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1000 \
  -d currency=eur \
  -d "payment_method_types[]"=mb_way

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:

main.rb
Ruby
Python
PHP
Java
Node
Go
.NET
No results
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:

(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: 'mb_way_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. Wenn ein Fehler auftritt, 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 '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;
    }
  }
});

Ihre Integration testen

Testen Sie Ihre MB WAY-Integration mit den folgenden Test-Telefonnummern. Jeder Detailsatz reproduziert ein gängiges Live-Modus-Szenario.

TelefonnummerBeschreibung
+351911111112Der Status des PaymentIntent wechselt nach 15 Sekunden von requires_action zu succeeded
+351911111113Der Status des PaymentIntent wechselt sofort von requires_action zu requires_payment_method. Stripe gibt den Fehlercode payment_method_not_available zurück.
+351911111114Der Status des PaymentIntent wechselt sofort von requires_action zu requires_payment_method. Stripe gibt den Fehlercode payment_method_provider_decline zurück.
+351911111115Der Status des PaymentIntent wechselt sofort von requires_action zu requires_payment_method. Stripe gibt den Fehlercode payment_intent_payment_attempt_expired zurück.
+351911111116Der Status des PaymentIntent wechselt sofort von requires_action zu requires_payment_method. Stripe gibt den Fehlercode payment_method_customer_decline zurück.
<any other number>Der Status des PaymentIntent wechselt sofort von requires_action zu succeeded.
War diese Seite hilfreich?
JaNein