Tokenización de Medio de Pago
Desde Frontend
4min
Si desea embeber o compartir nuestro SDK de tokenización puede solicitar una versión con sus propias URLs y marca. Esto evita la necesidad de PCI y mantiene la información de sus clientes en un entorno seguro, auditado y PCI Compliance.
Importante
Tenga en cuenta que integrity ( SRI ) es obligatorio, de lo contrario sus credenciales pueden ser canceladas.
Utilizando Script
SDK Actual: https://res.mobbex.com/js/sdk/[email protected]
Utilizando NPM: Web y React Native
Shell
npm i -S -E @mobbex/sdk
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Mobbex SDK</title>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root">
<form id="source-form">
<input
data-mobbex="card_number"
type="text"
placeholder="Numero de Tarjeta"
/>
<br />
<input
data-mobbex="cardholder_name"
type="text"
placeholder="Nombre en la Tarjeta"
/>
<br />
<input
data-mobbex="expiration"
type="text"
placeholder="Vencimiento"
/>
<br />
<input
data-mobbex="cardholder_identification"
type="text"
placeholder="DNI"
/>
<br />
<!-- The Security Code must always be PASSWORD Type -->
<input
data-mobbex="security_code"
type="password"
placeholder="Codigo de Seguridad"
/>
<br />
</form>
<br />
<!-- The button must not be in the FORM!! -->
<button id="mobbex-pay" type="button">Pagar</button>
</div>
<script>
function attachForm() {
window.MobbexJS.form.attach(
"{{ intentToken }}",
{
formEl: "#source-form",
submitEl: "#mobbex-pay",
onSourceDetected: (data) => {
console.info(data);
window.MobbexJS.form.setInstallment(
data.installments[0].reference
);
},
onResult: (result) => {
console.info(result);
},
onError: (err) => {
console.error(err);
},
}
);
};
</script>
<script src="https://res.mobbex.com/js/sdk/[email protected]" integrity="sha384-7CIQ1hldcQc/91ZpdRclg9KVlvtXBldQmZJRD1plEIrieHNcYvlQa2s2Bj+dlLzQ" crossorigin="anonymous" onload="attachForm" async></script>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Mobbex SDK</title>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root">
<form id="source-form">
<input
data-mobbex="card_number"
type="text"
placeholder="Numero de Tarjeta"
/>
<br />
<input
data-mobbex="cardholder_name"
type="text"
placeholder="Nombre en la Tarjeta"
/>
<br />
<input
data-mobbex="expiration"
type="text"
placeholder="Vencimiento"
/>
<br />
<input
data-mobbex="cardholder_identification"
type="text"
placeholder="DNI"
/>
<br />
<!-- The Security Code must always be PASSWORD Type -->
<input
data-mobbex="security_code"
type="password"
placeholder="Codigo de Seguridad"
/>
<br />
</form>
<br />
<!-- The button must not be in the FORM!! -->
<button id="mobbex-pay" type="button">Pagar</button>
</div>
<script>
function attachForm() {
window.MobbexJS.form.attach(
"{{ intentToken }}",
{
formEl: "#source-form",
submitEl: "#mobbex-pay",
onSourceDetected: (data) => {
console.info(data);
window.MobbexJS.form.setInstallment(
data.installments[0].reference
);
},
onResult: (result) => {
console.info(result);
},
onError: (err) => {
console.error(err);
},
}
);
};
</script>
<script src="https://res.mobbex.com/js/sdk/[email protected]" integrity="sha384-7CIQ1hldcQc/91ZpdRclg9KVlvtXBldQmZJRD1plEIrieHNcYvlQa2s2Bj+dlLzQ" crossorigin="anonymous" onload="attachForm" async></script>
</body>
</html>
Updated 26 Jul 2023
Did this page help you?