# Leitfaden zu Secure Remote Commerce

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

[Secure Remote Commerce (SRC)](https://www.mastercard.us/en-us/merchants/grow-your-business/find-solutions-by-need/improve-checkout/secure-digital-checkout.html) 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.

> Informieren Sie sich vor der Implementierung über die [Implementierungsanforderungen](https://developer.mastercard.com/page/masterpass-requirements-and-best-practices). Indem Sie Secure Remote Commerce über Stripe verwenden, stimmen Sie den [Verfahrensregeln](https://masterpass.com/assets/pdf/masterpassoperatingrules.pdf) zu. Mastercard bietet SRC über seine Masterpass-Plattform an.

## Schaltfläche „Secure Remote Commerce“ integrieren

> Mastercard hat Masterpass eingestellt. Daher können im Dashboard keine neuen Masterpass-Checkout-IDs mehr generiert werden. Wir arbeiten daran, die Registrierung für Secure Remote Commerce wieder zu aktivieren.

Wenn Sie [Visa Checkout](https://docs.stripe.com/visa-checkout.md) oder [Masterpass](https://docs.stripe.com/masterpass.md) zum Annehmen von Zahlungen verwenden, empfehlen wir die Migration dieser Integrationen zu SRC. SRC bietet einen einheitlichen Bezahlvorgang, der eine Reihe von Kartenmarken unterstützt.

Um zu beginnen, generieren Sie Ihre **Checkout-ID** für Masterpass im [Dashboard](https://dashboard.stripe.com/account/payments/settings) 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:

#### Sandbox

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

#### Produktion

```html
<script type="text/javascript" src="https://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](https://dashboard.stripe.com/account/payments/settings) kopiert wurde. |

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

```html
<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:

```html
<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](https://dashboard.stripe.com/account/payments/settings) 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:

```javascript
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`       | Die Checkout-ID für Ihr Masterpass-Projekt, die aus dem [Dashboard](https://dashboard.stripe.com/account/payments/settings) kopiert wurde. |
| `allowedCardTypes` | Eine Liste der mit Masterpass kompatiblen Zahlungsanbieter, die Sie unterstützen möchten.                                                  |
| `amount`           | Der Betrag der Transaktion im Dezimalformat.                                                                                               |
| `currency`         | Die Währung für die Transaktion.                                                                                                           |
| `cartId`           | Eine generierte, eindeutige Zeichenfolge zur Identifizierung des Kaufs.                                                                    |
| `callbackUrl`      | Mit diesem optionalen Parameter können Sie die bei der Aktivierung von Masterpass konfigurierte Standard-`callbackUrl` außer Kraft setzen. |

Weitere Informationen zur Funktion `masterpass.checkout` und den zugehörigen Parametern finden Sie in der [Mastercard-Dokumentation](https://developer.mastercard.com/documentation/masterpass-merchant-integration-v7/7#standard-checkout1).

## 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]](/api/payment_intents) zu [bestätigen](https://docs.stripe.com/api/payment_intents/confirm.md), den Sie zu Beginn des Bezahlvorgangs erstellt haben. Unter [Zahlung akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md) 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* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects) werden kann:

```javascript
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](https://developer.mastercard.com/masterpass/documentation/migration/masterpass_to_src_migration/#mastercard-test-cards) 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.