Unzer

Integrate using Embedded Payment Page

Accept payments using a customizable and ready-made payment page hosted on your server.

Overview

Embedded Payment Page (EPP) is a website overlay prepared by Unzer. When a customer selects the Pay button in your online shop, an overlay displays your available payment methods. The customer can then make the payment using their desired option.

Using Embedded Payment Page, you can support multiple payment methods with one simple integration.

Embedded payment page

icon info
You can test the Embedded Payment Page in action on our demo page.

Read this guide for a general overview on how to accept payments with Embedded Payment Page. For a list of all payment methods supported by Embedded Payment Page, go to Supported Payment methods.

Before you begin

Check the basic integration requirements

How it works

To integrate payments using EPP, you need to perform steps on both client and server side.

  1. First, set up the payment page – prepare customer and basket resources and initialize the payment page on the server side.
  2. Using information from the previous step, you can now initialize the payment page on the client side and handle customer ‘pay’ action in your checkout.
  3. After the payment, check its status on the server side and display the result to the customer on the client side.
  4. Perform more operations on the server side once the payment has been made, for example, cancelling the payment.

Step 1: Set up the payment page
server side

First you should create the resources required for initializing the payment page on the server side— customer and basket resource (recommended), as well as metadata resource (optional).

The customer resource contains information about the customer and is required for the card payment method as well as Unzer Invoice, Unzer Direct Debit Secured, and Unzer Instalment.

icon
We recommend that you always provide the customer resource.

To use an existing customer resource, you need its corresponding customerId. If you don’t have an existing customer resource, you can create it on the server side.

icon
Requests to the API must be authenticated using your public or private key. For more details, see Authentication.
POST https://api.unzer.com/v1/customers

{
  "lastname": "Mustermann",
  "firstname": "Max",
  "salutation": "mr",
  "customerId": "51222",
  "birthDate": "1970-01-01",
  "email": "info@unzer.com",
  "phone": "+49 6221 - 64 71 100",
  "mobile": "+49 172 123 456",
  "billingAddress": {
    "name": "Max Mustermann",
    "street": "Vangerowstr. 18",
    "zip": "69115",
    "city": "Heidelberg",
    "country": "DE"
  },
  "shippingAddress": {
    "name": "Max Mustermann",
    "street": "Vangerowstr. 18",
    "zip": "69115",
    "city": "Heidelberg",
    "country": "DE"
  }
}
$address = (new Address())
            ->setName('Max Mustermann')
            ->setStreet('Vangerowstr. 18')
            ->setZip('69115')
            ->setCity('Heidelberg')
            ->setCountry('DE');

$customer = (new Customer())
            ->setFirstname('Max')
            ->setLastname('Mustermann')
            ->setSalutation(Salutations::MR)
            ->setCompany('Unzer GmbH')
            ->setBirthDate('1972-12-24')
            ->setEmail('Max.Mustermann@unzer.com')
            ->setMobile('+49 123456789')
            ->setPhone('+49 123456789')
            ->setBillingAddress($address)
            ->setShippingAddress($address);

$unzer = new Unzer('s-priv-xxxxxxxxxx');
$unzer->createCustomer($customer);
Address address = new Address();
address
  .setName("Max Mustermann")
  .setStreet("Vangerowstr. 18")
  .setCity("Heidelberg")
  .setZip("69115")
  .setCountry("DE");
      
Customer customer = new Customer("Max", "Mustermann");
customer
  .setCustomerId(customerId)
  .setSalutation(Salutation.mr)
  .setEmail("max.mustermann@unzer.com")
  .setMobile("+49123456789")
  .setBirthDate(getDate("12.12.2000"))
  .setBillingAddress(address)
  .setShippingAddress(address);

Unzer unzer = new Unzer("s-priv-xxxxxxxxxx");
customer = unzer.createCustomer(customer);
icon info
For Unzer Invoice and Unzer Direct Debit Secured, if there is no existing customer resource available, built-in customer forms are displayed on the Embedded Payment Page.

For a full description of the customer resource, go to the relevant server-side integration documentation page: Manage customer (direct API calls), Manage customer (PHP SDK), Manage customer (Java SDK).

The basket resource stores information about the purchased products, used vouchers as well as shipment costs. It is required for Unzer Invoice, Unzer Direct Debit Secured payment methods. We recommend that you always create a Basket resource.

POST https://api.unzer.com/v1/baskets

