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>
<!-- ======================================================
Payment Web Components Container
====================================================== -->
<div id="tokenization-container"></div>
<!-- ======================================================
Action Buttons
====================================================== -->
<button id="process-tokenization-button">
Process Tokenization
</button>
<button id="process-echeck-button">
Process Echeck Tokenization
</button>
<!-- ======================================================
Jupico Tokenization Web Components Library
====================================================== -->
<script
src="https://sandbox-payments-hosted-pages.jupico.com/wc/tokenization-form.umd.js"
charset="utf-8">
</script>
<script>
/* ======================================================
STEP 1: Obtain Authorization from App Server
====================================================== */
document.addEventListener("DOMContentLoaded", function () {
fetch("http://your-appserver.com/obtain-authorization", { ... })
.then(response => response.json())
.then(response => {
/* ======================================================
STEP 2: Create & Configure Web Components
====================================================== */
/* Credit Card Tokenization Form */
const tokenizationForm = document.createElement("tokenization-form");
tokenizationForm.id = "form-id";
tokenizationForm.sessions = response.data.sessions;
tokenizationForm.submitSuccess =
handleSubmitSuccessEventTokenizationForm;
tokenizationForm.validationError =
handleValidationErrorEventTokenizationForm;
/* Echeck / Bank Account Tokenization Form */
const echeckForm = document.createElement("echeck-form");
echeckForm.id = "echeck-form-id";
echeckForm.sessions = response.data.sessions;
echeckForm.isRequired = true;
echeckForm.submitSuccess = handleBankAccountSuccessEvent;
echeckForm.validationError = handleBankAccountErrorEvent;
/* Apple Pay Component */
const applePayEl = document.createElement("apple-pay-jupico");
applePayEl.id = "apple-pay-btn";
applePayEl.sessions = response.data.sessions;
applePayEl.transactionComplete = handleApplePayAuthorization;
/* Google Pay Component */
const googlePayEl = document.createElement("google-pay-jupico");
googlePayEl.id = "google-pay-btn";
googlePayEl.sessions = response.data.sessions;
googlePayEl.transactionComplete = handleGooglePayAuthorization;
/* ======================================================
STEP 3: Append Components to Container
====================================================== */
const container =
document.getElementById("tokenization-container");
container.appendChild(tokenizationForm);
container.appendChild(echeckForm);
container.appendChild(applePayEl);
container.appendChild(googlePayEl);
})
.catch(error =>
console.error("Authorization Error:", error)
);
/* ======================================================
CREDIT CARD TOKENIZATION CALLBACKS
====================================================== */
function handleSubmitSuccessEventTokenizationForm(event) {
console.log("Credit Card Tokenization Success", event);
}
function handleValidationErrorEventTokenizationForm(event) {
console.log("Credit Card Validation Error", event);
}
/* Trigger credit card tokenization */
const processCreditCardTokenization = async () => {
const creditCardFormElement =
document.getElementById("form-id");
if (creditCardFormElement?._instance?.exposed) {
creditCardFormElement._instance.exposed.validateForm();
}
};
document
.getElementById("process-tokenization-button")
.addEventListener("click", processCreditCardTokenization);
/* ======================================================
ECHECK / BANK ACCOUNT CALLBACKS
====================================================== */
function handleBankAccountSuccessEvent(event) {
console.log("Echeck Tokenization Success", event);
}
function handleBankAccountErrorEvent(event) {
console.log("Echeck Validation Error", event);
}
/* Trigger echeck tokenization */
const processBankAccountTokenization = async () => {
const echeckFormElement =
document.getElementById("echeck-form-id");
if (echeckFormElement?._instance?.exposed) {
echeckFormElement._instance.exposed.validateForm();
}
};
document
.getElementById("process-echeck-button")
.addEventListener("click", processBankAccountTokenization);
/* ======================================================
WALLET CALLBACKS
====================================================== */
/* Apple Pay */
function handleApplePayAuthorization(event) {
console.log("Apple Pay Authorization Event", event);
}
/* Google Pay */
function handleGooglePayAuthorization(event) {
console.log("Google Pay Authorization Event", event);
}
});
</script>
</body>
</html>
Updated about 1 month ago