Create Enrollment Checkout Form

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

NombreTipoDescripciónRequerido
panDivIdstringIdentificador del div asociado al pan en el form. No
cvvDivIdstringIdentificador del div asociado al cvv en el form.🔘 Si
environmentstringAmbiente de trabajo. Debe ser PROD.🔘 Si
onSuccessfunctionFunción gatillada al éxito🔘 Si
onErrorfunctionFunción gatillada al error🔘 Si
onPanFocusfunctionFunción gatillada al enfocar el input del pan.No
onPanBlurfunctionFunción gatillada al desenfocar el input del pan.No
onCvvFocusfunctionFunción gatillada al enfocar el input del cvv.No
onCvvBlurfunctionFunción gatillada al desenfocar el input del cvv.No
onPanChangefunctionFunció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
onCvvChangefunctionFunció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
onCardValidationLoadingfunctionFunción gatillada cuando se va a buscar el país y tipo de la tarjeta.No
onCardValidationCompletedfunctionFunció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
panStyledictEstilo del input del pan🔘 Si
cvvStyledictEstilo del input del cvv🔘 Si
panStylesheetstringEstilos para insertar de un tag <style> en el iframe del panNo
cvvStylesheetstringEstilos para insertar de un tag <style> en el iframe del cvvNo
optionsdictmaskPan: true para ofuscar el pan cuando se desenfoca el input.No
organizationIdstringid organization encriptado.🔘 Si
accountIdstringid account encriptado.🔘 Si
tokuProductstringToku product que se usará para procesar la operación. Para este caso (inscripción) solo soporta cards_batch_mx_recurring_pst.🔘 Si

TokuCheckoutForm.processOperation

NombreTipoDescripciónRequerido
TokuOperationTypestringTipo de operación a realizar🔘 Si
bodyjsonCuerpo para la request🔘 Si

TokuCheckoutForm.processOperation - body

NombreTipoDescripciónRequerido
organizationIdstringid organization encriptado🔘 Si
accountIdstringid account encriptado🔘 Si
customerIdstringid customer encriptado🔘 Si
tokuProductslist[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
expirationDatestringFecha expiración de tarjeta ingresada🔘 Si
customerNamestringNombre del portador de tarjeta ingresada🔘 Si
subscriptionIdstringid 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.

<!DOCTYPE html> <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>
EnglishPortuguês (Brasil)
Powered by Localize
Español (América Latina)