{
  "amountTotalGross" : 200.00,
  "amountTotalDiscount" : 10.00,
  "amountTotalVat" : 33.33,
  "currencyCode" : "EUR",
  "orderId" : "Order-12345",
  "note" : "Test Basket",
  "basketItems" : [ {
    "basketItemReferenceId" : "Item-d030efbd4963",
    "unit" : "m",
    "quantity" : 10,
    "amountDiscount" : 10.00,
    "vat" : 0.2,
    "amountGross" : 200.00,
    "amountVat" : 33.33,
    "amountPerUnit" : 16.667,
    "amountNet" : 166.67,
    "title" : "SDM 6 CABLE",
    "subTitle" : "This is brand new Mid 2019 version",
    "imageUrl" : "https://a.storyblok.com/f/91629/x/1ba8deb8cc/unzer_primarylogo__white_rgb.svg",
    "type": "goods"
  } ]
}
$basketItem = (new BasketItem())
    ->setBasketItemReferenceId('Item-d030efbd4963')
    ->setQuantity(10)
    ->setUnit('m')
    ->setAmountPerUnit(16.667)
    ->setAmountNet(166.67)
    ->setAmountDiscount(10.0)
    ->setVat(0.2)
    ->setAmountGross(200.0)
    ->setAmountVat(33.33)
    ->setTitle('SDM 6 CABLE')
    ->setSubTitle('This is brand new Mid 2019 version')
    ->setImageUrl('https://a.storyblok.com/f/91629/x/1ba8deb8cc/unzer_primarylogo__white_rgb.svg')
    ->setType(BasketItemTypes::GOODS);

$basket  = (new Basket())
    ->setAmountTotalGross(200.00)
    ->setCurrencyCode('EUR')
    ->setOrderId('Order-12345')
    ->setNote('Test Basket')
    ->addBasketItem($basketItem);

$unzer = new Unzer('s-priv-xxxxxxxxxx');
$unzer->createBasket($basket);
BasketItem basketItem = new BasketItem()
  basketItem.setBasketItemReferenceId("Item-d030efbd4963")
  basketItem.setUnit("m")
  basketItem.setQuantity(10)
  basketItem.setAmountDiscount(new BigDecimal("10.0"))
  basketItem.setVat(new BigDecimal("0.2"))
  basketItem.setAmountGross(new BigDecimal("200.00"))
  basketItem.setAmountVat(new BigDecimal("33.33"))
  basketItem.setAmountPerUnit(new BigDecimal("16.667"))
  basketItem.setAmountNet(new BigDecimal("166.67"))
  basketItem.setTitle("SDM 6 CABLE")
  basketItem.setSubTitle("This is brand new Mid 2019 version")
  basketItem.setImageUrl("https://a.storyblok.com/f/91629/x/1ba8deb8cc/unzer_primarylogo__white_rgb.svg")
  basketItem.setType("goods");

Basket basket = new Basket()
  basket.setAmountTotalGross(new BigDecimal("200.00"))
  basket.setAmountTotalDiscount(new BigDecimal("10.00"))
  basket.setAmountTotalVat(new BigDecimal("33.33"))
  basket.setCurrencyCode(Currency.getInstance("EUR"))
  basket.addBasketItem(basketItem)
  basket.setOrderId("Order-12345")
  basket.setNode("Test Basket");

Unzer unzer = new Unzer("s-priv-xxxxxxxxxx");
Basket basket = unzer.createBasket(basket);

For a full description of the basket resource, go to the relevant server-side integration documentation page: Manage basket (direct API calls), Manage basket (PHP SDK), Manage basket (Java SDK).

Step 2: Initialize payment page
server side

Now you can combine the resources with the data about the transaction (amount, currency) and payment page configuration options (such as return URL, shop name and logo) to make an initialization call for the payment page.

You can initialize the payment page to support either charge or authorize transactions. For a description of charge and authorize transactions, go to the relevant server-side integration documentation page: Manage API resources (direct API calls), Manage API resources (PHP SDK), Manage API resources (Java SDK).

Option 1: Initialize the payment page for the charge transaction

In this case, the charge transaction will be used during the payment process. Most of the payment methods support Charge transaction. You can see the full list on the Payment methods page.

icon info
Only payment methods supporting the charge transaction that are included in your contract are displayed.

Save the payPageId and paymentId available in the pay page call response, you will need the payPageId to initiate payment page on the client side and the paymentId to check the payment later.

POST https://api.unzer.com/v1/paypage/charge

