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:
Parameter | Beschreibung |
---|---|
locale | Das Land (und die Sprache) des Unternehmens. en_ 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:
Verwenden Sie das folgende Bild, um die Masterpass-Schaltfläche mit weißem Text anzuzeigen:
Parameter | Beschreibung |
---|---|
locale | Das Land (und die Sprache) des Unternehmens. en_ 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.
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.
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.
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.
angegebene Callback-URL. Der URL-Abfrageparameter oauth_
, 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.