Integration Types
Alte caracteristici
Card Payments
Mobile Wallets
Alternative Payment Methods
Resources
Această pagină oferă instrucțiuni despre modul de integrare folosind modelul Hosted Payment Session cu JavaScript (HPF.js). Crearea și trimiterea paginii de plată sunt pași de o importanță critică în cadrul integrării comerciant pentru acest model. Detaliile cardului, colectate de la plătitor, sunt trimise direct către eGenius Platform utilizând o metodă JavaScript. eGenius Platform stochează detaliile cardului într-un identificator de sesiune, care vă este returnat după rezolvarea tuturor erorilor. Puteți utiliza identificatorul de sesiune în locul detaliilor cardului pentru a iniția o tranzacție de plată.
Includeți biblioteca JavaScript (hpf.js) Hosted Payment Session în pagina de plată și setați ID comerciant:
<script id="hpfScript" src="https://egenius.unicredit.ro/form/v3/hpf.js"></script> <script>HostedForm.setMerchant(<my merchantId>);</script>
<my merchantId>
cu ID-ul dvs. de comerciant furnizat de eGenius Platform. Pentru a testa integrarea dvs. cu ajutorul comerciantului de testare adăugați la ID-ul dvs. comerciant prefixul „TEST”. De exemplu, TESTMERCHANT123 în cazul în care ID comerciant este „MERCHANT123”.Trebuie să colectați detaliile cardului (număr card, cod de securitate, luna de expirare și anul de expirare) de la plătitor și să le transmiteți în metoda HostedForm.createSession( )/HostedForm.updateSession( ). Mai jos este prezentat un formular HTML care colectează toate detaliile cardului.
<!-- REPLACE THE action URL with the payment URL on your webserver --> <form name="myform" method="POST" action="https://my.company.com/pay">
<!-- Name attributes are not provided for the card details to stop them from being submitted to your web server as part of the form submission --> Card: <input type="text" id="cardNumber"> CSC: <input type="text" id="cardSecurityCode"> Month: <input type="text" id="expiryMonth"> Year: <input type="text" id="expiryYear">
<!-- Other fields can be added to enable you to collect additional data on the payment page --> Email: <input type="text" name="email">
<!-- The hidden values below can be set in the updateSessionCallback function as they are returned when creating the session --> <input type="hidden" name="sessionId" id="sessionId"> <input type="hidden" name="cardBrand" id="cardBrand"> <input type="button" value="Pay" onclick="doCheckout()"> </form>
"https://my.company.com/pay"
cu adresa URL a serverului dvs. web care găzduiește o pagină care va realiza procesarea plății după ce identificatorul de sesiune a fost creat.Biblioteca HPF.js furnizează următoarele metode pentru crearea și/sau actualizarea unei sesiuni, metode apelate când sunt trimise detaliile cardului.
Puteți crea o sesiune utilizând metoda HostedForm.createSession( ), care primește ca parametri detaliile cardului colectate de la plătitor și o funcție callback.
HostedForm.createSession(sessionDetails, createSessionCallback);
În mod alternativ, puteți crea o sesiune nouă apelând metoda HostedForm.updateSession( ) fără a-i transmite un identificator de sesiune.
HostedForm.updateSession(sessionDetails, updateSessionCallback);
Mai jos este prezentat un fragment de cod exemplu care vă prezintă modul de apelare a metodei HostedForm.createSession() sau a metodei HostedForm.updateSession() pentru a crea o sesiune nouă.
// Collect the card details based on the 'id' of the form elements var getSessionDetailsFromForm = function() { return { cardNumber: document.getElementById('cardNumber').value, cardSecurityCode: document.getElementById('cardSecurityCode').value, cardExpiryMonth: document.getElementById('expiryMonth').value, cardExpiryYear: document.getElementById('expiryYear').value } } // Call doCheckout() from the form submit onClick() event var doCheckout = function() { var sessionDetails = getSessionDetailsFromForm(); HostedForm.createSession(sessionDetails, callback); // HostedForm.updateSession(sessionDetails, callback); };
Dacă apelați metoda HostedForm.updateSession( ) transmițând un identificator de sesiune, atunci sunt actualizate detaliile sesiunii, dacă aceasta există. Această metodă este utilă dacă aveți deja o sesiune care conține detalii, ca de exemplu adresa de facturare și de livrare, dar doriți să adăugați la un moment ulterior al procesului de validare detalii de plată în acea sesiune. Sau, dacă doriți să colectați de la plătitor detalii card diferite, deoarece detaliile cardului colectate anterior nu sunt acceptabile, de exemplu tipul cardului nu este acceptat.
HostedForm.updateSession(sessionId, sessionDetails, updateSessionCallback);
Mai jos este prezentat un fragment de cod exemplu care vă prezintă modul de apelare a metodei HostedForm.updateSession() pentru a actualiza o sesiune existentă.
// Collect the card details based on the 'id' of the form elements var getSessionDetailsFromForm = function() { return { cardNumber: document.getElementById('cardNumber').value, cardSecurityCode: document.getElementById('cardSecurityCode').value, cardExpiryMonth: document.getElementById('expiryMonth').value, cardExpiryYear: document.getElementById('expiryYear').value } } // Call doCheckoutWithExistingSession() from the form submit onClick() event var doCheckoutWithExistingSession = function(sessionId) { var sessionDetails = getSessionDetailsFromForm(); HostedForm.updateSession(sessionId, sessionDetails, callback); };
Când eGenius Platformprocesează formularul dvs., răspunsul este manipulat de o funcție callback pe care trebuie să o definiți în pagina dvs. web. Această funcție primește un obiect care descrie rezultatul apelării metodei HostedForm.createSession( ) sau metodei HostedForm.updateSession( ).
Dacă response.status este „ok”, pagina dvs. web trebuie să transmită identificatorul de sesiune returnat către serverul dvs. web astfel încât acesta să poată fi utilizat pentru a invoca tranzacție. Dacă response.status este „fields_in_error”, pagina dvs. web trebuie să analizeze câmpurile individuale pentru erori. Pentru informații referitoare la codurile de eroare, consultați secțiunea Manipularea erorilor de la formularul de plată.
Mai jos este prezentat un exemplu de cod care include identificatorul de sesiune și elementul tip card în formularul de plată care este trimis serverului dvs. web.
var callback = function(response) { if (response.status === "ok") { // call your server to do the payment with the response.session value // this is where we populate the hidden values in the form var sessionIdElement = document.getElementById("sessionId"); sessionIdElement.value = response.session; // card brand is not required to be submitted, but shown here as an optional field // the response object contains the full list of fields var cardBrandElement = document.getElementById("cardBrand"); cardBrandElement.value = response.cardBrand; document.myform.submit(); } else if (response.status === "request_timeout") { // handle the timeout for example by giving the payer the possibility to retry } else if (response.status === "fields_in_error") { // check in the response.fieldsInError object to see which field was marked as invalid or missing if (response.fieldsInError.cardNumber === "invalid") { document.getElementById('cardNumber').style.color="red"; } else if (response.fieldsInError.cardExpiryMonth === "invalid") { document.getElementById('expiryMonth').style.color="red"; } else if (response.fieldsInError.cardExpiryYear === "invalid") { document.getElementById('expiryYear').style.color="red"; } else if (response.fieldsInError.cardSecurityCode === "invalid") { document.getElementById('cardSecurityCode').style.color="red"; } } } else if (response.status === "invalid_session") { // handle invalid session details for example by giving the payer the possibility to retry with different card details. If the new details are correct, you can call the updateSession( ) method } else { // add system error handling here. Typically this would mean the integration is not working properly because there is no response from the client library. // this could result in displaying a page to the payer to try again later and call support } };