Saltar al contenido principal

Pagar con opción de registro de tarjeta

Esta casuística combina las funcionalidades de pago y registro de tarjeta. Los usuarios pueden realizar un pago utilizando los datos de su tarjeta y, al mismo tiempo, tienen la opción de registrar su tarjeta para futuras transacciones. Esto brinda conveniencia al usuario al tiempo que agiliza el proceso de pago en futuras ocasiones.

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_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": "S39925",
        "currency": "PEN",
        "amount": "149.90",
        "installment": "00",
        "deferred": "0",
        "orderNumber": "1719866751",
        "stateMessage": "Autorizado",
        "dateTransaction": "20240701",
        "timeTransaction": "154559",
        "uniqueId": "1380961",
        "referenceNumber": "1000000"
      }
    ],
    "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": "MC2407011546022A11H3",
      "cardToken": "59796f6d70c2377642586613856d547ca486e6df1d240c112dfe72065199ee60",
      "alias": ""
    },
    "authentication": {
      "result": ""
    },
    "customFields": [
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      ""
    ]
  },
  "payloadHttp": "{\"code\":\"00\",\"message\":\"OK\",\"messageUser\":\"Operación exitosa\",\"messageUserEng\":\"Successful\",\"transactionId\":\"171986675946900\",\"response\":{\"payMethod\":\"CARD\",\"order\":[{\"payMethodAuthorization\":\"CARD\",\"codeAuth\":\"S39925\",\"currency\":\"PEN\",\"amount\":\"149.90\",\"installment\":\"00\",\"deferred\":\"0\",\"orderNumber\":\"1719866751\",\"stateMessage\":\"Autorizado\",\"dateTransaction\":\"20240701\",\"timeTransaction\":\"154559\",\"uniqueId\":\"1380961\",\"referenceNumber\":\"1000000\"}],\"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\":\"MC2407011546022A11H3\",\"cardToken\":\"59796f6d70c2377642586613856d547ca486e6df1d240c112dfe72065199ee60\",\"alias\":\"\"},\"authentication\":{\"result\":\"\"},\"customFields\":[\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\"]}}",
  "signature": "6KRr8SyarvaVk36afa1Akle0VVskpdD+lNi6k/rjfaI=",
  "transactionId": "171986675946900"
}

Demo​

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

Tip

La opción de registrar tarjeta se muestra cuando se ingresa y se verifica la misma.

Editor en vivo
Resultado
Loading...