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. |
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