{
    "amount": "100",
    "currency": "EUR",
    "returnUrl": "https://www.unzer.com",
    "orderId": "Order-12",
    "invoiceId": "shop-invoice-id",
    "logoImage": "http://www.any.ed/images/page/info-img.png",
    "shopName": "Any shop name",
    "tagline": "Any tagline",
    "resources": {
        "customerId": "s-cst-1",
        "basketId" : "s-bsk-1",
        "metadataId": "s-mtd-1"
    }
}
$paypage = new Paypage(100.00, 'EUR', 'https://www.unzer.com');

$paypage->setLogoImage('http://www.any.ed/images/page/info-img.png')
    ->setOrderId('shop-order-id')
    ->setShopName('Any shop name')
    ->setTagline('Any tagline')
    ->setInvoiceId('shop-invoice-id');

$unzer = new Unzer('s-priv-xxxxxxxxxx');
$unzer->initPayPageCharge($paypage, $customer, $basket);
Unzer unzer = new Unzer('s-priv-xxxxxxxxxx');
Paypage paypage = new PayPage();

paypage.setAmount(new BigDecimal("100.00"));
paypage.setReturnUrl("https://www.unzer.com");
paypage.setLogoImage("http://www.any.ed/images/page/info-img.png");
paypage.setOrderId("shop-order-id");
paypage.setShopName("Any shop name");
paypage.setTagline("Any tagline");
paypage.setInvoiceId("shop-invoice-id");

// Initialize the paypage
paypage = unzer.paypage(paypage);

The response will look similar to the following example:

{
    "id": "s-ppg-8bb3eee8681cb2a7ff5cc3e0db5580d3a8a7ccf593538a470e70bb7af5682f52",
    "redirectUrl": "https://sbx-payment.heidelpay.com/v1/paypage/s-ppg-8bb3eee8681cb2a7ff5cc3e0db5580d3a8a7ccf593538a470e70bb7af5682f52",
    "amount": "100.0000",
    "currency": "EUR",
    "returnUrl": "https://www.unzer.com",
    "logoImage": "https://dev.unzer.com/wp-content/uploads/2020/09/Unzer__PrimaryLogo_Raspberry_RGB.png",
    "fullPageImage": "",
    "shopName": "Any shop name",
    "shopDescription": "",
    "tagline": "Any tagline",
    "css": {},
    "orderId": "Order-12",
    "termsAndConditionUrl": "",
    "privacyPolicyUrl": "",
    "paymentReference": "",
    "impressumUrl": "",
    "imprintUrl": "",
    "helpUrl": "",
    "contactUrl": "",
    "invoiceId": "",
    "card3ds": "",
    "billingAddressRequired": "false",
    "shippingAddressRequired": "false",
    "resources": {
        "paymentId": "s-pay-173808",
        "customerId": "s-cst-1",
        "basketId": "s-bsk-1",
        "metadataId": "s-mtd-1"
    },
    "action": "CHARGE"
}

For a full description of Paypage resource, refer to the relevant server-side integration Manage API resources (direct API calls), Manage API resources (PHP SDK), Manage API resources (Java SDK).

Option 2: Initialize payment page for the authorize transaction

Here, the authorize transaction is used during the payment process. Check the Payment methods page to see which payment methods are supported.

You should save the payPageId and the paymentId that is available in paypage call response—you will need the payPageId to initiate payment page on the client side and paymentId to check the payment later.

icon
For Unzer Instalment you must provide the effectiveInterestRate parameter in the authorize call.
POST https://api.unzer.com/v1/paypage/authorize

