Implementarea Hosted Payment Page
Aveți două opțiuni pentru implementarea Hosted Payment Page:
- Pagina încorporată este o componentă activată pe pagina de validare existentă a site-ului dvs. web.
- Pagina de plată este o pagină separată către care plătitorul este redirecționat de pe pagina de validare existentă.
Odată ce o sesiune de validare a fost stabilită, procesul de implementare a Hosted Payment Page pentru Hosted Checkout constă în următorii pași:
- Creați un obiect Validare.
- Configurați obiectul de checkout.
- Utilizați metoda corespunzătoare a obiectului Validare pentru a începe procesul de plată.
În plus, puteți defini callback-uri declanșate atunci când plătitorul întreprinde anumite acțiuni în timpul procesului de plată.
Implementarea Hosted Payment Page se face în aplicația sau site-ul dvs., utilizând biblioteca Checkout JavaScript (JS).
Pasul 1: Creați obiectul de validare
După ce sesiunea a fost inițializată, trebuie să faceți referire la fișierul checkout.min.js de pe serverul gateway de pe pagina dvs. de validare. Aceasta plasează un obiect Validare în domeniul global.
<script src="https://egenius.unicredit.ro/static/checkout/checkout.min.js" data-error="errorCallback" data-cancel="cancelCallback"></script>
Pasul 2: Configurați obiectul de validare
Apelați funcția Checkout.configure() și transmiteți-i un obiect JSON care include session.id returnat de la operațiunea Inițiază checkout mai devreme.
Checkout.configure({
session: {
id: '<your_initiate_checkout_ID>'
}
});
- Din versiunea API v67 sau mai recentă, obiectul de sesiune este singurul câmp permis prin configure(); toate celelalte câmpuri trebuie incluse prin INITIATE CHECKOUT.
- Datele transmise în Checkout.configure() nu suprascriu niciodată datele pe care le-ați furnizat deja în operațiunea INITIATE CHECKOUT.
Pasul 3: Inițiați procesul de plată
Începeți procesul de plată apelând una dintre următoarele metode ale obiectului Validare, în funcție de tipul de Hosted Payment Page pe care îl implementați.
- Pentru a afișa interacțiunea de validare în cadrul unei pagini încorporate:
Exemplu
Checkout.showEmbeddedPage('#embed-target') - Pentru a afișa interacțiunea de validare pe o pagină de plată:
Exemplu
Checkout.showPaymentPage()
Exemplu de cod HTML pentru a solicita pagina încorporată sau de plată
<html>
<head>
<script src="https://egenius.unicredit.ro/static/checkout/checkout.min.js" data-error="errorCallback" data-cancel="cancelCallback"></script>
<script type="text/javascript">
function errorCallback(error) {
console.log(JSON.stringify(error));
}
function cancelCallback() {
console.log('Payment cancelled');
}
Checkout.configure({
session: {
id: '<your_initiate_checkout_session_ID>'
}
});
</script>
</head>
<body>
...
<div id="embed-target"> </div>
<input type="button" value="Pay with Embedded Page" onclick="Checkout.showEmbeddedPage('#embed-target');" />
<input type="button" value="Pay with Payment Page" onclick="Checkout.showPaymentPage();" />
...
</body>
</html>
Exemplu de cod HTML pentru a utiliza modul modal
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">—</span>
</button>
</div>
<div class="modal-body" id="hco-embedded">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://egenius.unicredit.ro/static/checkout/checkout.min.js" ></script>
<script>
// Configure Checkout first
Checkout.configure({
session: {
id: "<your_initiate_checkout_ID>"
}
})
// after the modal is shown, then call Checkout.showEmbeddedPage('#hco-embedded')
$('#exampleModal').on('shown.bs.modal', function (e) {
Checkout.showEmbeddedPage('#hco-embedded',
() => { $('#exampleModal').modal() } // tell Checkout how to launch the modal
)
});
$('#exampleModal').on('hide.bs.modal', function (e) {
sessionStorage.clear(); // tell Checkout to clear sessionStorage when I close the modal
});
</script>
</body>
</html>
Pasul 4: Implementarea callback-urilor
Funcțiile callback sunt furnizate pentru a procesa evenimente care pot apărea în timpul interacțiunii de plată. Utilizarea apelurilor inverse este opțională, dar dacă aveți nevoie de ele, trebuie să le definiți în corpul aceleiași etichete <script> care face referire la checkout.min.js.
Toate funcțiile callback definite trebuie să aibă o implementare. Ele sunt invocate atunci când evenimentul relevant este declanșat. Următorul exemplu de cod arată un callback (declanșat dacă plătitorul anulează plata) definit și implementat pe o pagină.
<script src="https://egenius.unicredit.ro/static/checkout/checkout.min.js"
data-cancel="cancelCallback"
data-beforeRedirect="Checkout.saveFormFields"
data-afterRedirect="Checkout.restoreFormFields">
</script>
<script>
function cancelCallback() {
confirm('Are you sure you want to cancel?');
// code to manage payer interaction
}
// or if you want to provide a URL:
// cancelCallback = "someURL"
</script>
Există două tipuri de metode de callback: callback-uri de bază și callback-uri de redirecționare.
Callback-uri de bază
Funcțiile callback de bază sunt furnizate pentru următoarele evenimente:
- cancel: Când plătitorul revocă interacțiunea de plată.
Callback-ul cancel poate fi utilizat numai cu o pagină de plată și nu funcționează cu o pagină încorporată.
- error: Când este întâlnită o eroare.
- complete: Când plătitorul finalizează interacțiunea de plată.
- timeout: Dacă plata nu este finalizată în durata disponibilă pentru efectuarea plății de către plătitor.
Callback-uri de redirecționare
Deoarece Hosted Checkout acceptă interacțiuni de plată care necesită redirecționarea plătitorului către alte site-uri web pentru a continua plata (de ex. PayPal), sunt furnizate funcții callback pentru a administra procesul care are loc înainte de redirecționare și după revenirea la Hosted Checkout pentru finalizarea procesării tranzacției:
- beforeRedirect: Înainte de afișarea pentru plătitor a interfeței de plată. Returnează datele necesare pentru a restabili starea interfeței de plată pentru a fi utilizate de afterRedirect.
- afterRedirect: Când plătitorul revine după finalizarea interacțiunii de plată. Utilizează datele salvate de beforeRedirect pentru a returna starea salvată a interfeței de plată.
Obiectul de validare oferă, de asemenea, două funcții pentru a vă ajuta să implementați apelurile beforeRedirect și afterRedirect:
- saveFormFields(): Salvează toate câmpurile de formular curente pentru a fi utilizate de către restoreFormFields(). Utilizați în implementarea beforeRedirect sau implementați beforeRedirect ca Checkout.saveFormFields().
- restoreFormFields(): Restaurează câmpurile de formular salvate de saveFormFields(). Utilizați în implementarea afterRedirect sau implementați afterRedirect ca Checkout.restoreFormFields().
Întrebări frecvente
Ce trebuie să fac dacă Hosted Checkout returnează o eroare?
Hosted Checkout poate returna un număr de erori de integrare. Consultați Pașii de testare pentru mai multe informații despre testare și erori.
De ce primesc o pagină de eroare în loc de Hosted Payment Page?
Se afișează o pagină de eroare când se încearcă o solicitare Hosted Checkout incorectă. Cauzele frecvente ale erorilor includ:
- Lipsesc câmpuri obligatorii.
- Adresele URL furnizate în solicitare nu sunt absolute.
Ce se întâmplă dacă plătitorul face dublu clic pe butonul Plăți?
Dacă plătitorul face dublu clic pe butonul Plată, adică trimite de două ori plata, atunci tranzacția nu se repetă la banca dvs. sau a plătitorului.