MPS-Proxy Example Implementation

Documentation for the HTML forms located in ./html/. User-Flows according to "CR13 - Frontend Integration" are implemented here, showcasing the necessary frontend interactions and API calls to the MPS-Proxy for various payment scenarios. You may want to check swagger-ui for detailed API documentation and testing endpoints directly.

Workflows mit MPS Bezug

Übersicht für Frontend-Integrationen gemäß Kapitel 4 des Change Requests. Fokus liegt auf Benutzerinteraktionen und den notwendigen Frontend-Aufrufen. Nachbearbeitungsschritte wie Claim/Void werden hier bewusst nicht beschrieben.

4.1 Einrichtung einer „recurring" Zahlmethode

Kunde hinterlegt ein Zahlungsmittel für wiederkehrende Abbuchungen.

Benutzer-Interaktion MPS-Proxy Endpunkt erf. Payload Ergebnis
Zahlungsmittel auswählen recurring register direct methods (Card/Apple/Google Pay)
recurring register paypal (PayPal)
eines aus ["creditcard", "google-pay", "apple-pay", "paypal"] payment_method
Daten erfassen POST /client-token/{payment_method} — (path: payment_method) { clientToken }
Mandat/Freigabe erteilen POST /recurring/register/direct (Card/Apple/Google Pay) { amount, method: "creditcard"|"applepay"|"googlepay", nonce } { "checkoutSessionId": "CHK-8106f68d-a93c-46f6-bc07-25700eccccee", "state": "FINALIZED", "paymentTransactionId": "PDR-8b45570b-6425-48f9-8254-a35a6d01d093", "paymentHandle": "zi+KuznvK92xI5e1TW0be8G5jwX8oZ1eHHL0FxiCjx+iIkydHJpWGfh9Zaa3DnmsVm6VnZ+P0A==", "paymentMethodDetails": { "ccBrand": "Visa", "expiryDate": "12/2026", "maskedCreditCardNumber": "411111******1111", "acquirer": "AIB", "liabilityShifted": false, "accountQualifier": "Visa 411111******1111" }, "paymentMethod": "creditcard_braintree" }
Mandat/Freigabe erteilen - PayPal POST /recurring/register (PayPal) { amount } { redirectUrl, checkoutSessionId } vollständig wird der Prozess erst mit Aufruf der Landing Page. @Stefan, @Jash wird unsere Landingpage in den Apps liegen?
Erfolg/Misserfolg anzeigen Frontend verarbeitet Antwort aus Schritt 2
nächster Endpunkt: ETC
{ checkoutSessionId | redirectUrl | paymentHandle } UI-Feedback: Success/Fehler; ggf. Redirect zu redirectUrl (PayPal)

4.3 Durchführung einer OneTime Aufladung

Einmalzahlung ohne gespeichertes Zahlungsmittel.

Benutzer-Interaktion MPS-Proxy Endpunkt erf. Payload Ergebnis
Betrag & Zahlungsmittel wählen direct reserve methods (Card/Apple/Google Pay)
onetime reserve paypal (PayPal)
eines aus ["creditcard", "google-pay", "apple-pay", "paypal"] payment_method
Zahlungsdaten erfassen POST /client-token/{payment_method} — (path: payment_method) { clientToken }
Betrag reservieren (Card/Apple/Google Pay) POST /pbs-checkout-api/direct/reserve { amount, method: "creditcard"|"applepay"|"googlepay", nonce } { checkoutSessionId, state, paymentTransactionId, paymentHandle }
Betrag reservieren – PayPal POST /pbs-checkout-api/onetime/reserve { amount } { redirectUrl, checkoutSessionId } – Abschluss via PayPal Landingpage
Erfolg/Misserfolg anzeigen Frontend übergibt checkoutSessionId an Backend → POST /pbs-checkout-api/direct/claim (Card) / POST /pbs-checkout-api/claim (PayPal) { checkoutSessionId | redirectUrl | paymentHandle } UI-Feedback: Success/Fehler; ggf. Redirect zu redirectUrl (PayPal)