- Κατευθυντήριες οδηγίες ενοποίησης
- Υποστηριζόμενες δυνατότητες (Τρόποι πληρωμής)
- Υλοποίηση μιας ενοποίησης πληρωμής μέσω browser
- PayPal
- Ενοποίηση απευθείας στο JS SDK του PayPal
Ενοποίηση απευθείας στο JS SDK του PayPal
Αυτός ο οδηγός περιγράφει τον τρόπο προσθήκης του PayPal Smart Button στη σελίδα πληρωμής σας με ενοποίηση απευθείας στο JavaScript SDK του PayPal.
Προαπαιτούμενα
Για να προσφέρετε το PayPal Smart Button ως επιλογή checkout στους πληρωτές σας χρησιμοποιώντας το JavaScript SDK του PayPal:
- Βεβαιωθείτε ότι ο your payment service provider διαθέτει λογαριασμό στο PayPal και ότι έχει δημιουργήσει μια εφαρμογή με τον λογαριασμό του στο PayPal. Ο Your payment service provider θα πρέπει να έχει λάβει το ID πελάτη από το PayPal και να το έχει αποθηκεύσει στο προφίλ εμπόρου σας στο Merchant Manager.
- Βεβαιωθείτε ότι έχετε διαμορφώσει την ενοποίηση PayPal στο Merchant Administration και έχετε παραχωρήσει στο τρίτο μέρος άδεια στην πύλη προκειμένου να συναλλάσσεται για λογαριασμό σας.
Ροή πληροφοριών
Τα παρακάτω βήματα περιγράφουν τη ροή πληροφοριών για ενοποίηση απευθείας στο JS SDK του PayPal:
- Ο πληρωτής κάνει κλικ στο PayPal Smart Button από τη σελίδα πληρωμής σας.
- Η JavaScript στον browser του πληρωτή στέλνει ένα αίτημα στον διακομιστή σας.
- Ο διακομιστής σας εκτελεί την πράξη Initiate Browser Payment στην πύλη για να εκκινήσει τη διαδικασία πληρωμής με PayPal.
- Η πύλη επιστρέφει το ID αλληλεπίδρασης από το PayPal στον διακομιστή σας.
- Ο διακομιστής σας επιστρέφει το ID αλληλεπίδρασης στο Javascript που εκτελείται στον browser του πληρωτή.
- Ο browser του πληρωτή εμφανίζει το περιβάλλον εργασίας του PayPal.
- Η Javascript στον browser του πληρωτή αλληλεπιδρά με τον διακομιστή σας για να συνεχίσει τη διαδικασία πληρωμής.
- Ο διακομιστής σας εκτελεί την πράξη Confirm Browser Payment στην πύλη για να ολοκληρώσει την πληρωμή.
Προσθήκη έξυπνου κουμπιού χρησιμοποιώντας το JavaScript SDK του PayPal
Ακολουθήστε τα βήματα που περιγράφονται παρακάτω για να δημιουργήσετε την ενοποίηση στο JavaScript SDK του PayPal.
Βήμα 1: Λήψη του ID πελάτη
Λάβετε το ID πελάτη υποβάλλοντας το αίτημα Payment Options Inquiry στην πύλη. Η απόκριση επιστρέφει ένα ID πελάτη, το οποίο πρέπει να χρησιμοποιήσετε στα επακόλουθα βήματα.
https://<your_host_name>/api/rest/version/<api_version>/merchant/<your_gateway_merchantId>/paymentOptionsInquiry
{ "merchant": "TESTPP_V2_MER33;", "paymentTypes": { "paypal": { "currencies": [ { "currency": "AUD" }, ], "transactionSources": [ { "transactionSource": "INTERNET" } ] "clientId": "ARLDC7ynAfGNlnJy8PuLanMRQvteg9RsfxAMLK-43amD5_urCn0Jl1APryAyWEvIm_GY1ippISEwsoza", "accountId": "RMU2YU3VN8SUL" } }, "result": "SUCCESS", "supportedPaymentOperations": [ { "supportedPaymentOperation": "AUTHORIZE" } ] }
Βήμα 2: Προσθέστε το PayPal JavaScript SDK στην ιστοσελίδα σας
Για να ενεργοποιήσετε τη λειτουργικότητα PayPal Smart Button, προσθέστε το JavaScript SDK του PayPal στην ιστοσελίδα σας. Χρησιμοποιήστε το ID πελάτη που λάβατε στην απόκριση στο Payment Options Inquiry, στο βήμα 1, ως τιμή της παραμέτρου ερωτήματος client-id.
<!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head> <body> <script src="https://www.paypal.com/sdk/js?client-id=PayPal_CLIENT_ID and merchant-id=PayPal_MERCHANT_ID"> </script> </body>
Για περισσότερες λεπτομέρειες σχετικά με αυτό το βήμα, βλ. το βήμα 2 στον οδηγό PayPal Developer.
Βήμα 3: Εμφάνιση του PayPal Smart Button στην ιστοσελίδα σας
Για να εμφανίσετε το PayPal Smart Button στην ιστοσελίδα σας, προσθέστε τον παρακάτω κώδικα στην ιστοσελίδα σας. Χρησιμοποιήστε το ID πελάτη που λάβατε στην απόκριση του Payment Options Inquiry, στο βήμα 1.
<body> <script src="https://www.paypal.com/sdk/js?client-id=PayPal_CLIENT_ID and merchant-id=PayPal_MERCHANT_ID"> </script> <div id="paypal-button-container"></div> <script> paypal.Buttons().render('#paypal-button-container'); // This function displays Smart Payment Buttons on your web page. </script> </body>
Για περισσότερες λεπτομέρειες σχετικά με αυτό το βήμα, βλ. το βήμα 3 στον οδηγό PayPal Developer.
Βήμα 4: Ρυθμίστε μια συναλλαγή
Πρέπει να ορίσετε την ανάκληση createOrder για να ενημερώσετε τον host σας για να υποβάλει το αίτημα Initiate Browser Payment στην πύλη. Για να ρυθμίσετε μια συναλλαγή από τον διακομιστή ή τον πελάτη σας, βλ. την ενότητα Ρύθμιση συναλλαγής στον οδηγό PayPal Developer.
Η αλληλουχία των συμβάντων διαφέρει ανάλογα με τη ροή PayPal Checkout.
- Για Checkout με PayPal, βλ. την ενότητα Αλληλουχία συμβάντων κατά το Checkout με PayPal.
- Για πληρωμή με PayPal, βλ. την ενότητα Αλληλουχία συμβάντων κατά την πληρωμή με PayPal.
Αλληλουχία συμβάντων στο Checkout με PayPal
- Υποβάλετε το αίτημα Initiate Browser Payment στην πύλη με
browserPayment.paypal.paymentconfirmation = CONFIRM_AT_MERCHANT
Παράδειγμα αιτήματος{ "apiOperation": "INITIATE_BROWSER_PAYMENT", "browserPayment": { "operation": "PAY", "paypal": { "paymentConfirmation": "CONFIRM_AT_MERCHANT" } }, "order": { "amount": "679.99", "currency": "USD" }, "sourceOfFunds": { "type": "PAYPAL" } }
Παράδειγμα απόκρισης"browserPayment.paypal.interactionId": "EC-8AT72418NV353182U"
- Εφαρμόστε μια λαβή χειρισμού ανάκλησης στην οποία γίνεται επίκληση όταν ένας πληρωτής κάνει κλικ στο PayPal Smart Button (εμφανίζεται ως
createOrderCallbackHandler
στο παράδειγμα του Βήματος 4). Αυτή η λαβή χειρισμού πρέπει να αλληλεπιδρά με τον διακομιστή σας για να υποβάλει το αίτημα Initiate Browser Payment στην πύλη. - Υποβάλετε το αίτημα Initiate Browser Payment από τον διακομιστή σας και επιστρέψτε
browserPayment.paypal.interactionId
.Η απόκριση Initiate Browser Payment περιέχει το express checkout token στο πεδίο
browserPayment.paypal.interactionId
.Παράδειγμα αιτήματοςcreateOrder: function() { return fetch('/my-server/create-paypal-transaction', { method: 'post', headers: { 'content-type': 'application/json' } }).then(function(res) { return res.json(); }).then(function(data) { return data.interactionId; // Return the interactionId as provided by the gateway to your server }); }
- Το PayPal JavaScript λαμβάνει τη φόρμα πληρωμής από το PayPal και, στη συνέχεια, εμφανίζει τη φόρμα στον browser του πληρωτή.
- Ο πληρωτής συνδέεται στο PayPal και υποβάλει τις λεπτομέρειες πληρωμής στο PayPal.
- Εγγράψτε τη λαβή χειρισμού onApprove στο PayPal.
- Αφού η συναλλαγή στο PayPal UI είναι επιτυχής, καλείται η λαβή χειρισμού onApprove. Τώρα, υποβάλετε το αίτημα Update Browser Payment από τον διακομιστή σας στην πύλη για να λάβετε τις πιο πρόσφατες λεπτομέρειες πληρωμής.
Λαβή χειρισμού approveCallback
onApprove: function (data, actions) { // CALL TO UPDATE_BROWSER_PAYMENT from your server; };
Παράδειγμα αιτήματος Update Browser Payment//URL https://<your_host_name>/api/rest/version/latest/merchant/<your_merchant_id>/transaction/151109242cvbnv //Body { "apiOperation": "UPDATE_BROWSER_PAYMENT" }
Παράδειγμα απόκρισης Update Browser Payment{ "device": { "browser": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36", "ipAddress": "66.159.204.102" }, "gatewayEntryPoint": "WEB_SERVICES_API", "merchant": "TESTMAN1234", "order": { "amount": 679.99, "chargeback": { "amount": 0, "currency": "USD" }, "creationTime": "2020-09-17T09:38:41.924Z", "currency": "USD", "id": "421d49456789012345678909234527890", "lastUpdatedTime": "2020-09-17T09:40:11.894Z", "merchantAmount": 679.99, "merchantCurrency": "USD", "status": "CAPTURED", "totalAuthorizedAmount": 679.99, "totalCapturedAmount": 679.99, "totalRefundedAmount": 0 }, "response": { "acquirerCode": "Success", "gatewayCode": "APPROVED" }, "result": "SUCCESS", "shipping": { "address": { "city": "Market City", "country": "AUS", "postcodeZip": "4322", "stateProvince": "Queensland", "street": "35 Rainbow street", "street2": "Floor 5, Apartment 34" }, "contact": { "firstName": "John", "lastName": "Smith", "phone": "0745231111" } }, "timeOfLastUpdate": "2020-09-17T09:40:11.894Z", "timeOfRecord": "2020-09-17T09:38:41.945Z", "transaction": { "acquirer": { "date": "2020-09-17", "id": "PAYPAL", "merchantId": "m.m@g.com", "time": "09:40:11", "transactionId": "SVE2APDYOXKMA7RY0" }, "amount": 679.99, "currency": "USD", "id": "151109242cvbnv", "receipt": "SVE2APDYOXKMA7RY0", "source": "INTERNET", "stan": "0", "type": "PAYMENT", "update": [ { "gatewayCode": "SUBMITTED", "time": "2020-09-17T09:38:42.054Z" }, { "gatewayCode": "APPROVED", "time": "2020-09-17T09:40:11.896Z" } ] }, "version": "59" }
- Αν υπάρχει οποιαδήποτε αλλαγή στο ποσό λόγω αλλαγής στο ποσό αποστολής, εμφανίζετε τη διαφορά στον πληρωτή.
- Μόλις ο πληρωτής επιβεβαιώσει την πληρωμή, υποβάλετε το αίτημα CONFIRM_BROWSER_PAYMENT για να ολοκληρώσετε τη συναλλαγή.
Παράδειγμα αιτήματος
{ "apiOperation": "CONFIRM_BROWSER_PAYMENT", "order": { "amount": "779.99", // amount updated as a result of updated shipping and handling charges "shippingAndHandlingAmount": "100.00" // updated shipping and handling charges ... } }
Αλληλουχία συμβάντων στην πληρωμή με PayPal
- Υποβάλετε το αίτημα Initiate Browser Payment στην πύλη με
browserPayment.paypal.paymentconfirmation = CONFIRM_AT_PROVIDER
Παράδειγμα αιτήματος{ "apiOperation": "INITIATE_BROWSER_PAYMENT", "browserPayment": { "operation": "PAY", "paypal": { "paymentConfirmation": "CONFIRM_AT_PROVIDER" } }, "order": { "amount": "679.99", "currency": "USD" }, "sourceOfFunds": { "type": "PAYPAL" } }
Παράδειγμα απόκρισης"browserPayment.paypal.interactionId": "EC-8AT72418NV353182U"
- Εφαρμόστε την ανάκληση
createOrder
στον κώδικα του PayPal Smart Button. Όταν ο πληρωτής κάνει κλικ στο PayPal Smart Button, το PayPal θα εκτελέσει τον κώδικα. - Υποβάλετε το αίτημα Initiate Browser Payment από τον διακομιστή σας και επιστρέψτε
browserPayment.paypal.interactionId
.Η απόκριση Initiate Browser Payment περιέχει το πεδίο
browserPayment.paypal.interactionId
.ΠαράδειγμαcreateOrder: function() { return fetch('/my-server/create-paypal-transaction', { method: 'post', headers: { 'content-type': 'application/json' } }).then(function(res) { return res.json(); }).then(function(data) { return data.interactionId; // Return the interactionId as provided by the gateway to your server }); }
- Το PayPal JavaScript λαμβάνει τη φόρμα πληρωμής από το PayPal και, στη συνέχεια, εμφανίζει τη φόρμα στον browser του πληρωτή.
- Ο πληρωτής συνδέεται στο PayPal και υποβάλει τις λεπτομέρειες πληρωμής στο PayPal.
- Εγγράψτε τη λαβή χειρισμού onApproveCallback στο PayPal.
- Αφού η συναλλαγή στο PayPal UI είναι επιτυχής, καλείται η λαβή χειρισμού
onApprove
. Τώρα, υποβάλετε το αίτημα CONFIRM_BROWSER_PAYMENT από τον διακομιστή σας στην πύλη για να ολοκληρώσετε την πληρωμή.Λαβή χειρισμού approveCallbackonApprove: function (data, actions) { // CALL TO CONFIRM_BROWSER_PAYMENT from your server; };
Παράδειγμα αιτήματος{ "apiOperation": "CONFIRM_BROWSER_PAYMENT" }
- (Προαιρετικό) Αν το μέσο απορριφθεί, το PayPal στέλνει την απόκριση
INSTRUMENT_DECLINED
στο αίτημα Execute Payment.Ένας πληρωτής έχει τρεις προσπάθειες συνολικά για να πραγματοποιήσει την πληρωμή. Για περισσότερες πληροφορίες, βλ. Απόρριψη ανάκτησης.
Πρέπει να κάνετε
action.restart()
για να υποστηριχθεί το DECLINE_RECOVERY.
Απόρριψη ανάκτησης
Η απόρριψη ανάκτησης υποστηρίζεται μόνο χρησιμοποιώντας το PayPal. Κατά τη διάρκεια της διαδικασίας συναλλαγής, αν το μέσο απορριφθεί, τότε ο πληρωτής έχει άλλες δύο προσπάθειες για να πραγματοποιήσει την πληρωμή. Και για τις τρεις προσπάθειες, ένας πληρωτής μπορεί να χρησιμοποιήσει το ίδιο ή οποιοδήποτε άλλο μέσο που είναι εγγεγραμμένο στο PayPal για να προχωρήσει στην πληρωμή. Αν πρόκειται για νέο μέσο, ο πληρωτής πρέπει να το εγγράψει στο PayPal για να μπορέσει να προχωρήσει στην πληρωμή. Ένας πληρωτής έχει τρεις προσπάθειες συνολικά για να πραγματοποιήσει την πληρωμή. Αν ακόμη και μετά την τρίτη προσπάθεια το μέσο απορριφθεί, ο your payment service provider θα στείλει την απόκριση TRANSACTION_REFUSED
ή INSTRUMENT_DECLINED
. Στο εξής, ο πληρωτής δεν θα μπορεί να προχωρήσει στη διαδικασία συναλλαγής.
Αλληλουχία συμβάντων κατά την απόρριψη ανάκτησης
- Υποβάλετε το αίτημα Initiate Browser Payment στην πύλη με browserPayment.paypal.paymentconfirmation = CONFIRM_AT_PROVIDER.
Εμφανίζεται η φόρμα πληρωμής του PayPal.
- Ένας πληρωτής συνδέεται στη φόρμα πληρωμής του PayPal, επιλέγει το μέσο πληρωμής και, στη συνέχεια, κάνει κλικ στο Πληρωμή τώρα.
- Υποβάλετε το αίτημα CONFIRM_BROWSER_PAYMENT για να κάνετε επίκληση στο αίτημα Execute Payment του PayPal.
- Αν το μέσο απορριφθεί, το PayPal στέλνει την απόκριση
INSTRUMENT_DECLINED
στο αίτημα Execute Payment.Ένας πληρωτής έχει τρεις προσπάθειες συνολικά για να πραγματοποιήσει την πληρωμή.
- Αφού ο χειριστής συμβάντων onApprove λάβει την απόκριση INSTRUMENT_DECLINED, καλέστε τη συνάρτηση actions.restart() για να επιτρέψετε στον πληρωτή να επιλέξει διαφορετικό μέσο.
const restartPaymentOnInstrumentDeclined = (resp, actions) => { if (isInstrumentDeclined(resp)) { return actions.restart(); } else { gatewaySuccessCallbackBP(resp); } }
{ "browserPayment": { "interaction": { "status": "INITIATED", "timeInitiated": "2021-07-15T07:10:16.176Z" }, "operation": "PAY", "paypal": { "displayShippingAddress": true, "interactionId": "EC-9SH774983H4356451", "overrideShippingAddress": true, "paymentConfirmation": "CONFIRM_AT_PROVIDER" } }, "gatewayEntryPoint": "WEB_SERVICES_API", "merchant": "PP_POI_1", "order": { "amount": 931, "chargeback": { "amount": 0, "currency": "USD" }, "creationTime": "2021-07-15T07:10:16.152Z", "currency": "USD", "id": "vcc-206", "item": [ { "brand": "MC", "category": "NA", "detail": { "unitDiscountRate": 0 }, "name": "name", "quantity": 1, "sku": "sku", "unitDiscountAmount": 0, "unitPrice": 931 } ], "itemAmount": 931, "lastUpdatedTime": "2021-07-15T07:12:19.571Z", "merchantAmount": 931, "merchantCurrency": "USD", "reference": "my order", "status": "INITIATED", "taxAmount": 0, "totalAuthorizedAmount": 0, "totalCapturedAmount": 0, "totalDisbursedAmount": 0, "totalRefundedAmount": 0 }, "response": { "acquirerCode": "INSTRUMENT_DECLINED", "acquirerMessage": "", "debugInformation": "INSTRUMENT_DECLINED, The instrument presented was either declined by the processor or bank, or it can't be used for this payment., e5a837ee6834", "gatewayCode": "SUBMITTED" }, "result": "SUCCESS", "shipping": { "address": { "city": "Los Angeles", "company": "Google", "country": "USA", "postcodeZip": "90001", "stateProvince": "CA", "street": "2nd Main", "street2": "lane 2" }, "contact": { "email": "ramakanth@gmail.com", "firstName": "Ramakanth", "lastName": "Kulkarni", "mobilePhone": "9999999999", "phone": "9999999999" } }, "sourceOfFunds": { "provided": { "paypal": { "accountEmail": "johnsmith@paypal.com", "accountHolder": "Paul Levetsky", "payerId": "LM9AM5Y34N3X8" } }, "type": "PAYPAL" }, "timeOfLastUpdate": "2021-07-15T07:12:19.571Z", "timeOfRecord": "2021-07-15T07:10:16.171Z", "transaction": { "acquirer": { "date": "15 Jul 2021", "id": "PAYPAL", "merchantId": "NDXE9MFKNPCUA", "time": "07:12:19" }, "amount": 931, "currency": "USD", "id": "1", "source": "INTERNET", "stan": "0", "type": "PAYMENT", "update": [ { "gatewayCode": "SUBMITTED", "time": "2021-07-15T07:10:17.280Z" } ] }, "version": "62" }
{ "browserPayment": { "interaction": { "status": "COMPLETED", "timeCompleted": "2021-07-20T09:17:27.128Z", "timeInitiated": "2021-07-20T09:15:56.313Z" }, "operation": "PAY", "paypal": { "displayShippingAddress": true, "interactionId": "EC-74C02380KE247305K", "overrideShippingAddress": true, "paymentConfirmation": "CONFIRM_AT_PROVIDER" } }, "gatewayEntryPoint": "WEB_SERVICES_API", "merchant": "PP_POI_1", "order": { "amount": 1.28, "chargeback": { "amount": 0, "currency": "USD" }, "creationTime": "2021-07-20T09:15:56.278Z", "currency": "USD", "description": "Ordered goods", "id": "testsdkhco33", "item": [ { "brand": "MC", "category": "NA", "name": "name", "quantity": 1, "sku": "sku", "unitPrice": 1.28 } ], "itemAmount": 1.28, "lastUpdatedTime": "2021-07-20T09:17:27.136Z", "merchantAmount": 1.28, "merchantCurrency": "USD", "reference": "my order", "status": "FAILED", "taxAmount": 0, "totalAuthorizedAmount": 0, "totalCapturedAmount": 0, "totalDisbursedAmount": 0, "totalRefundedAmount": 0 }, "response": { "acquirerCode": "TRANSACTION_REFUSED", "acquirerMessage": "", "debugInformation": "TRANSACTION_REFUSED, The request was refused, cae635b964420", "gatewayCode": "DECLINED" }, "result": "FAILURE", "shipping": { "address": { "city": "Los Angeles", "country": "USA", "postcodeZip": "90001", "stateProvince": "CA", "street": "2nd Main", "street2": "lane 2" }, "contact": { "firstName": "Ramakanth", "lastName": "Kulkarni" } }, "sourceOfFunds": { "provided": { "paypal": { "accountEmail": "CCREJECT-REFUSED@paypal.com", "accountHolder": "Paul Levetsky", "payerId": "LM9AM5Y34N3X8" } }, "type": "PAYPAL" }, "timeOfLastUpdate": "2021-07-20T09:17:27.136Z", "timeOfRecord": "2021-07-20T09:15:56.308Z", "transaction": { "acquirer": { "date": "20 Jul 2021", "id": "PAYPAL", "merchantId": "NDXE9MFKNPCUA", "time": "09:17:27" }, "amount": 1.28, "currency": "USD", "id": "1", "source": "INTERNET", "stan": "0", "type": "PAYMENT", "update": [ { "gatewayCode": "SUBMITTED", "time": "2021-07-20T09:15:57.482Z" }, { "gatewayCode": "DECLINED", "time": "2021-07-20T09:17:27.128Z" } ] }, "version": "62" }
Δοκιμή της ενοποίησής σας
Όταν ολοκληρώσετε την ενοποίησή σας με το PayPal, μπορείτε να τη δοκιμάσετε χρησιμοποιώντας το PayPal sandbox.
Για να ξεκινήσετε τη δοκιμή, δημιουργήστε έναν λογαριασμό στο PayPal και χρησιμοποιήστε αυτά τα διαπιστευτήρια όταν δημιουργήσετε το προφίλ εμπόρου σας με τον your payment service provider. Βεβαιωθείτε ότι χρησιμοποιείτε τον μη δοκιμαστικό έμπορο για αυτές τις συναλλαγές.
- Χρησιμοποιήστε τα παραπάνω βήματα για την ενοποίηση.
- Βεβαιωθείτε ότι υποβάλετε το αίτημα Payment Options Inquiry για να λάβατε το ID πελάτη του your payment service provider στην απόκριση.
- Βεβαιωθείτε ότι έχετε διαμορφώσει την ενοποίηση PayPal στο Merchant Administration και έχετε παραχωρήσει στο τρίτο μέρος άδεια στην πύλη προκειμένου να συναλλάσσεται για λογαριασμό σας.