Ενοποίηση του Click to Pay Hosted Session
Ακολουθήστε τα παρακάτω βήματα για να προσθέσετε το Click to Pay (C2P) στην Hosted Session ενοποίηση χρησιμοποιώντας το Click to Pay SDK και το JavaScript (JS) API. Μπορείτε να βρείτε ένα παράδειγμα HTML μιας βασικής ενοποίησης στο τέλος αυτού του θέματος.
Για περισσότερες πληροφορίες σχετικά με το C2P, τη δοκιμή της ολοκληρωμένης ενοποίησης και ορισμένες συχνές ερωτήσεις, βλ. Click to Pay.
Βήμα 1: Δημιουργία και ενημέρωση μιας περιόδου λειτουργίας (session)
Δημιουργήστε μια περίοδο λειτουργίας χρησιμοποιώντας την πράξη CREATE SESSION. Η απόκριση επιστρέφει ένα ID περιόδου λειτουργίας, το οποίο πρέπει να χρησιμοποιήσετε στα επακόλουθα βήματα για αναφορά σε αυτή την περίοδο λειτουργίας.
Μπορείτε να προσθέσετε ή να ενημερώσετε πεδία σε μια υπάρχουσα περίοδο λειτουργίας χρησιμοποιώντας την πράξη UPDATE SESSION. Σε μια περίοδο λειτουργίας απαιτούνται τουλάχιστον τα ακόλουθα πεδία:
session.id
Αναγνωριστικό του session πληρωμής (payment session).order.amount
Συνολικό ποσό παραγγελίας.order.currency
Νόμισμα παραγγελίας.
Το CREATE SESSION και το UPDATE SESSION είναι πράξεις API στον διακομιστή που αποτελούν προϋπόθεση για την ενοποίηση με το JS API. Χρησιμοποιήστε το WS API v62 ή μεταγενέστερο με το JS API.
Για παραδείγματα αιτημάτων των πράξεων API στον διακομιστή, πραγματοποιήστε λήψη της συλλογής Postman.
Βήμα 2: Συμπεριλάβετε το Click to Pay JavaScript API στη σελίδα πληρωμής σας
Συμπεριλάβετε το C2P JavaScript SDK (click-to-pay.js) που παρέχεται από το Mastercard Gateway στη σελίδα πληρωμής σας προσθέτοντας ένα στοιχείο script εντός του στοιχείου head στον κώδικα HTML σας. Αυτό τοποθετεί ένα αντικείμενο ClickToPay στον χώρο ονομάτων του παραθύρου.
<script type="text/javascript" src="https://na-gateway.mastercard.com/form/static/click-to-pay/click-to-pay.min.js"></script>
Βήμα 3: Διαμόρφωση της αλληλεπίδρασης Click to Pay
Το αντικείμενο διαμόρφωσης σάς επιτρέπει να διαμορφώσετε την αλληλεπίδραση μεταξύ του πληρωτή και του C2P στη σελίδα πληρωμής σας. Όταν ο πληρωτής είναι έτοιμος να πληρώσει για την παραγγελία του και φορτώνετε τη σελίδα πληρωμής σας, ξεκινήστε την αλληλεπίδραση C2P κάνοντας επίκληση στη συνάρτηση ClickToPay.configure(). Για πρόσθετες λεπτομέρειες και ένα παράδειγμα της συνάρτησης, βλ. την Αναφορά API.
Η βιβλιοθήκη C2P μπορεί να πάρει μερικά δευτερόλεπτα για να προετοιμαστεί. Προετοιμάστε τα στοιχεία όσο το δυνατόν νωρίτερα κατά τη φόρτωση της σελίδας, ώστε ο πληρωτής να μπορεί γρήγορα να κάνει check out χρησιμοποιώντας το C2P.
Στη συνάρτηση ClickToPay.configure(), διαμορφώστε τις παραμέτρους, τα στοιχεία σελίδας πληρωμής και τις ανακλήσεις για την αλληλεπίδραση C2P, όπως ορίζονται στις ακόλουθες ενότητες.
Παράμετροι διαμόρφωσης
Χρησιμοποιήστε τις παραμέτρους για να καθορίσετε τις λεπτομέρειες της αλληλεπίδρασης C2P.
Πίνακας: Παράμετροι διαμόρφωσης
| Πεδίο | Υποχρεωτικό | Τύπος | Περιγραφή |
|---|---|---|---|
merchant.id |
Ναι | συμβολοσειρά | Το αναγνωριστικό εμπόρου σας, που χρησιμοποιείται από την πύλη για τον καθορισμό των επιλογών πληρωμής σας. |
merchant.name |
Ναι | συμβολοσειρά | Ο διακριτικός σας τίτλος, για παράδειγμα, η επωνυμία που είναι γνωστή στον πληρωτή σας. |
merchant.url |
Υποχρεωτικό | συμβολοσειρά διεύθυνσης URL | Η διεύθυνση URL του ιστότοπού σας που χρησιμοποιεί ο πληρωτής. |
session.id |
Ναι | συμβολοσειρά | Το ID περιόδου λειτουργίας που επιστράφηκε από την πράξη CREATE SESSION στο Βήμα 1. |
session.wsVersion |
Ναι | int | Η έκδοση WS API που χρησιμοποιείται κατά την υποβολή της πράξης CREATE SESSION στο Βήμα 1. Η τιμή πρέπει να είναι >= 62. |
order.amount |
Ναι | συμβολοσειρά | Ποσό παραγγελίας. Η τιμή χρησιμοποιείται μόνο για εμφάνιση και όχι για διεκπεραίωση της πληρωμής. |
order.currency |
Ναι | συμβολοσειρά | Νόμισμα παραγγελίας. Η τιμή χρησιμοποιείται μόνο για εμφάνιση και όχι για διεκπεραίωση της πληρωμής. |
interaction.billingPreference |
Όχι | συμβολοσειρά απαρίθμησης | Αν μια διεύθυνση χρέωσης συλλέγεται κατά τη διάρκεια της αλληλεπίδρασης C2P. Οι πιθανές τιμές είναι:
|
interation.collectShippingAddress |
Όχι | δυαδική τιμή | Αν μια διεύθυνση αποστολής συλλέγεται κατά τη διάρκεια της αλληλεπίδρασης C2P. Η προεπιλεγμένη τιμή είναι false. Από προεπιλογή, ο πληρωτής μπορεί να επιλέξει οποιαδήποτε χώρα για τη διεύθυνση αποστολής. Για να περιορίσετε τη λίστα στις χώρες στις οποίες αποστέλλετε αγαθά, πρέπει να διαμορφώσετε το προφίλ εμπόρου σας για C2P μέσω του Merchant Administration (MA) είτε με λίστα επιτρεπόμενων χωρών είτε με λίστα εξαιρούμενων χωρών. Αν έχετε ορίσει οποιουσδήποτε περιορισμούς, ο πληρωτής μπορεί να επιλέξει μόνο μια επιτρεπόμενη χώρα για τη διεύθυνση αποστολής. Δεν μπορείτε να παρακάμψετε τις υποστηριζόμενες χώρες διεύθυνσης αποστολής για ένα συγκεκριμένο αίτημα, μόνο για όλα τα αιτήματα στο προφίλ εμπόρου σας. |
interation.locale |
Όχι | συμβολοσειρά | Γλώσσα που χρησιμοποιείται κατά την αλληλεπίδραση C2P. Από προεπιλογή, χρησιμοποιείται η γλώσσα που έχει διαμορφωθεί στον browser του πληρωτή. Αν η γλώσσα του πληρωτή δεν μπορεί να προσδιοριστεί ή δεν υποστηρίζεται, χρησιμοποιείται το en_US εκτός αν δώσετε διαφορετική τιμή σε αυτήν την παράμετρο.
|
interation.country |
Όχι | συμβολοσειρά | Περιεχόμενο για την εκάστοτε χώρα, όπως Όροι και Προϋποθέσεις, που εμφανίζεται στον πληρωτή κατά τη διάρκεια της αλληλεπίδρασης C2P. Η τιμή που διαμορφώσατε για το προφίλ εμπόρου σας στην πύλη χρησιμοποιείται από προεπιλογή. Αν θέλετε να παρακάμψετε αυτήν την τιμή για αυτήν την αλληλεπίδραση, ορίστε αυτήν την παράμετρο σε μια έγκυρη τιμή χώρας ISO 3166 alpha-3. |
interaction.cardSelectionAction |
Όχι | συμβολοσειρά | Ενέργεια που πρέπει να εκτελεστεί όταν ο πληρωτής κάνει την επιλογή της κάρτας. Οι πιθανές τιμές είναι:
|
interaction.skipDCFInteraction |
Όχι | δυαδική τιμή | Αν ο πληρωτής πρέπει να επιβεβαιώσει χειροκίνητα τη διεύθυνση email και τον αριθμό τηλεφώνου του. Αυτό ισχύει μόνο για την εγγραφή κάρτας Mastercard αυτήν τη στιγμή. Οι παράμετροι customer.email και customer.mobilePhone απαιτούνται εντός της συνάρτησης configure() για να τεθεί σε ισχύ αυτή η δυνατότητα.Αν οριστεί σε true, στον πληρωτή δεν εμφανίζεται ένα μήνυμα Επιβεβαίωση στο στοιχείο DCF (περιβάλλοντος εργασίας χρήστη Digital Card Facilitator), αλλά εμφανίζεται μια σύντομη οθόνη φόρτωσης. Αν δεν παρέχεται, η προεπιλεγμένη τιμή είναι false. |
customer.email |
Ναι | συμβολοσειρά | Email του πληρωτή. Το C2P χρησιμοποιεί την τιμή για να αναζητήσει το προφίλ του πληρωτή μέσα στο σύστημα SRC (Secure Remote Commerce). Η αναζήτηση email ξεκινά μόνο αν η συσκευή δεν αναγνωρίζεται. Αν η συσκευή αναγνωριστεί, το πεδίο αγνοείται. Συμπεριλάβετε πληροφορίες στον ιστότοπό σας ότι το email του πληρωτή χρησιμοποιείται για τον σκοπό αναζήτησης, εκτός αν έχετε ήδη ενημερώσει τον πληρωτή ότι η email του χρησιμοποιείται για την αναζήτηση του προφίλ του C2P. Μπορείτε να συμπεριλάβετε μια ειδοποίηση που ενημερώνει ότι συνεργάζεστε με προγράμματα καρτών για την παράδοση C2P για ταχύτερο checkout και ότι το email του πληρωτή κοινοποιείται με ασφάλεια στα προγράμματα καρτών που συμμετέχουν, για να ελέγξετε αν έχουν ήδη προφίλ C2P. |
customer.mobilePhone |
Όχι | Αριθμός τηλεφώνου | Ο αριθμός κινητού τηλεφώνου του πληρωτή σε μορφή ITU-T E123, για παράδειγμα +1 607 1234 5678 Ο αριθμός αποτελείται από:
|
customer.firstName |
Όχι | συμβολοσειρά | Το μικρό όνομα του πληρωτή. |
customer.lastName |
Όχι | συμβολοσειρά | Το επώνυμο του πληρωτή. |
srcDCFCancel |
Ναι (μόνο αν σκοπεύετε να υποστηρίξετε κάρτες Visa) | - | Η τρέχουσα σχεδίαση της Visa για το C2P κλείνει την περίοδο λειτουργίας C2P αν ο πληρωτής επιλέξει το "X" που εμφανίζεται στην επάνω δεξιά γωνία του συστατικού Visa DCF. Όταν αποστέλλεται αυτό το συμβάν, συνιστάται να προετοιμάσετε ξανά το C2P (καλέστε τη συνάρτηση configure()) για να εξασφαλίσετε ανοιχτές περιόδους λειτουργίας για όλα τα προγράμματα καρτών. |
Στοιχεία σελίδας πληρωμής
Το C2P παρέχει πολλά στοιχεία που μπορούν να ενσωματωθούν στη σελίδα πληρωμής σας για να βελτιώσουν την αλληλεπίδραση C2P. Δημιουργήστε στοιχεία div στη θέση εντός της σελίδας πληρωμής όπου θέλετε να εμφανίζονται αυτά τα στοιχεία και προσδιορίστε τα στοιχεία div εντός της ενότητας στοιχείων του αντικειμένου διαμόρφωσης.
Πίνακας: Διαθέσιμα στοιχεία σελίδας πληρωμής
| Πεδίο | Υποχρεωτικό | Περιγραφή |
|---|---|---|
cardList |
Ναι | Αναγνωριστικό στοιχείου DOM όπου εμφανίζεται το συστατικό λίστας καρτών. |
otp |
Όχι | Αναγνωριστικό στοιχείου DOM όπου εμφανίζεται το συστατικό κωδικού μίας χρήσης (OTP). Αν δεν δίνεται, το OTP εμφανίζεται ως επικάλυψη. |
dcf |
Ναι | Αναγνωριστικό στοιχείου DOM όπου εμφανίζεται το συστατικό DCF. Αν δεν δίνεται, το στοιχείο DCF εμφανίζεται ως επικάλυψη. |
Ανακλήσεις
Πρέπει να ορίσετε τις ενέργειες που θα επικληθούν κατά την αλληλεπίδραση C2P ως ανακλήσεις.
Ανάκληση onStateChange
Η αρχική ροή προσδιορίζεται αφού καλέσετε τη συνάρτηση configure():
- Αν εντοπιστεί έγκυρο cookie C2P, χρησιμοποιείται η ροή "Επανερχόμενος χρήστης που αναγνωρίζεται μέσω cookie" και εμφανίζεται το στοιχείο λίστας καρτών.
- Αν εντοπιστεί ένα έγκυρο μήνυμα ηλεκτρονικού ταχυδρομείου C2P, χρησιμοποιείται η ροή "Επανερχόμενος χρήστης που αναγνωρίζεται μέσω cookie" και ζητείται από τον πληρωτή για ένα OTP πριν εμφανιστεί το στοιχείο λίστας καρτών.
- Αν δεν εντοπιστεί έγκυρο cookie ή email, χρησιμοποιείται η ροή "Νέος χρήστης".
Η ανάκληση onStateChange ενεργοποιείται όταν αλλάξει η κατάσταση αλληλεπίδρασης C2P. Μπορείτε να την χρησιμοποιήσετε για να προσδιορίσετε ποια στοιχεία είναι ορατά και σε ποιο στάδιο ο πληρωτής βρίσκεται εντός της ροής.
Παράδειγμα αντικειμένου ανάκλησης onStateChange
oldState : {
payerState: {
deviceRecognized: true,
email: ‘payer@test.com’, //masked email if not supplied in customer.email
},
elementState: {
cardList: {selector: 'cardListContainer', visible: true},
otp: {selector:'otpContainer', visible: false},
dcf: {selector:'dcfContainer', visible: false}
}
},
newState: {
payerState: {
deviceRecognized: true,
email: ‘payer@test.com’, //masked email
},
elementState: {
cardList: {selector: 'cardListContainer', visible: false},
otp: {selector:'otpContainer', visible: false},
dcf: {selector:'dcfContainer', visible: true}
}
},
diffState: {
elementState: {
dcf: {selector:'dcfContainer', visible: true}
}
}
Ο παρακάτω πίνακας παρέχει παραδείγματα για τον τρόπο διαχείρισης των αλλαγών κατάστασης με τις διαφορετικές ροές.
Πίνακας: Αλλαγές καταστάσεων
| Κατάσταση | Τιμή πεδίου προηγούμενης κατάστασης | Τιμή πεδίου νέας κατάστασης | Σχόλια |
|---|---|---|---|
| Φόρτωση σελίδας (πριν εμφανιστεί η λίστα καρτών) μετά το isRecognized και πριν εμφανιστεί το cardList | {} | {
payerState: {
deviceRecognized: true,
email: ‘payer@test.com’, //masked email
},
elementState: {
cardList: {selector: '#cardListContainer', visible: true},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
} |
- |
| μετά το κλικ στην κάρτα και πριν την ανακατεύθυνση στο DCF | {
payerState: {
deviceRecognized: true,
email: ‘payer@test.com’, //masked email
},
elementState: {
cardList: {selector: '#cardListContainer', visible: true},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
} |
{
payerState: {
deviceRecognized: true,
email: ‘payer@test.com’, //masked email
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: true}
}
} |
- |
| μετά την ολοκλήρωση του checkout | {
payerState: {
deviceRecognized: true,
email: ‘payer@test.com’, //masked email
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: true}
}
} |
{
payerState: {
deviceRecognized: true,
email: ‘payer@test.com’, //masked email
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
} |
Η ανάκληση onComplete επιστρέφει τα correlationId, scheme, digitalCardId. Μεταβείτε στο βήμα 6. |
Ροή "Επανερχόμενος χρήστης που αναγνωρίζεται μέσω cookie"
| Κατάσταση | Τιμή πεδίου προηγούμενης κατάστασης | Τιμή πεδίου νέας κατάστασης | Σχόλια |
|---|---|---|---|
Φόρτωση σελίδας μετά το isRecognized() και πριν από την εμφάνιση της λίστας καρτών |
{} | {
payerState: {
deviceRecognized: true,
email: ‘payer@test.com’, //masked email
},
elementState: {
cardList: {selector: '#cardListContainer', visible: true},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
}
|
- |
| Αφού κάνετε κλικ σε μια κάρτα και πριν ανακατευθυνθείτε στο στοιχείο DCF | {
payerState: {
deviceRecognized: true,
email: ‘payer@test.com’, //masked email
},
elementState: {
cardList: {selector: '#cardListContainer', visible: true},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
}
|
{
payerState: {
deviceRecognized: true,
email: ‘payer@test.com’, //masked email
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: true}
}
}
|
- |
| μετά την ολοκλήρωση του checkout | {
payerState: {
deviceRecognized: true,
email: ‘payer@test.com’, //masked email
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: true}
}
}
|
{
payerState: {
deviceRecognized: true,
email: ‘payer@test.com’, //masked email
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
}
|
Η ανάκληση onComplete επιστρέφει το αναγνωριστικό συσχέτισης, το πρόγραμμα και το αναγνωριστικό ψηφιακής κάρτας. Συνεχίστε από το βήμα 6. |
| αφού εισαχθεί ένα έγκυρο OTP | {
payerState: {
email: ‘payer@test.com’,
emailEnrolled: true,
emailVerified: false
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: true},
dcf: {selector:'#dcfContainer', visible: false}
}
}
} |
{
payerState: {
email: ‘payer@test.com’,
emailEnrolled: true,
emailVerified: true
},
elementState: {
cardList: {selector: '#cardListContainer', visible: true},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
}
|
- |
| Αφού κάνετε κλικ σε μια κάρτα, πριν ανακατευθυνθείτε στο στοιχείο DCF | {
payerState: {
email: ‘payer@test.com’,
emailEnrolled: true,
emailVerified: true
},
elementState: {
cardList: {selector: '#cardListContainer', visible: true},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
}
|
{
payerState: {
email: ‘payer@test.com’,
emailEnrolled: true,
emailVerified: true
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: true}
}
}
|
- |
| μετά την ολοκλήρωση του checkout | {
payerState: {
email: ‘payer@test.com’,
emailEnrolled: true,
emailVerified: true
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: true}
}
}
|
{
payerState: {
email: ‘payer@test.com’,
emailEnrolled: true,
emailVerified: true
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
}
|
Η ανάκληση onComplete επιστρέφει το αναγνωριστικό συσχέτισης, το πρόγραμμα και το αναγνωριστικό ψηφιακής κάρτας. Συνεχίστε από το βήμα 6. |
| Φόρτωση σελίδας με email | {
} |
{
payerState: {
deviceRecognized: false,
email: ‘payer@test.com’,
emailEnrolled: false,
emailVerified: false
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
}
|
Επειδή το προφίλ C2P του πληρωτή δεν αναγνωρίζεται, μπορείτε να εμφανίσετε πεδία εισαγωγής κάρτας, να συγκεντρώσετε τις λεπτομέρειες από τον πληρωτή και να ενημερώσετε την περίοδο λειτουργίας. Το email είναι κενό, εφόσον δεν δίνεται στις παραμέτρους διαμόρφωσης. |
Καλέστε τη συνάρτηση checkoutWithNewCard() πριν εμφανιστεί το στοιχείο DCF |
{
payerState: {
deviceRecognized: false,
email: ‘payer@test.com’,
emailEnrolled: false,
emailVerified: false
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
}
|
{
payerState: {
deviceRecognized: false,
email: ‘payer@test.com’,
emailEnrolled: false,
emailVerified: false
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: true}
}
}
|
- |
| μετά την ολοκλήρωση του checkout | {
payerState: {
deviceRecognized: false,
email: ‘payer@test.com’,
emailEnrollled: false,
emailVerified: false
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: true}
}
}
|
{
payerState: {
deviceRecognized: false,
email: ‘payer@test.com’,
emailEnrollled: false,
emailVerified: false
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
}
|
Η ανάκληση onComplete επιστρέφει το αναγνωριστικό συσχέτισης, το πρόγραμμα και το αναγνωριστικό ψηφιακής κάρτας. Συνεχίστε από το βήμα 6. |
Ανάκληση onComplete
Η ανάκληση onComplete ενεργοποιείται όταν ο πληρωτής έχει ολοκληρώσει την αλληλεπίδραση με το στοιχείο DCF.
Αυτή η συνάρτηση χρησιμοποιεί δύο ορίσματα:
scheme: Πρόγραμμα κάρτας- correlationId: Μοναδικό αναγνωριστικό για την αλληλεπίδραση C2P (για αυτό το πρόγραμμα)
Αυτές οι λεπτομέρειες πρέπει να χρησιμοποιηθούν στο βήμα 6 για την ανάκτηση των λεπτομερειών πληρωμής για αυτήν την αλληλεπίδραση C2P.
Ανάκληση onError
Η ανάκληση onError επιστρέφει ένα αντικείμενο σφάλματος αν παρουσιαστεί σφάλμα κατά την αλληλεπίδραση C2P. Περιέχει δύο πεδία:
{
errorCode: 'INVALID_INPUT',
errorMessage: 'session id is required'
}
Πίνακας: Κωδικοί σφαλμάτων ενοποίησης
| Κωδικός σφάλματος | Μήνυμα σφάλματος | Η ενέργειά σας |
|---|---|---|
CALLBACKS_ONCOMPLETE_ERROR |
Λείπει όρισμα: απαιτείται ανάκληση onComplete | Συμπεριλάβετε τη συνάρτηση ανάκλησης onComplete στη συνάρτηση configure(). |
CALLBACKS_ONERROR_ERROR |
Λείπει όρισμα: απαιτείται ανάκληση onError | Συμπεριλάβετε τη μέθοδο ανάκλησης onError στη συνάρτηση configure(). |
MERCHANT_ID_ERROR |
Λείπει όρισμα: απαιτείται το ID εμπόρου | Συμπεριλάβετε το πεδίο merchant.id στη συνάρτηση configure(). |
MERCHANT_NAME_ERROR |
Λείπει όρισμα: απαιτείται το όνομα εμπόρου | Συμπεριλάβετε το πεδίο merchant.name στη συνάρτηση configure(). |
MERCHANT_URL_ERROR |
Λείπει όρισμα: απαιτείται η διεύθυνση URL εμπόρου | Συμπεριλάβετε το πεδίο merchant.url στη συνάρτηση configure(). |
SESSION_ID_ERROR |
Λείπει όρισμα: απαιτείται το ID περιόδου λειτουργίας | Συμπεριλάβετε το πεδίο session.id στη συνάρτηση configure(). |
MISSING_API_VERSION_ERROR |
Λείπει όρισμα: απαιτείται η έκδοση API | Συμπεριλάβετε το πεδίο wsVersion στη συνάρτηση configure(). |
ORDER_AMOUNT_ERROR |
Λείπει όρισμα: απαιτείται το ποσό παραγγελίας | Συμπεριλάβετε το πεδίο order.amount στη συνάρτηση configure(). |
ORDER_CURRENCY_ERROR |
Λείπει όρισμα: απαιτείται το νόμισμα παραγγελίας | Συμπεριλάβετε το πεδίο order.currency στη συνάρτηση configure(). |
MIN_API_VERSION_ERROR |
Η έκδοση API θα πρέπει να είναι μεγαλύτερη ή ίση με 62 | Αλλάξτε την τιμή του πεδίου wsVersion σε τουλάχιστον 62, όλες οι πράξεις πρέπει να γίνονται χρησιμοποιώντας την έκδοση 62 ή νεότερη. |
CARD_LIST_ERROR |
Λείπει όρισμα: απαιτείται το elements.cardList | Συμπεριλάβετε το πεδίο elements.cardList που συνδέεται με το στοιχείο div της λίστας καρτών. |
DCF_ERROR |
Λείπει όρισμα: απαιτείται το elements.dcf | Συμπεριλάβετε το πεδίο elements.dcf που συνδέεται με το στοιχείο div της λίστας καρτών. |
MISSING_EMAIL_ERROR |
Λείπει όρισμα: απαιτείται το email | Συμπεριλάβετε το πεδίο customer.email στη συνάρτηση configure(). |
CUSTOMER_EMAIL_ERROR |
Σφάλμα μορφής email πελάτη | Βεβαιωθείτε ότι ο ιστότοπός σας δέχεται μόνο έγκυρες διευθύνσεις email πληρωτών. |
INTERACTION_LOCALE_ERROR |
Σφάλμα μορφής τοπικής ρύθμισης αλληλεπίδρασης | Δώστε έγκυρες τοπικές ρυθμίσεις χρησιμοποιώντας τη μορφή <language>_<country>, π.χ. en_US. |
INTERACTION_COUNTRY_ERROR |
Σφάλμα μορφής χώρας αλληλεπίδρασης | Δώστε μια έγκυρη τιμή χώρας ISO 3166 alpha-3 στο πεδίο interaction.country. |
Πίνακας: Κωδικοί σφαλμάτων checkout
| Κωδικός σφάλματος | Μήνυμα σφάλματος | Απαιτούμενη ενέργεια |
|---|---|---|
CARD_MISSING |
Απαιτήθηκε το αναγνωριστικό της ψηφιακής κάρτας ή το κρυπτογραφημένο αντικείμενο της κάρτας, αλλά λείπει. | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
CARD_ADD_FAILED |
Δεν είναι δυνατή η προσθήκη κάρτας κατά την εκτέλεση συνδυασμένης ροής | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
CARD_SECURITY_CODE_MISSING |
Η ασφάλεια της κάρτας πρέπει να παρέχεται όταν εκτελείται η συνδυασμένη ροή. | Βεβαιωθείτε ότι το πεδίο cardSecurityCode στη συνάρτηση ClickToPay.checkoutWithNewCard() περιέχει μια τιμή 3 ψηφίων (ή 4 ψηφίων για Amex). |
CARD_INVALID |
Μη έγκυρος αριθμός κάρτας όταν εκτελείται συνδυασμένη ροή. | Βεβαιωθείτε ότι το πεδίο primaryAccountNumber στη συνάρτηση ClickToPay.checkoutWithNewCard() είναι έγκυρη κάρτα. |
CARD_NOT_RECOGNIZED |
Η καθορισμένη κάρτα δεν αναγνωρίστηκε. | Βεβαιωθείτε ότι το πεδίο primaryAccountNumber στη συνάρτηση ClickToPay.checkoutWithNewCard() είναι έγκυρη κάρτα. |
CARD_EXP_INVALID |
Μη έγκυρη ημερομηνία λήξης της κάρτας. | Βεβαιωθείτε ότι τα πεδία panExpirationYear και panExpirationMonth στη συνάρτηση ClickToPay.checkoutWithNewCard() είναι έγκυρα. |
MERCHANT_DATA_INVALID |
Τα δεδομένα εμπόρου δεν είναι έγκυρα | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
UNABLE_TO_CONNECT |
Δεν είναι δυνατή η σύνδεση / Εκκίνηση του DCF. | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
AUTH_INVALID |
Μη έγκυρο ομοσπονδιακό token ID. | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
Τυπικοί κωδικοί σφάλματος C2P
| Κωδικός σφάλματος | Μήνυμα σφάλματος | Απαιτούμενη ενέργεια |
|---|---|---|
REQUEST_TIMEOUT |
Η ολοκλήρωση του αιτήματος χρειάστηκε περισσότερο από τον επιτρεπόμενο χρόνο. Αυτό μπορεί να σημαίνει ότι η υπηρεσία αντιμετωπίζει μεγάλο όγκο κλήσεων. Θα πρέπει να προσπαθήσετε ξανά αργότερα. Μπορεί επίσης να οφείλεται στο ότι το SDK δεν μπορεί να επικοινωνήσει με το iframe του. | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
SERVER_ERROR |
Αυτό υποδηλώνει ότι ο διακομιστής αντιμετώπισε μια απροσδόκητη συνθήκη που τον εμπόδισε να εκπληρώσει το αίτημα. | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
INVALID_PARAMETER |
Η τιμή που δίνεται για μία ή περισσότερες παραμέτρους αιτήματος θεωρείται μη έγκυρη. Αυτό το σφάλμα δημιουργείται επίσης όταν λείπει ένα απαιτούμενο πεδίο. Σημείωση: Όποτε είναι δυνατόν, θα πρέπει να παρέχετε επικύρωση στο client για να αποφύγετε το περιττό μπρος-πίσω στον διακομιστή. Οι απλοί περιορισμοί επικύρωσης τεκμηριώνονται ως μέρος της προδιαγραφής API. | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
INVALID_REQUEST |
Ο διακομιστής δεν μπόρεσε να κατανοήσει το αίτημα. Συνήθως αυτό σημαίνει ότι ένα πεδίο δεδομένων πρέπει να είναι σε συγκεκριμένη μορφή αλλά δεν είναι. Για παράδειγμα, η αποκωδικοποίηση του base64 μπορεί να απέτυχε. Το πεδίο μηνύματος μπορεί να παρέχει πρόσθετη διευκρίνιση σχετικά με το ποιο τμήμα/πεδίο του αιτήματος θεωρείται λανθασμένο. | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
AUTH_ERROR |
Ο διακομιστής κατανοεί το αίτημα, αλλά δεν μπορεί να κάνει ταυτοποίηση. | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
NOT_FOUND |
Ο απαιτούμενος πόρος/επιχειρηματική οντότητα δεν υπάρχει. Ο πόρος μπορεί επίσης να είναι κρυφός για λόγους ασφαλείας. | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
TERMS_AND_CONDITIONS_NOT_ACCEPTED |
Οι Όροι και Προϋποθέσεις δεν γίνονται δεκτοί. | Επαναφορά στη ροή checkout επισκεπτών. |
IS_CONFIGURED_ERROR |
Η μέθοδος configure() δεν ολοκληρώθηκε. Η διαμόρφωση πρέπει να προετοιμαστεί πρώτα. | Βεβαιωθείτε ότι η ενοποίησή σας κάλεσε τη συνάρτηση configure(). Βεβαιωθείτε ότι έχετε αφήσει αρκετό χρόνο για να ολοκληρωθεί η συνάρτηση πριν κάνετε ορατά τα στοιχεία C2P. |
SRCI_ID_MISSING |
Το αναγνωριστικό για το SRC Initiator λείπει. | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
DPA_ID_MISSING |
Το αναγνωριστικό για το DPA λείπει | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
SRCI_TXID_MISSING |
Το αναγνωριστικό συναλλαγής SRC Initiator λείπει. | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
DPA_TXOPT_MISSING |
Η δομή DPA Transaction Options λείπει. | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
INVALID_STATE |
Ο λογαριασμός υπάρχει αλλά δεν βρίσκεται σε "ενεργή" κατάσταση για αυτό το πρόγραμμα. | Επαναφορά στη ροή checkout επισκεπτών. |
CONSUMER_ID_MISSING |
Απαιτούταν η ταυτότητα του καταναλωτή, ωστόσο δεν δόθηκε. | Επαναφορά στη ροή checkout επισκεπτών. |
FRAUD |
Ο λογαριασμός χρήστη κλειδώθηκε ή απενεργοποιήθηκε. | Επαναφορά στη ροή checkout επισκεπτών. |
ID_FORMAT_UNSUPPORTED |
Μη έγκυρο ID περιόδου λειτουργίας | Το C2P δεν είναι διαθέσιμο, επαναφέρετε τη ροή checkout επισκέπτη. |
Καθυστέρηση OTP για επανερχόμενους χρήστες που αναγνωρίζονται βάσει email (προαιρετικό)
Αν ο πληρωτής αναγνωρίζεται από το C2P με βάση το email του, η προεπιλεγμένη συμπεριφορά είναι να εμφανίζεται αυτόματα το OTP που δίνεται από το C2P.
Αν, για οποιονδήποτε λόγο, θέλετε να ξεκινήσετε την αλληλεπίδραση C2P αλλά να καθυστερήσετε το OTP που δίνεται από το C2P μέχρι αργότερα (ενώ εμφανίζετε πρόσθετες οθόνες στον πληρωτή πριν συνεχίσει), προσθέστε το πεδίο interaction.suppressPayerInteraction στη συνάρτηση ClickToPay.configure().
Αν ορίσετε το πεδίο interaction.suppressPayerInteraction σε true, η συνάρτηση configure() ρυθμίζει την αλληλεπίδραση C2P και ελέγχει αν ο πληρωτής αναγνωρίζεται χρησιμοποιώντας το email του ή ένα cookie ή είναι νέος χρήστης. Ωστόσο, η συνάρτηση δεν ενεργοποιεί την αλληλεπίδραση C2P με τον πληρωτή (εμφάνιση τυχόν σχετικών στοιχείων).
Αν το πεδίο παραλειφθεί ή οριστεί σε false, η συνάρτηση configure() ρυθμίζει την αλληλεπίδραση C2P, ελέγχει αν ο πληρωτής αναγνωρίζεται χρησιμοποιώντας το email του ή ένα cookie ή είναι νέος χρήστης, καθώς επίσης ενεργοποιεί αμέσως την αλληλεπίδραση C2P με τον πληρωτή.
Αν το πεδίο interaction.suppressPayerInteraction οριστεί σε true, πρέπει να προβείτε στις ακόλουθες ενέργειες βάσει της κατάστασης αναγνώρισης του πληρωτή. Αν ο πληρωτής είναι:
- Αν αναγνωριστεί με βάση τη διεύθυνση email (
emailEnrolled = trueκαιemailVerified = false), η εφαρμογή εμπόρου μπορεί να εφαρμόσει πρόσθετα βήματα στη ροή της πριν από την έναρξη του ελέγχου OTP του C2P. Στη συνέχεια, πρέπει να καλέσετε τη συνάρτησηClickToPay.initiatePayerInteraction()για να εμφανιστεί το OTP στον πληρωτή. - Αν δεν αναγνωριστεί με βάση τη διεύθυνση email (είναι νέος χρήστης ή αναγνωρίζεται με cookie), η εφαρμογή εμπόρου πρέπει να καλέσει αμέσως τη συνάρτηση
initiatePayerInteraction().
Βήμα 4: Ενημέρωση αλλαγών διεύθυνσης email
Αν ο πληρωτής μπορεί να αλλάξει τη διεύθυνση email του στην ίδια σελίδα που εμφανίζει τα στοιχεία C2P, τυχόν αλλαγές στη διεύθυνση email του πληρωτή πρέπει να προωθηθούν στο C2P SDK. Κάθε φορά που ο πληρωτής ενημερώνει τη διεύθυνση email του, καλέστε τη συνάρτηση ClickToPay.lookupCustomer(email) για να ενημερώσετε το C2P SDK. Το email του πληρωτή χρησιμοποιείται για να αναζητηθεί αν αυτός ο πληρωτής διαθέτει ένα υπάρχον προφίλ C2P συσχετισμένο με το email του.
Αν συλλέξετε τη διεύθυνση email από τον πληρωτή στον ιστότοπό σας, ενημερώστε τον πληρωτή ότι το email του χρησιμοποιείται για την αναζήτηση του προφίλ C2P του. Μπορείτε να συμπεριλάβετε μια υπόδειξη εργαλείου δίπλα στο πλαίσιο εισαγωγής email που ενημερώνει τον πληρωτή ότι "συνεργάζεστε με τα προγράμματα καρτών που συμμετέχουν για την παροχή του C2P για ταχύτερο checkout και ότι το email κοινοποιείται με ασφάλεια στα προγράμματα καρτών που συμμετέχουν για να ελέγχεται αν ο πληρωτής διαθέτει ήδη προφίλ C2P".
Αν η ενημερωμένη διεύθυνση email:
-
- Συνδέεται με ένα υπάρχον προφίλ C2P:
- Η ανάκληση
onStateChangeενεργοποιείται μεnewState.payerState.emailEnrolled = true. - Η φόρμα εισαγωγής OTP εμφανίζεται από το C2P JavaScript SDK.
- Η ανάκληση
- Δεν συνδέεται με υπάρχον προφίλ C2P, η ανάκληση
onStateChangeενεργοποιείται με τοnewState.payerState.emailEnrolled = false.
Βήμα 5: Υλοποίηση του checkout
Αν ο πληρωτής αποφασίσει να πραγματοποιήσει checkout χρησιμοποιώντας μια υπάρχουσα κάρτα από το προφίλ C2P του, καλέστε τη συνάρτηση ClickToPay.checkoutWithExistingCard() αφού ο πληρωτής επιλέξει την κάρτα από τη λίστα καρτών. Η συνάρτηση οδηγεί τον πληρωτή στην οθόνη επιβεβαίωσης κάρτας στο στοιχείο DCF.
Αν ο πληρωτής αποφασίσει να εγγράψει μια νέα κάρτα στο προφίλ του C2P ή δεν έχει προφίλ:
- Εμφανίστε τη φόρμα εισαγωγής της κάρτας ως πεδία Hosted Session, ώστε ο πληρωτής να μπορεί να εισαγάγει τις λεπτομέρειες πληρωμής του και να κάνει κλικ στο κουμπί Πληρωμή. Πρέπει να εμφανίσετε τα πεδία για τα ακόλουθα:
- Αριθμός κάρτας
- Κωδικός ασφαλείας
- Μήνας και έτος λήξης
- Όνομα στην κάρτα
- Ανακτήστε το πρόγραμμα της κάρτας από το Hosted Session χρησιμοποιώντας την ανάκληση
PaymentSession.onCardTypeChange, η οποία ενεργοποιείται όταν ο πληρωτής συμπληρώσει τον αριθμό της κάρτας στο hosted πεδίο. - Καλέστε τη συνάρτηση
ClickToPay.isEnrollmentAvailableForScheme()χρησιμοποιώντας το πρόγραμμα.
Η συνάρτηση ελέγχει το παρεχόμενο πρόγραμμα έναντι τουpaymentTypes.card.walletProviders[n].secureRemoteCommerce.scheme[n].nameστην απόκριση πράξης ΕPAYMENT OPTIONS INQUIRY για να προσδιορίσει αν διαθέτετε δυνατότητα για το πρόγραμμα.
Αν η συνάρτηση επιστρέψειfalse, πραγματοποιήστε έξοδο από αυτήν τη ροή και χρησιμοποιήστε τη ροή checkout επισκέπτη για να επεξεργαστείτε την κάρτα κανονικά χωρίς C2P. - Εμφάνιση και δήλωση συναίνεσης:
- Αν βρίσκεστε στις ΗΠΑ, συμπεριλάβετε πληροφορίες ότι σε περίπτωση που ο πληρωτής επιλέξει να συνεχίσει, θα κοινοποιήσετε τις λεπτομέρειες της κάρτας, τη διεύθυνση χρέωσης και το email του πληρωτή με τα συμμετέχοντα προγράμματα καρτών, για να επιτρέψετε την εγγραφή του πληρωτή στο C2P για ταχύτερα checkout.
- Αν βρίσκεστε εκτός των ΗΠΑ, εμφανίζεται:
- Μη επιλεγμένο πλαίσιο συναίνεσης.
- Κείμενο συναίνεσης όπου ο πληρωτής συμφωνεί να κοινοποιήσει τις λεπτομέρειες της κάρτας, τη διεύθυνση χρέωσης και το email στα προγράμματα καρτών που συμμετέχουν, ώστε να επιτραπεί η εγγραφή του πληρωτή στο C2P για ταχύτερα checkout.
- Όταν ο πληρωτής κάνει κλικ στο κουμπί Πληρωμή στη σελίδα πληρωμής σας για να προχωρήσει στο επόμενο στάδιο:
- Αν βρίσκεστε εκτός των ΗΠΑ και το πλαίσιο συναίνεσης δεν είναι επιλεγμένο, ο πληρωτής δεν έχει συναινέσει στην κοινοποίηση των δεδομένων στο C2P. Ακολουθήστε τη ροή checkout επισκεπτών και επεξεργαστείτε την κάρτα κανονικά χωρίς C2P.
- Αν βρίσκεστε στις ΗΠΑ ή εκτός των ΗΠΑ και ο χρήστης έχει επιλέξει το πλαίσιο συναίνεσης, ενημερώστε την περίοδο λειτουργίας (session) χρησιμοποιώντας τη συνάρτηση
PaymentSession.updateSessionFromForm().
Μπορείτε επίσης να ενημερώσετε την περίοδο λειτουργίας (session) με μια προαιρετική διεύθυνσηbillingχρησιμοποιώντας το αντικείμενο χρέωσης σε ένα αίτημα UPDATE SESSION. Αν εισαγάγετε τις λεπτομέρειες χρέωσης πληρωτή στο session πληρωμής (payment session), ο πληρωτής δεν χρειάζεται να τα πληκτρολογήσει ξανά κατά την εγγραφή στο C2P.
- Μετά την ενημέρωση της περιόδου λειτουργίας (session), καλέστε τη συνάρτηση
ClickToPay.checkoutWithNewCard(), η οποία οδηγεί τον πληρωτή στην οθόνη εγγραφής κάρτας στο στοιχείο DCF:
- Αν η συνάρτηση αποτύχει, καλείται η ανάκληση
onError. Λάβετε τα απαραίτητα βήματα για να επιλύσετε το σφάλμα. - Αν η συνάρτηση επιτύχει, ο πληρωτής ανακατευθύνεται στο στοιχείο DCF.
- Αν η συνάρτηση αποτύχει, καλείται η ανάκληση
- Ο πληρωτής αλληλεπιδρά με το στοιχείο DCF για να διευκολύνει την εγγραφή. Αφού καλέσετε την ανάκληση
onComplete, η αλληλεπίδραση C2P έχει ολοκληρωθεί και μπορείτε να συνεχίσετε στο βήμα 6 για να ενημερώσετε την περίοδο λειτουργίας (session) με λεπτομέρειες C2P.
Βήμα 6: Ενημερώστε την περίοδο λειτουργίας (session) με λεπτομέρειες πληρωμής Click to Pay
Πρέπει να ζητήσετε από την πύλη την ανάκτηση των λεπτομερειών πληρωμής για την αλληλεπίδραση C2P και να τις αποθηκεύσετε στην περίοδο λειτουργίας (session), αφού ο πληρωτής ολοκληρώσει με επιτυχία την αλληλεπίδραση C2P.
Υποβάλετε ένα αίτημα API UPDATE SESSION FROM WALLET στον διακομιστή με:
- Αναγνωριστικό περιόδου λειτουργίας (session) στη διεύθυνση URL του αιτήματος.
- Αναγνωριστικό συσχέτισης και πρόγραμμα όπως επιστράφηκαν στην ανάκληση
onComplete.
| Παράδειγμα αιτήματος UPDATE SESSION FROM WALLET |
|---|
URL: "https://na-gateway.mastercard.com/form/version/<version>/merchant/<merchant_ID>/session/<session_ID>
HTTP Method POST
{
"apiOperation":"UPDATE_SESSION_FROM_WALLET",
"order":{
"walletProvider":"SECURE_REMOTE_COMMERCE"
},
"wallet":{
"secureRemoteCommerce":{
"srcCorrelationId":"<correlationId_provided_in_payloadCallback>,
"scheme":"<scheme_provided_in_payloadCallback>"
}
}
}
|
Αν η περίοδος λειτουργίας (session) ενημερωθεί με επιτυχία με τις λεπτομέρειες πληρωμής από την αλληλεπίδραση C2P, εμφανίστε μια οθόνη επιβεβαίωσης πληρωμής για να επιβεβαιώσετε ότι όλες οι λεπτομέρειες είναι σωστές προτού ο πληρωτής δεσμευτεί για την πληρωμή. Αν η περίοδος λειτουργίας δεν έχει ενημερωθεί με επιτυχία, ζητήστε από τον πληρωτή να κάνει μια άλλη επιλογή checkout.
Βήμα 7: Εκτελέστε ταυτοποίηση 3D Secure (προαιρετικό)
Αν θέλετε να ταυτοποιήσετε τον πληρωτή, εκτελέστε ταυτοποίηση 3D Secure χρησιμοποιώντας την περίοδο λειτουργίας (session). Για λεπτομερείς οδηγίες, βλ. 3DS με το 3DS JavaScript API.
Βήμα 8: Εκτελέστε την πράξη πληρωμής
Λόγω περιορισμού στη λειτουργία DCF της Visa, αν ο πληρωτής επιλέξει να επιστρέψει στην αρχική σελίδα εισαγωγής/επιλογής κάρτας για να χρησιμοποιήσει διαφορετική κάρτα για πληρωμή αφού ολοκληρώσει το τμήμα DCF της ροής, θα πρέπει να προετοιμάσετε ξανά το SDK. Η προτεινόμενη προσέγγιση είναι να καλέσετε ξανά τη συνάρτηση configure().
Αφού ο πληρωτής δεσμευτεί για την πληρωμή (και η ταυτοποίηση 3D Secure επιτύχει, εφόσον εκτελεστεί), χρησιμοποιήστε την περίοδο λειτουργίας (session) για να υποβάλετε την πληρωμή για διεκπεραίωση από τον διακομιστή σας. Για παράδειγμα, μπορείτε να υποβάλετε ένα αίτημα AUTHORIZE.
Οι λεπτομέρειες πληρωμής που έχουν αποθηκευθεί στην περίοδο λειτουργίας (session) από την αλληλεπίδραση C2P χρησιμοποιούνται για τη διεκπεραίωση της πληρωμής. Μπορείτε να χρησιμοποιήσετε την ίδια περίοδο λειτουργίας για έναν αριθμό πράξεων API. Για περισσότερες πληροφορίες σχετικά με την υποβολή αιτημάτων πληρωμής εντός μιας περιόδου λειτουργίας (session), βλ. Βασικές αρχές της περιόδου λειτουργίας.
Για τις ροές checkout επισκέπτη, χρησιμοποιήστε τη βασική Hosted Session υλοποίηση για να συγκεντρώσετε τις λεπτομέρειες της κάρτας από τα hosted πεδία και να τις προσθέσετε στη περίοδο λειτουργίας (session) πριν από την αποστολή της πράξης πληρωμής.
| Παράδειγμα αιτήματος AUTHORIZE |
|---|
URL: "https://na-gateway.mastercard.com/form/version/{version}//merchant/<merchant_ID>/order/<order_ID>/transaction/<transaction_ID>
HTTP Method PUT
{
"apiOperation":"AUTHORIZE",
"session": {
"id": "<session_ID>"
}
}
|
Παράδειγμα HTML για την ενοποίηση
Αυτή η ενότητα περιγράφει μια απλή ενοποίηση για το Hosted Session με σκοπό τη συλλογή των λεπτομερειών της πιστωτικής κάρτας του πληρωτή και τη διαμόρφωση του C2P.
Παράδειγμα ενοποίησης Hosted Session
Παράδειγμα
<html>
<head>
<!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY -->
<script src="https://na-gateway.mastercard.com/form/version/<Version>/merchant/<Merchant ID>/session.js"></script>
<!-- INCLUDE CLICK-TO-PAY.MIN.JS JAVASCRIPT LIBRARY -->
<script type="text/javascript" src="https://na-gateway.mastercard.com/form/static/click-to-pay/click-to-pay.min.js"></script>
<!-- APPLY CLICK-JACKING STYLING AND HIDE CONTENTS OF THE PAGE -->
<style id="antiClickjack">body{display:none !important;}</style>
</head>
<body>
<!-- CREATE THE HTML FOR THE PAYMENT PAGE -->
<div>Please enter your payment details:</div>
<h3>Credit Card</h3>
<div>Card Number: <input type="text" id="card-number" class="input-field" title="card number" aria-label="enter your card number" value="" tabindex="1" readonly></div>
<div>Expiry Month:<input type="text" id="expiry-month" class="input-field" title="expiry month" aria-label="two-digit expiry month" value="" tabindex="2" readonly></div>
<div>Expiry Year:<input type="text" id="expiry-year" class="input-field" title="expiry year" aria-label="two-digit expiry year" value="" tabindex="3" readonly></div>
<div>Security Code:<input type="text" id="security-code" class="input-field" title="security code" aria-label="three-digit CCV security code" value="" tabindex="4" readonly></div>
<div>Cardholder Name:<input type="text" id="cardholder-name" class="input-field" title="cardholder name" aria-label="enter name on card" value="" tabindex="5" readonly></div>
<div><button id="payButton" onclick="pay('card');">Pay Now</button></div>
<!-- CREATE THE HTML FOR THE CLICK-TO-PAY INTERACTION -->
<div>C2P Fields Below------</div>
Email: <input id="payerEmail" onblur="updateEmail();" /><br/>
<div id="cardListContainer" ></div><br/>
<div id="otpContainer"></div><br/>
<div id="cardFacilitator" ></div><br/>
<div id="coid" ></div><br/>
<!-- JAVASCRIPT FRAME-BREAKER CODE TO PROVIDE PROTECTION AGAINST IFRAME CLICK-JACKING -->
<script type="text/javascript">
if (self === top) {
var antiClickjack = document.getElementById("antiClickjack");
antiClickjack.parentNode.removeChild(antiClickjack);
} else {
top.location = self.location;
}
PaymentSession.configure({
session: "<your_session_ID>",
fields: {
// ATTACH HOSTED FIELDS TO YOUR PAYMENT PAGE FOR A CREDIT CARD
card: {
number: "#card-number",
securityCode: "#security-code",
expiryMonth: "#expiry-month",
expiryYear: "#expiry-year",
nameOnCard: "#cardholder-name"
}
},
//SPECIFY YOUR MITIGATION OPTION HERE
frameEmbeddingMitigation: ["javascript"],
callbacks: {
initialized: function(response) {
console.log('initialized: ' + response)
if(response.status === 'ok') {
//configure C2P
configure()
}
},
formSessionUpdate: function(response) {
// HANDLE RESPONSE FOR UPDATE SESSION
if (response.status) {
if ("ok" == response.status) {
console.log("Session updated with data: " + response.session.id);
//CHECK IF SECURITY CODE WAS PROVIDED BY THE USER
if (response.sourceOfFunds.provided.card.securityCode) {
console.log("Security code was provided.");
}
//CHECK IF THE USER ENTERED A MASTERCARD CREDIT CARD
if (response.sourceOfFunds.provided.card.scheme == 'MASTERCARD') {
console.log("The user entered a Mastercard credit card.")
}
ClickToPay.isEnrollmentAvailableForScheme(response.sourceOfFunds.provided.card.scheme, function (canEnroll) {
console.log('Card can be enrolled', canEnroll)
if(canEnroll) {
ClickToPay.checkoutWithNewCard();
}
});
} else if ("fields_in_error" == response.status) {
console.log("Session update failed with field errors.");
if (response.errors.cardNumber) {
console.log("Card number invalid or missing.");
}
if (response.errors.expiryYear) {
console.log("Expiry year invalid or missing.");
}
if (response.errors.expiryMonth) {
console.log("Expiry month invalid or missing.");
}
if (response.errors.securityCode) {
console.log("Security code invalid.");
}
} else if ("request_timeout" == response.status) {
console.log("Session update failed with request timeout: " + response.errors.message);
} else if ("system_error" == response.status) {
console.log("Session update failed with system error: " + response.errors.message);
}
} else {
console.log("Session update failed: " + response);
}
}
},
interaction: {
displayControl: {
formatCard: "EMBOSSED",
invalidFieldCharacters: "REJECT"
}
}
});
function pay() {
// UPDATE THE SESSION WITH THE INPUT FROM HOSTED FIELDS
PaymentSession.updateSessionFromForm('card');
}
</script>
<script type="text/javascript">
var payloadCallback = function (correlationId, scheme) {
console.log('Payload callback complete with correlation id %s and scheme %s', correlationId, scheme);
};
var errorCallback = function (error) {
console.log('Error callback triggered with error ' + error);
console.log(error);
};
var cancelCallback = function () {
console.log('Cancel callback triggered');
};
function configure() {
ClickToPay.configure({
merchant: {
id: "<your_gateway_merchant_ID>",
name: "<your_gateway_name>",
url: "<your_web_site_URL>"
},
session: {
id: "<your_session_ID>",
wsVersion: <api_version>
},
order: {
amount: <amount>,
currency: "<currency>"
},
interaction: {
//BILLING PREFERENCE WITH ONE OF THE FOLLOWING VALUES: NONE, FULL, POSTAL_COUNTRY
billingPreference: "FULL",
collectShippingAddress: true,
locale: "<locale>",
country: "<country code>"
},
customer: {
email: "<payers_email_address>"//OPTIONAL
},
elements: {
cardList: "cardListContainer",
otp: "otpContainer", // OPTIONAL
dcf: "cardFacilitator"
},
callbacks: {
onComplete: function(correlationId, scheme) {
console.log("onComplete fired");
console.log("Correlation ID: " + correlationId);
console.log("Scheme: " + scheme);
document.getElementById("coid").innerHTML = 'Correlation ID: ' + correlationId + ', Scheme: ' + scheme
},
onStateChange: function(changeInfo) {
console.log("onStateChange fired");
console.log(changeInfo);
},
onError: function(errInfo) {
console.log("onError fired");
console.log(errInfo);
}
}
});
}
function updateEmail() {
ClickToPay.lookupCustomer(document.getElementById("payerEmail").value);
}
</script>
</body>
</html>