Leitfaden zu Secure Remote Commerce
Secure Remote Commerce (SRC) ist eine einfache und sichere, von der globalen Zahlungsindustrie unterstützte Möglichkeit, online zu bezahlen, bei der die Zahlungsinformationen der Nutzer/innen geschützt werden. Karten von Visa, Mastercard, American Express und Discover können hinzugefügt werden, um Zahlungen einfach und sicher per Click to Pay durchzuführen. Secure Remote Commerce optimiert den Online-Bezahlvorgang und steht für alle Marken zur Verfügung, die an SRC teilnehmen.
Notiz
Informieren Sie sich vor der Implementierung über die Implementierungsanforderungen. Indem Sie Secure Remote Commerce über Stripe verwenden, stimmen Sie den Verfahrensregeln zu. Beachten Sie, dass SRC von Mastercard über seine Masterpass-Plattform angeboten wird.
Schaltfläche „Secure Remote Commerce“ integrieren
Generieren Sie zunächst Ihre Checkout-ID für Masterpass im Dashboard und konfigurieren Sie Ihre Sandbox- und Produktions-Callback-URLs. Beachten Sie, dass Mastercard SRC als Update für den Masterpass-Dienst anbietet und Sie daher in der Dokumentation und im Code Hinweise auf Masterpass finden werden.
Um SRC auf Ihrer Website zu verwenden, fügen Sie Ihrem HTML-Dokument das folgende Skript-Tag hinzu:
Parameter | Beschreibung |
---|---|
locale | Das Land (und die Sprache) der Händlerin/des Händlers. Derzeit ist en_US der einzig gültige Wert, da SRC nur für US-Händler/innen verfügbar ist. |
checkoutid | Die Checkout-ID von Mastercard, die aus dem Abschnitt „Masterpass“ des Dashboards kopiert wurde. |
Verwenden Sie für die Masterpass-Schaltfläche eines der folgenden Bilder:
Für eine Schaltfläche mit schwarzem Masterpass-Text:
Für eine Schaltfläche mit weißem Masterpass-Text:
Parameter | Beschreibung |
---|---|
locale | Das Land (und die Sprache) der Händlerin/des Händlers. Derzeit ist en_US der einzig gültige Wert, da SRC nur für US-Händler/innen 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 | Die Checkout-ID für Ihr Masterpass-Projekt, die aus dem Dashboard 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 | Dieser optionale Parameter kann verwendet werden, um die bei der Aktivierung von Masterpass konfigurierte Standard-callbackUrl außer Kraft zu setzen. |
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. Die Bereitstellung aus dem Dateisystem wird nicht unterstützt, auch nicht während der Testphase.