Modelul Hosted Payment Session cu JavaScript

Este important să vă asigurați că informațiile sensibile din câmpurile referitoare la plată nu sunt trimise serverului dvs. De exemplu, dacă utilizați un formular de plată, puteți obține această caracteristică omițând atributul „name” din câmpurile număr card, validitate card și CSC/CVV.

Nu puteți utiliza modelul Hosted Payment Session cu JavaScript dacă browserul plătitorului nu acceptă JavaScript.

Dacă aveți propria dvs. pagină de plată, puteți alege această opțiune pentru a permite eGenius Platform să administreze detaliile includerii SDK-ului Visa Checkout, să lanseze lightboxul Visa Checkout și să actualizeze rezultatele într-o sesiune de plată. Aceasta este cea mai simplă opțiune pentru integrări Hosted Payment Session existente (cu JavaScript).

Procesul de plată este după cum urmează:

1. Afișați o pagină de plată pentru plătitor, după cum este necesar pentru integrarea Hosted Payment Session cu JavaScript. Pagina de plată trebuie să includă o metodă de identificare a Visa Checkout ca opțiunea de validare selectată de către plătitor.

   Mai jos este prezentat un exemplu de cod care vă arată cum să afișați Visa Checkout ca opțiune în cadrul paginii dvs. de plată.

   <script id="hpfScript" src="https://egenius.unicredit.ro/form/v3/hpf.js"></script>
   <!-- REPLACE THE action URL with the payment URL on your webserver -->
   <form name="myform" method="POST" action="https://my.company.com/pay">
   	<!-- 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 callback function as they are returned when creating the session -->
   	<input type="hidden" name="sessionId" id="sessionId">
   	<img alt="Visa Checkout" role="button" src="https://sandbox.www.v.me/wallet-services-web/xo/button.png" onclick="showVisaCheckoutLightbox()"/>
   </form>

2. Când plătitorul selectează Visa Checkout, pagina de plată lansează lightboxul Visa Checkout cu opțiunile necesare. Când interacțiunea cu sistemul lightbox este finalizată, hpf.js utilizează automat callId returnat de sistemul lightbox pentru a colecta detaliile de plată de la Visa Checkout. Rezultatul interacțiunii este returnat în funcția callback — dacă interacțiunea a avut succes, detaliile de plată sunt transferate în sesiunea de plată.

   Mai jos este prezentat un exemplu de cod care vă arată cum să invocați metoda HostedForm.showVisaCheckout( ) pentru a lansa lightboxul Visa Checkout cu opțiunile necesare și să transferați detaliile interacțiunii de la Visa Checkout în sesiunea de plată.

   
   <script>
     var options = {
   	acceptedCards: [
   		"MASTERCARD",
   		"AMEX",
   		"DISCOVER",
   		"VISA"
   	],
   	order: {
   		currency: "AUD",
   		amount: 10.50
   	},
   	merchant: {
   		logo: "https://test.te",
   		displayName:  "your merchant"
   	},
   	country: "AUS",
   	locale: "en_AU",
   	paymentConfirmation: "CONFIRM_AT_PROVIDER"
   	paymentConfirmationMessage: "Continue to the merchant to complete your purchase"
   };
    function showVisaCheckoutLightbox() {
   	if (typeof HostedForm === 'undefined') {
   		throw 'hpf.js is not loaded';
   	}HostedForm.setMerchant("MERCHANT_ID"); //Replace with your merchant id
     HostedForm.showVisaCheckout(options,
   	callback);
   }</script>

3. Funcția callback JavaScript administrează răspunsul de interacțiune de la Visa Checkout prin intermediul unui obiect care descrie rezultatul apelului HostedForm.showVisaCheckout( ). Trebuie să definiți această funcție callback în cadrul paginii dvs. de plată.

   Dacă response.status="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 o operațiune cu referința sesiunii.

   Mai jos este prezentat un exemplu de cod care vă arată cum să definiți funcția callback în pagina 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;
         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 === "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 if (response.status === "cancelled") {
   		// handler code for the case when the user closes the Visa Checkout lightbox without selecting a credit card
   	}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
   	}
   };

Observați că puteți utiliza aceeași funcție callback atât pentru plățile cu cardul cât și pentru plățile Visa Checkout.
4. În acest moment, puteți utiliza identificatorul sesiunii de plată pentru a realiza orice operațiune în care sesiunea de plată poate furniza detaliile de plată, de exemplu solicitări Authorize, Pay, Tokenize. Rețineți că detaliile cardului pot fi furnizate utilizând multiple surse de detalii card.
Este recomandat să colectați detaliile de sesiune utilizând operațiunea Retrieve Session și să verificați conținutul sesiunii înainte de a iniția o operațiune de plată sau stocare.

Dacă actualizați sesiunea prin metoda HostedForm.updateSession( ), puteți efectua o tranzacție Pay în sesiune folosind NUMAI API v30. Dacă sunteți integrat(ă) cu API v29 sau o versiune anterioară, trebuie să actualizați integrarea la versiunea 30.

Formularul de plată poate returna diferite tipuri de erori. Consultați secțiunea Tratarea erorilor.

Pagina dvs. de plată poate să conțină câmpuri definite de comerciant pentru colectarea de informații suplimentare, de exemplu, codul talonului de reducere, identificatorul pentru programul de loialitate, adresa de livrare, metoda de livrare etc. Totuși, dacă transmiteți aceste informații în metoda HostedForm.updateSession( ), acestea vor fi ignorate.

Dacă apelați metoda HostedForm.createSession( ) de mai multe ori — de fiecare dată când apelați metoda HostedForm.createSession( ) este creată o sesiune nouă.