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
1npm i -S -E @mobbex/sdk
HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta
6 name="viewport"
7 content="width=device-width, initial-scale=1, shrink-to-fit=no"
8 />
9 <title>Mobbex SDK</title>
10 </head>
11 <body>
12 <noscript> You need to enable JavaScript to run this app. </noscript>
13 <div id="root">
14 <form id="source-form">
15 <input
16 data-mobbex="card_number"
17 type="text"
18 placeholder="Numero de Tarjeta"
19 />
20 <br />
21 <input
22 data-mobbex="cardholder_name"
23 type="text"
24 placeholder="Nombre en la Tarjeta"
25 />
26 <br />
27 <input
28 data-mobbex="expiration"
29 type="text"
30 placeholder="Vencimiento"
31 />
32 <br />
33 <input
34 data-mobbex="cardholder_identification"
35 type="text"
36 placeholder="DNI"
37 />
38 <br />
39
40 <!-- The Security Code must always be PASSWORD Type -->
41 <input
42 data-mobbex="security_code"
43 type="password"
44 placeholder="Codigo de Seguridad"
45 />
46 <br />
47 </form>
48
49 <br />
50 <!-- The button must not be in the FORM!! -->
51 <button id="mobbex-pay" type="button">Pagar</button>
52 </div>
53 <script>
54 function attachForm() {
55 window.MobbexJS.form.attach(
56 "{{ intentToken }}",
57 {
58 formEl: "#source-form",
59 submitEl: "#mobbex-pay",
60 onSourceDetected: (data) => {
61 console.info(data);
62
63 window.MobbexJS.form.setInstallment(
64 data.installments[0].reference
65 );
66 },
67 onResult: (result) => {
68 console.info(result);
69 },
70 onError: (err) => {
71 console.error(err);
72 },
73 }
74 );
75 };
76 </script>
77
78 <script src="https://res.mobbex.com/js/sdk/[email protected]" integrity="sha384-7CIQ1hldcQc/91ZpdRclg9KVlvtXBldQmZJRD1plEIrieHNcYvlQa2s2Bj+dlLzQ" crossorigin="anonymous" onload="attachForm" async></script>
79 </body>
80</html>
HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta
6 name="viewport"
7 content="width=device-width, initial-scale=1, shrink-to-fit=no"
8 />
9 <title>Mobbex SDK</title>
10 </head>
11 <body>
12 <noscript> You need to enable JavaScript to run this app. </noscript>
13 <div id="root">
14 <form id="source-form">
15 <input
16 data-mobbex="card_number"
17 type="text"
18 placeholder="Numero de Tarjeta"
19 />
20 <br />
21 <input
22 data-mobbex="cardholder_name"
23 type="text"
24 placeholder="Nombre en la Tarjeta"
25 />
26 <br />
27 <input
28 data-mobbex="expiration"
29 type="text"
30 placeholder="Vencimiento"
31 />
32 <br />
33 <input
34 data-mobbex="cardholder_identification"
35 type="text"
36 placeholder="DNI"
37 />
38 <br />
39
40 <!-- The Security Code must always be PASSWORD Type -->
41 <input
42 data-mobbex="security_code"
43 type="password"
44 placeholder="Codigo de Seguridad"
45 />
46 <br />
47 </form>
48
49 <br />
50 <!-- The button must not be in the FORM!! -->
51 <button id="mobbex-pay" type="button">Pagar</button>
52 </div>
53 <script>
54 function attachForm() {
55 window.MobbexJS.form.attach(
56 "{{ intentToken }}",
57 {
58 formEl: "#source-form",
59 submitEl: "#mobbex-pay",
60 onSourceDetected: (data) => {
61 console.info(data);
62
63 window.MobbexJS.form.setInstallment(
64 data.installments[0].reference
65 );
66 },
67 onResult: (result) => {
68 console.info(result);
69 },
70 onError: (err) => {
71 console.error(err);
72 },
73 }
74 );
75 };
76 </script>
77
78 <script src="https://res.mobbex.com/js/sdk/[email protected]" integrity="sha384-7CIQ1hldcQc/91ZpdRclg9KVlvtXBldQmZJRD1plEIrieHNcYvlQa2s2Bj+dlLzQ" crossorigin="anonymous" onload="attachForm" async></script>
79 </body>
80</html>
Updated 26 Jul 2023
Did this page help you?