Saltar al contenido principal

Pagar con token

En esta casuística, en lugar de proporcionar los detalles completos de la tarjeta en cada transacción, los usuarios utilizan un token previamente registrado para realizar el pago. El token representa la tarjeta registrada y se utiliza como identificador para cargar los datos de la tarjeta almacenados de forma segura en la pasarela de pago. Esto mejora la seguridad y agiliza el proceso de pago para usuarios recurrentes.

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: 'pay_token',
   token: {
    cardToken: 'TU_CARD_TOKEN'
   },
   ...
 }
};

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": "001612",
        "currency": "PEN",
        "amount": "1.11",
        "installment": "00",
        "deferred": "0",
        "orderNumber": "ONTEST170534851",
        "stateMessage": "Autorizado",
        "dateTransaction": "20240115",
        "timeTransaction": "145747",
        "uniqueId": "0115195747812450",
        "referenceNumber": "5178217"
      }
    ],
    "card": {
      "brand": "VS",
      "pan": "489068******2569",
      "save": "false"
    },
    "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": "4000498",
      "facilitatorCode": ""
    },
    "token": {
      "merchantBuyerId": "mc1991",
      "cardToken": "",
      "alias": ""
    },
    "authentication": {
      "result": ""
    },
    "customFields": [
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      ""
    ]
  },
  "payloadHttp": "{\"code\":\"00\",\"message\":\"OK\",\"messageUser\":\"Operación exitosa\",\"messageUserEng\":\"Successful\",\"transactionId\":\"170534851179400\",\"response\":{\"payMethod\":\"CARD\",\"order\":[{\"payMethodAuthorization\":\"CARD\",\"codeAuth\":\"001612\",\"currency\":\"PEN\",\"amount\":\"1.11\",\"installment\":\"00\",\"deferred\":\"0\",\"orderNumber\":\"ONTEST170534851\",\"stateMessage\":\"Autorizado\",\"dateTransaction\":\"20240115\",\"timeTransaction\":\"145747\",\"uniqueId\":\"0115195747812450\",\"referenceNumber\":\"5178217\"}],\"card\":{\"brand\":\"VS\",\"pan\":\"489068******2569\",\"save\":\"false\"},\"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\":\"4000498\",\"facilitatorCode\":\"\"},\"token\":{\"merchantBuyerId\":\"mc1991\",\"cardToken\":\"\",\"alias\":\"\"},\"authentication\":{\"result\":\"\"},\"customFields\":[\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\"]}}",
  "signature": "0lLqWLon0j6f6T6fRgMHonuDpVayqjH8eay6fJ9hIPQ=",
  "transactionId": "170534851179400"
}

Demo​

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

Editor en vivo
Resultado
Loading...
Nota

En caso de que no se realice la transacción en la demo interactiva puede intentar generar un nuevo registro de tarjeta, y con el cardToken que se obtiene realizar la transacción nuevamente.