HTML
La inscripción de una tarjeta mediante Checkout Form es un proceso sencillo que solo requiere incluir un script en un formulario HTML de estructura básica sin las necesidad de realizar requests directamente a Toku. A continuación, se muestra un ejemplo básico de formulario:
<form id="creditCardForm">
<div id="cardNumberContainer">
<label for="cardNumber">Card Number:</label>
<div id="pan" style="width: 17em; height: 3em;"></div>
</div>
<div id="expirationDateContainer">
<label for="expirationDate">Expiration Date (MM/YY):</label>
<input type="text" id="expirationDate" name="expirationDate" placeholder="MM/YY" required><br>
</div>
<label for="cvv">CVV:</label>
<div id="cvv" style="width: 4em; height: 2em;"></div>
<div id="cardholderNameContainer">
<label for="cardholderName">Cardholder's Name:</label>
<input type="text" id="cardholderName" name="cardholderName" required><br>
</div>
<button id="submitButton" type="button">Submit</button>
</form>
Es importante destacar que los IDs de los elementos
asociados al pan y cvv deben coincidir con los inputs del objeto TokuCheckoutForm consumido en el siguiente script para su correcto funcionamiento.
Script
<!-- Import the JavaScript file -->
<script src="https://storage.googleapis.com/toku-embedded-portal/checkout-form.min.js"></script>
<script>
let tokuCheckoutForm = null;
document.addEventListener('DOMContentLoaded', function () {
tokuCheckoutForm = new TokuCheckoutForm({
panDivId: 'pan',
cvvDivId: 'cvv',
environment: params.get('environment') || 'PROD',
onSuccess: () => {
console.log('Success');
hideLoadingIndicator();
},
onError: () => {
console.log('Error');
hideLoadingIndicator();
},
onPanFocus: tokuCheckoutForm => {
console.log('panFocus');
},
onPanBlur: tokuCheckoutForm => {
console.log('panBlur');
},
onCvvFocus: tokuCheckoutForm => {
console.log('CvvFocus');
tokuCheckoutForm.setCvvStylesheet('input { color: green }');
},
onCvvBlur: tokuCheckoutForm => {
console.log('CvvBlur');
tokuCheckoutForm.setCvvStylesheet('input { color: red }');
},
onPanChange: data => {
console.log('onPanChange' + JSON.stringify(data));
},
onCvvChange: data => {
console.log('onCvvChange' + JSON.stringify(data));
},
onCardValidationLoading: () => {
console.log('onCardValidationLoading');
},
onCardValidationCompleted: data => {
console.log('onCardValidationCompleted' + JSON.stringify(data));
},
panStyle: {
width: '15em',
height: '1em',
'border-radius': '0.5rem',
border: '2px solid',
padding: '0.5rem',
outline: 'none',
},
cvvStyle: { width: '3em', height: '1em', 'box-shadow': '0 0 5px rgba(0, 0, 0, 0.2)' },
options: {
maskPan: true,
panPlaceholder: 'Card Number',
cvvPlaceholder: 'CVV',
},
panStylesheet: 'input { color: blue; } input:focus { color: green }',
cvvStylesheet: '',
organizationId: <org_id_encrypted>,
accountId: <acc_id_encrypted>,
tokuProduct: <toku_product>,
});
});
document.getElementById("submitButton").addEventListener('click', function () {
const formData = {
expirationDate: document.getElementById('expirationDate')?.value,
cardholderName: document.getElementById('cardholderName')?.value,
};
tokuCheckoutForm.processOperation("INSCRIPTION", {
organizationId: <org_id_encrypted>,
accountId: <acc_id_encrypted>,
customerId: <cus_id_encrypted>,
tokuProducts: [<toku_product>],
expirationDate: formData.expirationDate,
customerName: formData.cardholderName,
subscriptionId: <subscription_id_encrypted>
});
});
document.getElementById('expirationDate').addEventListener('input', function (e) {
let input = e.target.value.replace(/\D/g, '').substring(0, 4); // Allow only digits and limit to 4 chars
if (input.length >= 2) {
input = input.slice(0, 2) + '/' + input.slice(2); // Add slash after the second digit
}
e.target.value = input;
});
</script>
TokuCheckoutForm
Nombre | Tipo | Descripción | Requerido |
---|---|---|---|
panDivId | string | Identificador del div asociado al pan en el form. | No |
cvvDivId | string | Identificador del div asociado al cvv en el form. | 🔘 Si |
environment | string | Ambiente de trabajo. Debe ser PROD . | 🔘 Si |
onSuccess | function | Función gatillada al éxito | 🔘 Si |
onError | function | Función gatillada al error | 🔘 Si |
onPanFocus | function | Función gatillada al enfocar el input del pan. | No |
onPanBlur | function | Función gatillada al desenfocar el input del pan. | No |
onCvvFocus | function | Función gatillada al enfocar el input del cvv. | No |
onCvvBlur | function | Función gatillada al desenfocar el input del cvv. | No |
onPanChange | function | Función gatillada cada vez que el usuario cambia el número de tarjeta. Recibe como primer argumento data un objeto con los siguientes atributos:- length : El largo del número de tarjeta ingresado hasta ahora.- cardInstitution : visa , mastercard o americanexpress - luhnCheck : true si el número ingresado hasta ahora pasa el algoritmo de Luhn. | No |
onCvvChange | function | Función gatillada cada vez que el usuario cambia el cvv. Recibe como primer argumento data un objeto con los siguientes atributos:- length : El largo del número de tarjeta ingresado hasta ahora. | No |
onCardValidationLoading | function | Función gatillada cuando se va a buscar el país y tipo de la tarjeta. | No |
onCardValidationCompleted | function | Función gatillada cuando se obtiene el país y tipo de la tarjeta. Recibe como primer argumento data un objeto con los siguientes atributos:- success : true si la validación fue exitosa.- country : El país de emisión de la tarjeta.- type : credit o debit . | No |
panStyle | dict | Estilo del input del pan | 🔘 Si |
cvvStyle | dict | Estilo del input del cvv | 🔘 Si |
panStylesheet | string | Estilos para insertar de un tag <style> en el iframe del pan | No |
cvvStylesheet | string | Estilos para insertar de un tag <style> en el iframe del cvv | No |
options | dict | maskPan : true para ofuscar el pan cuando se desenfoca el input . | No |
organizationId | string | id organization encriptado. | 🔘 Si |
accountId | string | id account encriptado. | 🔘 Si |
tokuProduct | string | Toku product que se usará para procesar la operación. Para este caso (inscripción) solo soporta cards_batch_mx_recurring_pst . | 🔘 Si |
TokuCheckoutForm.processOperation
Nombre | Tipo | Descripción | Requerido |
---|---|---|---|
TokuOperationType | string | Tipo de operación a realizar | 🔘 Si |
body | json | Cuerpo para la request | 🔘 Si |
TokuCheckoutForm.processOperation - body
Nombre | Tipo | Descripción | Requerido |
---|---|---|---|
organizationId | string | id organization encriptado | 🔘 Si |
accountId | string | id account encriptado | 🔘 Si |
customerId | string | id customer encriptado | 🔘 Si |
tokuProducts | list[string] | Lista de toku products que se usarán para procesar el pago. Los valores soportados son: - ["cards_batch_mx_recurring_pst"] - ["payment_orchestration"] | 🔘 Si |
expirationDate | string | Fecha expiración de tarjeta ingresada | 🔘 Si |
customerName | string | Nombre del portador de tarjeta ingresada | 🔘 Si |
subscriptionId | string | id subscripción encriptado | 🔘 Si |
TokuCheckoutForm.setPanStylesheet()
Recibe un string
con reglas css
y lo inserta dentro de un tag <style>
en el iframe
del pan
.
TokuCheckoutForm.setCvvStylesheet()
Recibe un string
con reglas css
y lo inserta dentro de un tag <style>
en el iframe
del cvv
.
Ejemplo integrado
El siguiente ejemplo muestra un ejemplo integral para incorporar un formulario de inscripción de tarjetas utilizando Checkout Form, junto con un indicador de carga simple para mejorar la experiencia del usuario.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Checkout Form Example</title>
<style>
/* Simple loading spinner styles */
#loadingIndicator {
display: none;
width: 40px;
height: 40px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: #000;
animation: spin 1s infinite linear;
margin: 10px auto;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h1>Checkout Form</h1>
<form id="creditCardForm">
<div id="cardNumberContainer">
<label for="cardNumber">Card Number:</label>
<div id="pan" style="width: 17em; height: 3em;"></div>
</div>
<div id="expirationDateContainer">
<label for="expirationDate">Expiration Date (MM/YY):</label>
<input type="text" id="expirationDate" name="expirationDate" placeholder="MM/YY" required><br>
</div>
<label for="cvv">CVV:</label>
<div id="cvv" style="width: 4em; height: 2em;"></div>
<div id="cardholderNameContainer">
<label for="cardholderName">Cardholder's Name:</label>
<input type="text" id="cardholderName" name="cardholderName" required><br>
</div>
<button id="submitButton" type="button">Submit</button>
</form>
<div id="loadingIndicator"></div>
<!-- Import the JavaScript file -->
<script src="https://storage.googleapis.com/toku-embedded-portal/checkout-form.min.js"></script>
<script>
// Get the current URL
const url = new URL(window.location.href);
// Get the search parameters
const params = new URLSearchParams(url.search);
let tokuCheckoutForm = null;
document.addEventListener('DOMContentLoaded', function () {
tokuCheckoutForm = new TokuCheckoutForm({
panDivId: 'pan',
cvvDivId: 'cvv',
environment: params.get('environment') || 'PROD',
onSuccess: () => {
console.log('Success');
hideLoadingIndicator();
},
onError: () => {
console.log('Error');
hideLoadingIndicator();
},
onPanFocus: tokuCheckoutForm => {
console.log('panFocus');
},
onPanBlur: tokuCheckoutForm => {
console.log('panBlur');
},
onCvvFocus: tokuCheckoutForm => {
console.log('CvvFocus');
tokuCheckoutForm.setCvvStylesheet('input { color: green }');
},
onCvvBlur: tokuCheckoutForm => {
console.log('CvvBlur');
tokuCheckoutForm.setCvvStylesheet('input { color: red }');
},
onPanChange: data => {
console.log('onPanChange' + JSON.stringify(data));
},
onCvvChange: data => {
console.log('onCvvChange' + JSON.stringify(data));
},
onCardValidationLoading: () => {
console.log('onCardValidationLoading');
},
onCardValidationCompleted: data => {
console.log('onCardValidationCompleted' + JSON.stringify(data));
},
panStyle: {
width: '15em',
height: '1em',
'border-radius': '0.5rem',
border: '2px solid',
padding: '0.5rem',
outline: 'none',
},
cvvStyle: { width: '3em', height: '1em', 'box-shadow': '0 0 5px rgba(0, 0, 0, 0.2)' },
options: {
maskPan: true,
panPlaceholder: 'Card Number',
cvvPlaceholder: 'CVV',
},
panStylesheet: 'input { color: blue; } input:focus { color: green }',
cvvStylesheet: '',
organizationId: params.get('organizationId'),
accountId: params.get('accountId'),
tokuProduct: params.get('tokuProduct'),
});
});
document.getElementById('submitButton').addEventListener('click', function (event) {
showLoadingIndicator();
const formData = {
expirationDate: document.getElementById('expirationDate').value,
cardholderName: document.getElementById('cardholderName').value,
};
tokuCheckoutForm.processOperation('INSCRIPTION', {
organizationId: params.get('organizationId'),
accountId: params.get('accountId'),
customerId: params.get('customerId'),
tokuProducts: [params.get('tokuProduct')],
expirationDate: formData.expirationDate,
customerName: formData.cardholderName,
subscriptionId: params.get('subscriptionId'),
});
});
function showLoadingIndicator() {
document.getElementById('loadingIndicator').style.display = 'block';
document.getElementById('submitButton').disabled = true;
}
function hideLoadingIndicator() {
document.getElementById('loadingIndicator').style.display = 'none';
document.getElementById('submitButton').disabled = false;
}
document.getElementById('expirationDate').addEventListener('input', function (e) {
let input = e.target.value.replace(/\D/g, '').substring(0, 4); // Allow only digits and limit to 4 chars
if (input.length >= 2) {
input = input.slice(0, 2) + '/' + input.slice(2); // Add slash after the second digit
}
e.target.value = input;
});
</script>
</body>
</html>