Skip to main content

Pay with card registration option

This casuistry combines payment and card registration functionalities. Users can make a payment using their card their card details and, at the same time, have the option to register their card for future transactions. This provides convenience to the user while streamlining the payment process on future occasions.

Objective​

You will learn how to:

  • Create the configuration object.
  • Initialize the payment form.
  • Display the Checkout.
  • Sample response.

1. Creating the configuration object​

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

2. Instantiating the class​

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

3. Displaying the 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. Response​

  • This is an example of a response that will be sent to the merchant after the flow is completed
{
  "code": "00",
  "message": "Operación exitosa",
  "messageUser": "Operación exitosa",
  "messageUserEng": "Successful",
  "response": {
    "payMethod": "CARD",
    "order": [
      {
        "payMethodAuthorization": "CARD",
        "codeAuth": "S39925",
        "currency": "PEN",
        "amount": "149.00",
        "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": "Luis",
      "lastName": "Quispe",
      "email": "luisquispetaquire@gmail.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": [
      {
        "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\":\"171986675946900\",\"response\":{\"payMethod\":\"CARD\",\"order\":[{\"payMethodAuthorization\":\"CARD\",\"codeAuth\":\"S39925\",\"currency\":\"PEN\",\"amount\":\"149.00\",\"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\":\"Luis\",\"lastName\":\"Quispe\",\"email\":\"luisquispetaquire@gmail.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\":[{\"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": "6KRr8SyarvaVk36afa1Akle0VVskpdD+lNi6k/rjfaI=",
  "transactionId": "171986675946900"
}

Demo​

Next, we invite you to explore our interactive demo.

Tip

The Card register option is displayed when the card is entered and verified.

Live editor
Result
Loading...