Leitfaden zu Secure Remote Commerce

Akzeptieren Sie Zahlungen in Ihrer bestehenden Stripe-Integration über Secure Remote Commerce.

Secure Remote Commerce (SRC) ist eine sichere Möglichkeit, online zu bezahlen, und Ihre Zahlungsinformationen mit der globalen Zahlungsindustrie zu schützen. Nutzer/innen können Karten von Visa, Mastercard, American Express und Discover können hinzufügen, um Zahlungen per Click to Pay durchzuführen. SRC unterstützt alle teilnehmenden Netzwerkmarken.

Notiz

Informieren Sie sich vor der Implementierung über die Implementierungsanforderungen. Indem Sie Secure Remote Commerce über Stripe verwenden, stimmen Sie den Verfahrensregeln zu. Mastercard bietet SRC über seine Masterpass-Plattform an.

Schaltfläche „Secure Remote Commerce“ integrieren

Um zu beginnen, generieren Sie Ihre Checkout-ID für Masterpass im Dashboard und konfigurieren Sie Ihre Sandbox- und Produktions-Callback-URLs. Mastercard bietet SRC als Update für seinen Masterpass-Service an.

Um SRC auf Ihrer Website zu verwenden, fügen Sie Ihrem HTML-Dokument das folgende Skript-Tag hinzu:

<script type="text/javascript" src="https://sandbox.src.mastercard.com/srci/integration/merchant.js?locale=en_us&checkoutid={checkoutId}"></script>

Parameter	Beschreibung
`locale`	Das Land (und die Sprache) des Unternehmens. `en_US` ist der einzig gültige Wert, da SRC nur für die USA verfügbar ist.
`checkoutid`	Die Checkout-ID von Mastercard, die aus dem Abschnitt „Masterpass“ des Dashboards kopiert wurde.

Verwenden Sie das folgende Bild, um die Masterpass-Schaltfläche mit schwarzem Text anzuzeigen:

<img id="mpbutton" src="https://src.mastercard.com/assets/img/acc/global/src_mark_hor_blk.svg?locale=en_us&paymentmethod={acceptedCardBrands}&checkoutid={checkoutId}"/>

Verwenden Sie das folgende Bild, um die Masterpass-Schaltfläche mit weißem Text anzuzeigen:

<img id="mpbutton" src="https://src.mastercard.com/assets/img/acc/global/src_mark_hor_blk.svg?locale=en_us&paymentmethod={acceptedCardBrands}&checkoutid={checkoutId}"/>

Parameter	Beschreibung
`locale`	Das Land (und die Sprache) des Unternehmens. `en_US` ist der einzig gültige Wert, da SRC nur für die USA verfügbar ist.
`paymentmethod`	Durch Komma getrennte Liste der akzeptierten Karten (zum Beispiel: “master,amex,visa,diners,discover,jcb,maestro”).
`checkoutid`	Die Checkout-ID von Mastercard, die aus dem Abschnitt „Masterpass“ des Dashboards kopiert wurde.

Fügen Sie dem Bild einen Klick-Handler hinzu und rufen Sie mit diesem die Funktion masterpass.checkout mit den gewünschten Parametern auf:

const button = document.getElementById('mpbutton');

button.addEventListener('click', (ev) =>
  masterpass.checkout({
    checkoutId: '{{MASTERPASS_CHECKOUT_ID}}',
    allowedCardTypes: ['master', 'amex', 'visa'],
    amount: '10.00',
    currency: 'USD',
    cartId: '{{UNIQUE_ID}}',
    callbackUrl: '{{CALLBACK_URL}}'
  }));

Die Funktion masterpass.checkout benötigt die folgenden Parameter:

Parameter	Beschreibung
`checkoutId`	The Checkout ID for your Masterpass project, copied from the Dashboard.
`allowedCardTypes`	A list of the Masterpass-compatible payment providers that you want to support.
`amount`	The amount of the transaction, expressed in decimal format.
`currency`	The currency to use for the transaction.
`cartId`	A unique string that you generate to identify the purchase.
`callbackUrl`	Use this optional parameter to override the default `callbackUrl` configured when activating Masterpass.

Weitere Informationen zur Funktion masterpass.checkout und den zugehörigen Parametern finden Sie in der Mastercard-Dokumentation.

Zahlung abschließen

Wenn Nutzer/innen auf Ihrer Checkout-Seite auf die Masterpass-Schaltfläche klicken, gelangen sie zur Masterpass-Website, auf der sie in ihrem Konto eine vorhandene Zahlungsmethode auswählen oder eine neue eingeben können. Nachdem die Nutzer/innen den Vorgang abgeschlossen haben, werden sie von Masterpass an die Callback-URL weitergeleitet, die Sie bei der Aktivierung von Masterpass konfiguriert haben, oder aber an die beim Aufruf der Funktion masterpass.checkout angegebene Callback-URL. Der URL-Abfrageparameter oauth_verifier, den Ihre Anwendung zum Abschluss der Transaktion verwenden kann, wird angehängt.

Extrahieren Sie im Route Handler für das Weiterleitungsziel den URL-Abfrageparameter und verwenden Sie ihn, um den PaymentIntent zu bestätigen, den Sie zu Beginn des Bezahlvorgangs erstellt haben. Unter Zahlung akzeptieren erfahren Sie, wie Sie Ihren Bezahlvorgang mit Payment Intents verwalten können.

Das folgende Codebeispiel zeigt, wie ein PaymentIntent mit SRC in Node.js mit dem Express-Framework bestätigt werden kann:

app.get('/callback', async (req, res) => {
  // retrieve the PaymentIntent ID created at the beginning of the checkout flow.
  const payment_intent_id = '{{PAYMENT_INTENT_ID}}';

  const payment_intent = await stripe.paymentIntents.confirm(payment_intent_id, {
    amount: 1000,
    currency: 'usd',
    payment_method_data: {
      type: 'card',
      card: {
        masterpass: {
          cart_id: '{{UNIQUE_ID}}',
          transaction_id: req.query.oauth_verifier,
        },
      },
    },
  });

  res.send('<h1>Charge succeeded</h1>');
});

Secure Remote Commerce testen

Um Ihre SRC-Integration mit der Sandbox von Mastercard zu testen, erstellen Sie während des Bezahlvorgangs auf Ihrer Website ein neues SRC-Nutzerkonto. Konfigurieren Sie das Konto so, dass eine der Testkarten aus der Masterpass-Dokumentation verwendet wird. Schließen Sie den Bezahlvorgang wie gewohnt ab und wählen Sie die Testkarte als Zahlungsmethode. Wenn alles korrekt funktioniert hat, leitet Sie Mastercard zurück zu Ihrer Anwendung, die die Zahlung wie erwartet erstellen sollte.

Die SRC-Integration funktioniert nur ordnungsgemäß, wenn sie in eine http oder https-Seite eingebunden ist. Stripe unterstützt die Bereitstellung aus dem Dateisystem nicht, auch nicht während der Testphase.