Full integration example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Component Integration</title>
</head>
<body>
<div id="tokenization-container"></div>
<button id="process-tokenization-button">Process Tokenization</button>
<button id="process-echeck-button">Process Echeck Tokenization</button>
<script src="https://sandbox-payments-hosted-pages.jupico.com/wc/tokenization-form.umd.js" charset="utf-8"></script>
<script>
//YOUR APP SERVER OBTAIN AUTHORIZATION
//THIS IS THE AUTHORIZATION YOU REQUESTED ON STEP 1 OF GENERAL FLOW
document.addEventListener("DOMContentLoaded", function () {
fetch("http://your-appserver.com/obtain-authorization", {...})
.then(response => response.json())
.then(response => {
//2. Render Web Component in payment page
//Inject web component credit card tokenization Form
const tokenizationForm = document.createElement("tokenization-form");
tokenizationForm.sessions = response.data.sessions;
tokenizationForm.submitSuccess = handleSubmitSuccessEventTokenizationForm
tokenizationForm.validationError = handleValidationErrorEventTokenizationForm
tokenizationForm.id = "form-id";
//Inject web component credit card bank account Form
const echeckForm = document.createElement("echeck-form");
echeckForm.sessions = response.data.sessions;
echeckForm.isRequired = true;
echeckForm.submitSuccess = handleBankAccountSuccessEvent;
echeckForm.validationError = handleBankAccountErrorEvent;
echeckForm.id = "echeck-form-id";
//Inject web component Apple Pay
const applePayEl = document.createElement("apple-pay-jupico");
applePayEl.id = "apple-pay-btn";
applePayEl.sessions = response.data.sessions;
applePayEl.transactionComplete = handleApplePayAuthorization;
//Inject web component Google Pay
const googlePayEl = document.createElement("google-pay-jupico");
googlePayEl.id = "google-pay-btn";
googlePayEl.sessions = response.data.sessions;
googlePayEl.transactionComplete = handleGooglePayAuthorization;
//Adding all web component generated to a single container
document.getElementById("tokenization-container").appendChild(tokenizationForm);
document.getElementById("tokenization-container").appendChild(echeckForm);
document.getElementById("tokenization-container").appendChild(applePayEl);
document.getElementById("tokenization-container").appendChild(googlePayEl);
})
.catch(error => console.error("Error:", error));
//Declare all callback for Echeck Form Web component
function handleSubmitSuccessEventTokenizationForm(event) {
console.log("handleSubmitSuccessEvent", event);
}
function handleValidationErrorEventTokenizationForm(event) {
console.log("handleValidationErrorEvent", event);
}
//Triger tokenization process
const processTokenization = async () => {
var creditCardFormElement = document.getElementById("form-id");
if (creditCardFormElement?._instance?.exposed) {
creditCardFormElement._instance.exposed.validateForm();
}
};
//Declare all callback for echeck Form Web component
function handleBankAccountSuccessEvent(event) {
console.log("handleBankAccountSuccessEvent", event);
}
function handleBankAccountErrorEvent(event) {
console.log("handleBankAccountErrorEvent", event);
}
//Triger tokenization process
const processBankAccountTokenization = async () => {
var echeckFormElement = document.getElementById("echeck-form-id");
if (echeckFormElement?._instance?.exposed) {
echeckFormElement._instance.exposed.validateForm();
}
};
document.getElementById("process-echeck-button")
.addEventListener("click", processBankAccountTokenization);
});
</script>
</body>
</html>Updated 1 day ago