Skip to main content

Create payment

To be able to create payment you need to call sdk.createPayment.

Click to see example for all payment methods.
const { data, error } = await sdk.createPayment(
  {
    bankTransfer: {},
    payLater: {
      order: {
        orderNo: "132456",
        orderItems: [
          {
            itemDetail: {
              itemDetailSK: {
                itemName: "Jablko",
              },
            },
            quantity: 1,
            totalItemPrice: 10000,
          },
        ],
      },
    },
    userData: {
      firstName: "Jozko",
      lastName: "Hruska",
      phone: "+421911123456",
    },
    cardDetail: {
      cardHolder: "Jozko Hruska",
    },
    basePayment: {
      endToEnd: "/VS0123456789/SS0123456789/KS123456",
      instructedAmount: {
        amountValue: 10000,
        currency: "EUR",
      },
    },
  },
  REDIRECT_URI,
);

Common data​

Payment gateway supports multiple payment methods and based on your need you can send more or less info in your createPayment call. However, some of the data are mandatory for all payment methods.

basePayment: {
  endToEnd: "/VS0123456789/SS0123456789/KS123456",
  instructedAmount: {
    amountValue: 99.99,
    currency: "EUR",
  },
},
warning

Most common issue is that value in instructedAmount.amountValue field is not rounded properly and API will reject such a data. Please round your data to 2 decimals places.

Modify language and preferred method​

By default, tatrapay+ gateway will show all available payment methods and payment gateway is shown in default Slovak language. If you want to change this behaviour you can pass language and preferredMethod param to createPayment.

If preferredMethod is available user will be directly navigated to this method.

Show gateway in English with bank transfer method
const { data, error } = await sdk.createPayment(
  ...,
  REDIRECT_URI,
  'en',
  'BANK_TRANSFER',
);

Redirect URI​

Redirect URI is used as return address after customer finish payment. This URI is necessary and is used to process result of the payment.

If your application serves multiple locales with distinct URIs for example:

you must register both URIs in the developer portal. Then, when making a createPayment request, be sure to include the redirect URI that matches the user's locale.

warning

This URI must exactly match the URI defined in the Developer Portal

Specific payment method data​

Bank transfer and QR pay​

For this payment method you need to define attribute bankTransfer. It can be empty or contains additional information. If you omit this attribute, bank transfer wouldn't be shown.

bankTransfer: {
  remittanceInformationUnstructured: "Additional informations"
}

Card pay​

This payment methods requires cardDetail.cardHolder, userData.firstName and userData.lastName. One of userData.email or userData.phone is required, based on these data are send notifications to customers.

tip

The SDK automatically strips diacritical marks from characters in the cardDetail.cardHolder field, so you don't need to handle this conversion yourself.

userData: {
  firstName: "Jozko",
  lastName: "Hruska",
  email: "test@tatrabanka.ok",
  phone: "+421911123456",
},
cardDetail: {
  cardHolder: "Jozko Hruska",
}

PayLater (Na splátkyTB)​

This payment method requires information about items that were bought by customer. This structure is more complex and description of all fields can be found in API reference.

warning

The API will reject requests where instructedAmount.amountValue doesn't match the sum of all totalItemPrice values.

payLater: {
  order: {
    orderNo: "111",
    orderItems: [
      {
        quantity: 1,
        totalItemPrice: 200,
        itemDetail: {
          itemDetailSK: {
            itemName: "Stol",
            itemDescription: "biely stol",
          },
          itemDetailEN: {
            itemName: "Table",
            itemDescription: "White table",
          },
        },
        itemInfoURL: "https://url.sk",
      },
    ],
    preferredLoanDuration: 24,
    downPayment: 10,
  },
  capacityInfo: {
    monthlyIncome: 1000,
    monthlyExpenses: 0,
    numberOfChildren: 0,
  },
}

Response​

After you create reqeust to initiate payment you receive following data:

{
  "paymentId": "580ff61e-efdd-40e5-8bc4-c373d59cf0c2",
  "tatraPayPlusUrl": "https://api.tatrabanka.sk/tatrapayplus/production/v1/auth?paymentId=580ff61e-efdd-40e5-8bc4-c373d59cf0c2&client_id=l7ba7ffa0bf66b49b88d17dfe144955f54&hmac=19be0bf2a2e5d5e8626c01203ba747648d8fea0fd0106e51786a13183e9e91c8",
  "availablePaymentMethods": [
    {
        "isAvailable": true,
        "paymentMethod": "CARD_PAY"
    },
    {
        "isAvailable": false,
        "reasonCodeMethodAvailabilityDescription": "Method is not in the partner contract",
        "paymentMethod": "PAY_LATER",
        "reasonCodeMethodAvailability": "NO_CONTRACT"
    },
    {
        "isAvailable": true,
        "paymentMethod": "BANK_TRANSFER"
    },
    {
        "isAvailable": true,
        "paymentMethod": "QR_PAY"
    }
]
}

You should save paymentId to your order associated with this payment. You will later need it to retrieve status of payment. Then you have two options of displaying payment gateway:

  1. Simply redirect user to gateway, field tatraPayPlusUrl.
  2. Show payment gateway in iframe. For detailed description how to use iframe please visit Developer portal documentation