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

Check the basic integration requirements.
Familiarize yourself with the general Server-side-only integration guide.

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.

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