Pay with token

In this case, instead of providing full card details for each transaction, users use a pre-registered token to make the payment. The token represents the registered card and is used as an identifier to upload the securely stored card data to the payment gateway. This enhances security and streamlines the payment process for recurring users.

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

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": "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": "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": "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\":\"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\":\"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

Next, we invite you to explore our interactive demo.

Live editor

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}
    />
  )

Result

Loading...

Note

In case the transaction is not completed in the interactive demo you can try to generate a new card registration, and with the cardToken obtained, make the transaction again.