Unzer

Accept Card with a server-side-only integration

Use your own UI to add Card payment to your checkout page.

Overview

Card payment method does require some input from the customer on the merchant website like credit card number or expiry date. You can see an example of Card frame component on our demo page.

When integrating card payments with your own UI you need to take care of being PCI compliant. For details please see PCI compliance guide.

Before you begin

Step 1: Create a Payment Type resource
server side

Data for the card payment:

Parameter Type Description
number (required) string The card number.
expiryDate (required) string The card expiration date, in the MM/YY format.
cvc (required) string The card verification code.
cardHolder string The card holder’s name.
email string The email of the customer.
icon
Email of the card holder is required by the 3DS regulatory standard. You can either add an email field to your form or send a customer resource containing the email with the transaction in Step 2. We recommend the latter.

When creating the payment type card you need to pass the user data to your server backend, and send a request to the Unzer API. The response will contain an id , this is later referred to as typeId. You will need this typeId to perform the transaction.

POST https://api.unzer.com/v1/types/card

{
  "number" : "4444333322221111",
  "expiryDate" : "04/25",
  "cvc": "123",
  "3ds": "false",
  "cardHolder": "Max Mustermann"
}
$unzer = new Unzer('s-priv-xxxxxxxxxx');
$card = new Card('4444333322221111', '04/25', 'max.mustermann@unzer.com');
$card->setCvc('123')->setCardHolder('Max Mustermann');
$unzer->createPaymentType($card);
// get the BIC from your payment form.
Unzer Unzer = new Unzer("s-priv-xxxxxxxxxx");
Card card = new Card("4444333322221111", "04/25");
card.setCvc("123");
card.set3ds(false);
card.setCardHolder("Max Mustermann");
card = unzer.createPaymentType(card);

The response looks similar to the following example:

{
    "id": "s-crd-wln5j3zcmjzi",
    "method": "card",
    "number": "444433******1111",
    "brand": "VISA",
    "cvc": "***",
    "expiryDate": "04/2025",
    "3ds": false,
    "cardHolder": "Test Card Holder",
    "cardDetails": {
        "cardType": "",
        "account": "CREDIT",
        "countryIsoA2": "US",
        "countryName": "UNITED STATES",
        "issuerName": "",
        "issuerUrl": "",
        "issuerPhoneNumber": ""
      },
   "geoLocation": {
     "clientIp": "115.77.189.143",
     "countryCode": "VN"
  }
}

For a full description of card payment type creation, check API reference.

Next steps

The next steps are the same as for the UI components integration, check Accept card with UI Components from Step 2 onwards