{
    "amount": "100",
    "currency": "EUR",
    "returnUrl": "https://www.unzer.com",
    "orderId": "Order-12",
    "invoiceId": "shop-invoice-id",
    "logoImage": "http://www.any.ed/images/page/info-img.png",
    "shopName": "Any shop name",
    "tagline": "Any tagline",
    "additionalAttributes": {
      "effectiveInterestRate": 4.99
    },
    "resources": {
        "customerId": "s-cst-1",
        "basketId" : "s-bsk-1",
        "metadataId": "s-mtd-1"
    }
}
$paypage = new Paypage(100.00, 'EUR', 'https://www.unzer.com'');

$paypage->setLogoImage('http://www.any.ed/images/page/info-img.png')
    ->setOrderId('shop-order-id'')
    ->setShopName('Any shop name')
    ->setTagline('Any tagline')
    ->setInvoiceId('shop-invoice-id');
    ->setEffectiveInterestRate(4.99); // Needed for Unzer Instalment
    
$unzer->initPayPageAuthorize($paypage, $customer, $basket, $metadata);
[not supported by Java SDK at the moment]

The response will look similar to the following example:

{
    "id": "s-ppg-bf1d82a8c3ed53ae81c689a6fd747b8f2910400d7998868dba3590a32d92ba64",
    "redirectUrl": "https://sbx-payment.heidelpay.com/v1/paypage/s-ppg-bf1d82a8c3ed53ae81c689a6fd747b8f2910400d7998868dba3590a32d92ba64",
    "amount": "100.0000",
    "currency": "EUR",
    "returnUrl": "https://www.unzer.com",
    "logoImage": "https://dev.unzer.com/wp-content/uploads/2020/09/Unzer__PrimaryLogo_Raspberry_RGB.png",
    "fullPageImage": "",
    "shopName": "Any shop name",
    "shopDescription": "",
    "tagline": "Any tagline",
    "css": {},
    "orderId": "Order-12",
    "termsAndConditionUrl": "",
    "privacyPolicyUrl": "",
    "paymentReference": "",
    "impressumUrl": "",
    "imprintUrl": "",
    "helpUrl": "",
    "contactUrl": "",
    "invoiceId": "",
    "card3ds": "",
    "billingAddressRequired": "false",
    "shippingAddressRequired": "false",
    "resources": {
        "paymentId": "s-pay-173809",
        "customerId": "s-cst-1",
        "basketId": "s-bsk-1",
        "metadataId": "s-mtd-1"
    },
    "action": "AUTHORIZE"
}

Refer to the API Reference for a full list of parameters.

icon
  • You should request a new payment page each time your customer pays. This also includes failed transactions.
  • Each payment page expires after 60 minutes.
  • Each payment page becomes invalid after a successful payment.
  • Each payment page becomes invalid if an unrecoverable error occurs, meaning that the payment type creation was successful but the payment transaction failed.

Optional: Exclude payment methods

If you want to exclude some of the payment methods from the Embedded Payment Page, add the arrayexcludeTypes when initializing on the server side. Add all the payment types you want to exclude from the page in an array:


POST https://api.unzer.com/v1/paypage/{authorize|charge}
Body:
{
  ...
  "excludeTypes": ["paypal", "sepa-direct-debit"],
  ...
}
...
$paypage->setExcludeType(['paypal', 'sepa-direct-debit']);
...
...
String[] excludeTypes = {"paypal", "sepa-direct-debit"};
paypage.setExcludeTypes(excludeTypes);
...

For a full list of payment method prefixes that you can specify for the excludeTypes array values, go to the Payment methods page.

Step 3: Initialize payment page
client side

Load our JS script

Add the Unzer’s checkout.js script on your website. You should always load the script directly from https://static.unzer.com:

<link rel="stylesheet" href="https://static.unzer.com/v1/unzer.css" />
<script type="text/javascript" src="https://static.unzer.com/v1/checkout.js"></script>
icon
Faster load time
To make your website load faster, insert the JavaScript at the bottom of your HTML document.

Create the checkout instance

Create a checkout instance, using the payPageId that you received in Step 2.

var checkout = new window.checkout('s-ppg-xxxxxxxxxxxxxxxxxxxxxxx');

Step 4. Handle the customer’s Pay action
client side

Now implement a function that listens to a click or submit event on your checkout page. When a customer calls the checkout action, use checkout.init() to initialize the Embedded Payment Page. The init() method returns a Promise. When the Embedded Payment Page is initialized successfully, use checkout.open() to show the payment pop-up dialog. You can also use these methods for adding your event listener on the following events:

  • checkout.abort() - on abort action, such as selecting the close button.
  • checkout.success() - on a payment success.
  • checkout.error() - on an error (non recoverable, the paypage is invalid).
<form id="payment-form" class="unzerUI form" novalidate style="margin: 70px 70px 0;">
    <div class="field" id="error-holder" style="color: #9f3a38"> </div>
    <button class="unzerUI primary button fluid" id="submit-button" type="submit">Pay</button>
</form>
  checkout.init().then(function() {
  checkout.open();
  
// Add your event listener for abort event
checkout.abort(function() {
    // handle abort event.
    $errorHolder.html('Transaction canceled by user.');
    $submitButton.attr("disabled", false);
});
// Add your event listener for success event
checkout.success(function(data) {
    // handle success event.
    window.location.href = 'ReturnController.php';
});
// Add your event listener for error event
checkout.error(function(error) {
    // handle error event.
    // you can use checkout._hideIframe() to close payment pop-up in this case
});
}

Step 5: Check payment status
server side, client side

For payment methods that don’t require the customer to go to an external site to complete the payment, the checkout.success() or checkout.error() events will be triggered after the customer clicks the Pay button. On the event listener, you can react to the given event—handle the payment status and display result to the customer. See the example in Step 4. Check all possible payment states here.

For redirect payment methods the customer gets redirected to an external payment site. Once the payment is done, they are redirected back to returnURL, that you set in Step 2. Now you can fetch the payment and check its status.

GET https://api.unzer.com/v1/payments/{payment_ID}
{
    "id": "s-pay-131937",
    "state": {
        "id": 1,
        "name": "completed"
    },
    "amount": {
        "total": "20.0000",
        "charged": "20.0000",
        "canceled": "0.0000",
        "remaining": "0.0000"
    },
    "currency": "EUR",
    "orderId": "",
    "invoiceId": "",
    "resources": {
        "customerId": "",
        "paymentId": "s-pay-131937",
        "basketId": "",
        "metadataId": "",
        "payPageId": "",
        "traceId": "70ddf3152a798c554d9751a6d77812ae",
        "typeId": "s-eps-grpucjmy5zrk"
    },
    "transactions": [
        {
            "date": "2021-05-10 00:51:03",
            "type": "charge",
            "status": "success",
            "url": "https://api.unzer.com/v1/payments/s-pay-131937/charges/s-chg-1",
            "amount": "20.0000"
        }
    ]
}
icon
You should handle the status according to the payment method used by the customer.

Notifications

We recommend subscribing to the payment event to receive notifications about any changes to the payment resource. As soon as the event is triggered you should fetch the Payment and update the order status in your shop according to its status.

{
  "event":"payment.pending",
  "publicKey":"s-pub-xxxxxxxxxx",
  "retrieveUrl":"https://api.unzer.com/v1/payments/s-pay-774",
  "paymentId":"s-pay-774"
}

Refer to the Notifications page for details on implementing webhooks for receiving notifications.

Step 6: Display payment result
client side

After the transaction, you should display its result to the customer in the front end using the information from previous step.

icon
Keep in mind that depending on the payment method used, information relevant for the customer as a part of the success/error message can differ. For example, for Unzer Invoice and Unzer Prepayment you should display payment details to the customer.

Localization

To localize your page, pass a locale value as the second argument to the checkout method. When the locale value is set to auto, after reading the language of the customer’s browser and if it is supported by Unzer, your page is translated to this language. If you pass another language value, this language is always selected, regardless of the browser’s language.

var checkout = new window.checkout('s-ppg-xxx', {locale: 'de-DE'});

Customization

You can customize the following elements of the Embedded Payment Page:

  • The header section

Customize the header

To customize the header section, you can choose one of the following:

  • Pass the style values to the options object as the second parameter of the checkout method (in Step 3).
  • Pass a css key when initializing payment page on the server side (in Step 2).

Option 1: Pass the style values to the checkout method

This way, you can change the font color and the background color of the header. If you change the font color, any text inside the header changes too, for example tagline and shopName. You can’t change only one of these elements.

var options = {
  style: {
    header: {
      backgroundColor: '000', // for black color
      fontColor: 'fff', // for white color
    }
  }
}
var checkout = new window.checkout('s-ppg-xxx', options);
icon info
When changing backgroundColor or fontColor, use only hex color values without # before the color code. For example, use fff for white.

Option 2: Pass a CSS object when initializing the payment page

Another way to customize the header section is to pass a CSS object. This option is more flexible and lets you select individual elements. For the Embedded Payment Page, you can pass values for:

  • header
  • tagline
  • shopName

For each element, you can change:

  • backgroundColor
  • fontColor
  • fontSize

To use this option, add the CSS object when initializing payment page on the server side in Step 2:

POST https://api.unzer.com/v1/paypage/{authorize|charge}

{
  ...
    "css": {
      "shopName": "color: #fff; font-size: 24px",
      "tagline": "color: green; font-size: 10px"
    },
  ...
}
...
$styles = [
  'shopName' => 'color: #fff; font-size: 24px',
  'tagline' => 'color: green; font-size: 10px',
];
$paypage->->setCss($styles);
...
...
Map<String, String> cssMap = new HashMap<String, String>();
cssMap.put("tagline", "color: blue; font-size: 30px");
cssMap.put("shopName", "color: blue; font-size: 30px");

paypage.setCss(cssMap);
...
icon
  • When creating CSS that you send to the backend, use vanilla CSS with camelCase in the names of the keys.
  • If you send several values for an individual element, separate these values with a semicolon ;.
  • We recommend testing the UI changes for all device sizes, especially when passing font-size values.
  • When you pass styles for the same element through the checkout method and the CSS object, the latter takes precedence.

Manage payment

After you have made a transaction, you can perform additional operations on it. A common example is the cancel operation which is applicable for most of the payment methods.

Cancel before money receipt (reversal)

To reduce or cancel a reservation on the customer account you need to perform a cancel on the initial transaction. An example of reversal would be unblocking reserved amount on customer account after they returned a rented car.

POST https://api.heidelpay.com/v1/payments/s-pay-1/authorize/cancels

{
  "amount" : "100.00"
}
$unzer = new Unzer('s-priv-xxxxxxxxxx');
$payment = $unzer->fetchPayment('s-pay-1');
$unzer->cancelAuthorizationByPayment($payment, 100.00);
Unzer unzer = new Unzer("s-priv-xxxxxxxxxx");
Authorization authorization = unzer.fetchAuthorization('s-pay-1');
Cancel cancel = authorization.cancel();
{
  "id": "s-cnl-1",
  "isSuccess": true,
  "isPending": false,
  "isError": false,
  "card3ds": false,
  "message": {
    "code": "COR.000.100.112",
    "merchant": "Request successfully processed in 'Merchant in Connector Test Mode'",
    "customer": "Your payments have been successfully processed in sandbox mode."
  },
  "amount": "100.0000",
  "currency": "EUR",
  "date": "2021-06-10 10:47:43",
  "resources": {
    "customerId": "",
    "paymentId": "s-pay-1",
    "basketId": "",
    "metadataId": "",
    "payPageId": "",
    "traceId": "d9763d2fdd7830bdd73f76957423f351",
    "typeId": "s-crd-e6f2yo8ggwhg"
  },
  "paymentReference": "",
  "processing": {
    "uniqueId": "31HA07BC8174FCB9564077FB19AEF03B",
    "shortId": "4872.4846.3345",
    "traceId": "d9763d2fdd7830bdd73f76957423f351"
  }
}

Cancel after money receipt (refund)

To refund a payment you need to perform a cancel on a successful charge transaction. This transfers the money back to the customer.

POST https://api.unzer.com/v1/payments/s-pay-1/charges/s-chg-1/cancels
{
  "amount" : "12.450",
  "paymentReference": "Test cancel transaction"
}
$unzer = new Unzer('s-priv-xxxxxxxxxx');
$charge = $unzer->fetchChargeById('s-pay-1', 's-chg-1');
$cancel = $charge->cancel();
Unzer unzer = new Unzer(new HttpClientBasedRestCommunication(), "s-priv-xxxxxxxxxx");
Charge charge = unzer.fetchChargeById("s-pay-1", "s-chg-1");
Cancel cancel = charge.cancel();

The response will look similar to the following example:

{
  "id": "s-cnl-1",
  "isSuccess": true,
  "isPending": false,
  "isError": false,
  "message": {
    "code": "COR.000.100.112",
    "merchant": "Request successfully processed in 'Merchant in Connector Test Mode'",
    "customer": "Your payments have been successfully processed in sandbox mode."
  },
  "amount": "12.450",
  "currency": "EUR",
  "date": "2021-06-10 10:42:31",
  "resources": {
    "customerId": "",
    "paymentId": "s-pay-1",
    "basketId": "",
    "metadataId": "",
    "payPageId": "",
    "traceId": "980df34e485a2dac0019e998b1b044cb",
    "typeId": "s-sdd-ixdcookaqpzu"
  },
  "paymentReference": "",
  "processing": {
    "uniqueId": "31HA07BC8174FCB9564040C4B8564729",
    "shortId": "4872.4815.1981",
    "traceId": "980df34e485a2dac0019e998b1b044cb"
  }
}

To learn about payment management for specific payment methods, go to the relevant payment method page.

Error handling

All requests to the API can result in an error that should be handled. Refer to the Error handling guide to learn more about Unzer API (and other) errors and handling them.

Test & go live

You should always test your integration before going live. First perform test transactions using test data. Next, check against Integration checklist and Go-live checklist to make sure the integration is complete and you’re ready to go live.

See also