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

A continuación se muestra un ejemplo de configuración para el caso de uso de pago con token.

const iziConfig = {
  config: {
    transactionId: '{TRANSACTION_ID}',
    action: 'pay_token',
    merchantCode: '{MERCHANT_CODE}',
    order: {
      orderNumber: '{ORDER_NUMBER}',
      currency: 'PEN',
      amount: '149.00',
      processType: 'AT',
      merchantBuyerId: '{MERCHANT_CODE}',
      dateTimeTransaction: '1747759374068000'
    },
    card:{
      cardToken: '{CARD_TOKEN}'
    },
    billing: {
      firstName: 'Lucho',
      lastName: 'Torres',
      email: 'luchotorres@gmail.com',
      phoneNumber: '989897960',
      street: 'Av. Jorge Chávez 275',
      city: 'Lima',
      state: 'Lima',
      country: 'PE',
      postalCode: '15000',
      documentType: 'DNI',
      document: '12345678'
    },
    shipping:{
      firstName: 'Juan',
      lastName: 'Pérez',
      email: 'juanperez@gmail.com',
      phoneNumber: '989897960',
      street: 'Av. Jorge Chávez 275',
      city: 'Lima',
      state: 'Lima',
      country: 'PE',
      postalCode: '15000',
      documentType: 'DNI',
      document: '12345679'
    }
  }
};

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": "Operación exitosa",
  "messageUser": "Operación exitosa",
  "messageUserEng": "Successful",
  "response": {
    "payMethod": "CARD",
    "order": [
      {
        "payMethodAuthorization": "CARD",
        "codeAuth": "001612",
        "currency": "PEN",
        "amount": "149.00",
        "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": "Lucho",
      "lastName": "Torres",
      "email": "luchotorres@gmail.com",
      "phoneNumber": "989897960",
      "street": "Av. Jorge Chávez 275",
      "city": "Lima",
      "state": "Lima",
      "country": "PE",
      "postalCode": "15000",
      "documentType": "DNI",
      "document": "12345678",
      "companyName": ""
    },
    "merchant": {
      "merchantCode": "4000498",
      "facilitatorCode": ""
    },
    "token": {
      "merchantBuyerId": "mc1991",
      "cardToken": "",
      "alias": ""
    },
    "authentication": {
      "result": ""
    },
    "customFields": [
      {
        "name": "field1",
        "value": ""
      },
      {
        "name": "field2",
        "value": ""
      },
      {
        "name": "field3",
        "value": ""
      },
      {
        "name": "field4",
        "value": ""
      },
      {
        "name": "field5",
        "value": ""
      },
      {
        "name": "field6",
        "value": ""
      },
      {
        "name": "field7",
        "value": ""
      },
      {
        "name": "field8",
        "value": ""
      },
      {
        "name": "field9",
        "value": ""
      },
      {
        "name": "field10",
        "value": ""
      }
    ]
  },
  "payloadHttp": "{\"code\":\"00\",\"message\":\"Operación exitosa\",\"messageUser\":\"Operación exitosa\",\"messageUserEng\":\"Successful\",\"transactionId\":\"170534851179400\",\"response\":{\"payMethod\":\"CARD\",\"order\":[{\"payMethodAuthorization\":\"CARD\",\"codeAuth\":\"001612\",\"currency\":\"PEN\",\"amount\":\"149.00\",\"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\":\"Lucho\",\"lastName\":\"Torres\",\"email\":\"luchotorres@gmail.com\",\"phoneNumber\":\"989897960\",\"street\":\"Av. Jorge Chávez 275\",\"city\":\"Lima\",\"state\":\"Lima\",\"country\":\"PE\",\"postalCode\":\"15000\",\"documentType\":\"DNI\",\"document\":\"12345678\",\"companyName\":\"\"},\"merchant\":{\"merchantCode\":\"4000498\",\"facilitatorCode\":\"\"},\"token\":{\"merchantBuyerId\":\"mc1991\",\"cardToken\":\"\",\"alias\":\"\"},\"authentication\":{\"result\":\"\"},\"customFields\":[{\"name\":\"field1\",\"value\":\"\"},{\"name\":\"field2\",\"value\":\"a\"},{\"name\":\"field3\",\"value\":\"\"},{\"name\":\"field4\",\"value\":\"\"},{\"name\":\"field5\",\"value\":\"\"},{\"name\":\"field6\",\"value\":\"\"},{\"name\":\"field7\",\"value\":\"\"},{\"name\":\"field8\",\"value\":\"\"},{\"name\":\"field9\",\"value\":\"\"},{\"name\":\"field10\",\"value\":\"\"}]}}",
  "signature": "0lLqWLon0j6f6T6fRgMHonuDpVayqjH8eay6fJ9hIPQ=",
  "transactionId": "170534851179400"
}

Demo

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

Editor en vivo

const config = { action: 'pay_token', token: { cardToken: 'undefined' }, render: { typeForm: 'pop-up' } } render ( <Izipay config={config} /> )

 const config = {
    action: 'pay_token',
    token: {
      cardToken: 'undefined'
    },
    render: {
      typeForm: 'pop-up'
    }
  }
  render (
    <Izipay
      config={config}
    />
  )

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.