Saltar al contenido principal

Registro Tarjeta

En esta casuística, se ofrece a los usuarios la opción de registrar su tarjeta de crédito o débito en la pasarela de pago para futuras transacciones. Esto implica tokenizar los datos de la tarjeta, es decir, convertirlos en un identificador único llamado token. De esta manera, los usuarios pueden realizar pagos posteriores sin tener que proporcionar nuevamente los detalles completos de la tarjeta.

Objetivo​

Aprenderás a:

  • Crear el objeto de configuración
  • Inicializar el formulario de pago.
  • Mostrar el Checkout.
  • Ejemplo de respuesta.

1. Creando el objeto de configuración​

const iziConfig = {
 config: {
   ...,
   action: 'register',
   ...
 }
};

2. Instanciando la clase​

const checkout = new Izipay({config: iziConfig});

3. Mostrando el checkout​

const callbackResponsePayment = (response) => console.log(response);

try {
  checkout &&
    checkout.LoadForm({
      authorization: 'TU_TOKEN_SESSION',
      keyRSA: 'TU_KEY_RSA',
      callbackResponse: callbackResponsePayment
    });
} catch (error) {
  console.log(error.message, error.Errors, error.date);
}

4. Respuesta​

  • Este es un ejemplo de respuesta que se enviará al comercio después de completar el flujo
{
  "code": "00",
  "message": "OK",
  "messageUser": "Operación exitosa",
  "messageUserEng": "Successful",
  "response": {
    "payMethod": "CARD",
    "order": [
      {
        "payMethodAuthorization": "CARD",
        "codeAuth": "",
        "currency": "PEN",
        "amount": "1.00",
        "installment": "",
        "deferred": "",
        "orderNumber": "1719866030",
        "stateMessage": "Autorizado",
        "dateTransaction": "20240701",
        "timeTransaction": "153351",
        "uniqueId": "",
        "referenceNumber": ""
      }
    ],
    "card": {
      "brand": "VS",
      "pan": "476134******0019",
      "save": "true"
    },
    "billing": {
      "firstName": "Juan",
      "lastName": "Wick quispe",
      "email": "jwick@izi.com",
      "phoneNumber": "989339999",
      "street": "calle el demo",
      "city": "lima",
      "state": "lima",
      "country": "PE",
      "postalCode": "00001",
      "documentType": "DNI",
      "document": "10252022",
      "companyName": ""
    },
    "merchant": {
      "merchantCode": "4001061",
      "facilitatorCode": ""
    },
    "token": {
      "merchantBuyerId": "MC2407011533571D8KA6",
      "cardToken": "f2fb3565d76df7c0c850c01b94d147a9cd986f1496527411102ea63155a384d9",
      "alias": ""
    },
    "authentication": {
      "result": ""
    },
    "customFields": [
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      ""
    ]
  },
  "payloadHttp": "{\"code\":\"00\",\"message\":\"OK\",\"messageUser\":\"Operación exitosa\",\"messageUserEng\":\"Successful\",\"transactionId\":\"171986603174100\",\"response\":{\"payMethod\":\"CARD\",\"order\":[{\"payMethodAuthorization\":\"CARD\",\"codeAuth\":\"\",\"currency\":\"PEN\",\"amount\":\"1.00\",\"installment\":\"\",\"deferred\":\"\",\"orderNumber\":\"1719866030\",\"stateMessage\":\"Autorizado\",\"dateTransaction\":\"20240701\",\"timeTransaction\":\"153351\",\"uniqueId\":\"\",\"referenceNumber\":\"\"}],\"card\":{\"brand\":\"VS\",\"pan\":\"476134******0019\",\"save\":\"true\"},\"billing\":{\"firstName\":\"Juan\",\"lastName\":\"Wick quispe\",\"email\":\"jwick@izi.com\",\"phoneNumber\":\"989339999\",\"street\":\"calle el demo\",\"city\":\"lima\",\"state\":\"lima\",\"country\":\"PE\",\"postalCode\":\"00001\",\"documentType\":\"DNI\",\"document\":\"10252022\",\"companyName\":\"\"},\"merchant\":{\"merchantCode\":\"4001061\",\"facilitatorCode\":\"\"},\"token\":{\"merchantBuyerId\":\"MC2407011533571D8KA6\",\"cardToken\":\"f2fb3565d76df7c0c850c01b94d147a9cd986f1496527411102ea63155a384d9\",\"alias\":\"\"},\"authentication\":{\"result\":\"\"},\"customFields\":[\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\"]}}",
  "signature": "PgIinGqUyI/XKLcB49v22gFe8Pt9djk6EG/QETMYChg=",
  "transactionId": "171986603174100"
}

Demo​

A continuación, te invitamos a explorar nuestra demo interactiva.

Editor en vivo
Resultado
Loading...