alt

Important information

Updates to Visa secure data field mandate: Read more about the mandatory changes.

Unzer

Migrate to Unzer UI components

Migrate from the old heidelpay UI components to the new Unzer UI components.

About the migration

The new Unzer UI components work the same as the old heidelpay UI components, except for changes in:

  • CSS stylesheet URL
  • JS script URL
  • CSS class names
  • JavaScript code
  • Payment type names
  • Related SDKs

Migrate to Unzer UI components

To migrate from the old heidelpay UI components to the new Unzer UI components, implement the following changes (in any order).

Replace CSS stylesheet URL

In your project, replace the CSS stylesheet URL:

<link rel="stylesheet" href="https://static.heidelpay.com/v1/heidelpay.css" />
<link rel="stylesheet" href="https://static.unzer.com/v1/unzer.css" />

Replace JS script URL

In your project, replace the JS script URL:

<script type="text/javascript" src="https://static.heidelpay.com/v1/heidelpay.js"></script>
<script type="text/javascript" src="https://static.unzer.com/v1/unzer.js"></script>

Replace CSS class names

In your project, replace the names of the CSS classes.

This table shows examples of changes that you need to make:

OldNew
class="heidelpayUI form"class="unzerUI form"
class="heidelpayInput"class="unzerInput"

This example shows how these changes apply to your HTML form:

<form id="payment-form" class="heidelpayUI form" novalidate>
  <div class="field">
    <div id="card-element-id-number" class="heidelpayInput">
        <!-- Card number UI Element will be inserted here. -->
    </div>
  </div>
  <div class="two fields">
    <div class="field ten wide">
      <div id="card-element-id-expiry" class="heidelpayInput">
        <!-- Card expiry date UI Element will be inserted here. -->
      </div>
    </div>
    <div class="field six wide">
      <div id="card-element-id-cvc" class="heidelpayInput">
        <!-- Card CVC UI Element will be inserted here. -->
      </div>
    </div>
  </div>
  <div class="field">
    <button id="submit-button" class="heidelpayUI primary button fluid" type="submit">
      Pay
    </button>
  </div>
</form>
<form id="payment-form" class="unzerUI form" novalidate>
  <div class="field">
    <div id="card-element-id-number" class="unzerInput">
        <!-- Card number UI Element will be inserted here. -->
    </div>
  </div>
  <div class="two fields">
    <div class="field ten wide">
      <div id="card-element-id-expiry" class="unzerInput">
        <!-- Card expiry date UI Element will be inserted here. -->
      </div>
    </div>
    <div class="field six wide">
      <div id="card-element-id-cvc" class="unzerInput">
        <!-- Card CVC UI Element will be inserted here. -->
      </div>
    </div>
  </div>
  <div class="field">
    <button id="submit-button" class="unzerUI primary button fluid" type="submit">
      Pay
    </button>
  </div>
</form>

Update your JavaScript code

In your project, update your JavaScript code.

This table shows examples of changes that you need to make:

OldNew
let heidelpayInstance = new heidelpay()let unzerInstance = new unzer()
heidelpayInstance.Card()unzerInstance.Card()

This example shows how these changes apply to your JavaScript code:

// Creating a heidelpay instance with your public key
let heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');

// Creating a credit card instance
let card = heidelpayInstance.Card()
// Rendering input fields
card.create('number', {
  containerId: 'card-element-id-number'
});
card.create('expiry', {
  containerId: 'card-element-id-expiry'
});
card.create('cvc', {
  containerId: 'card-element-id-cvc'
});

// Optional
card.create('holder', {
  containerId: 'card-element-id-holder'
});
// Creating a unzer instance with your public key
let unzerInstance = new unzer('s-pub-xxxxxxxxxx');

// Creating a credit card instance
let card = unzerInstance.Card()
// Rendering input fields
card.create('number', {
  containerId: 'card-element-id-number'
});
card.create('expiry', {
  containerId: 'card-element-id-expiry'
});
card.create('cvc', {
  containerId: 'card-element-id-cvc'
});

// Optional
card.create('holder', {
  containerId: 'card-element-id-holder'
});

Replace payment type names

Replace the following payment type names:

OldNew
InvoiceGuaranteedInvoiceSecured
InvoiceFactoringInvoiceSecured
SepaDirectDebitGuaranteedSepaDirectDebitSecured
HirePurchaseDirectDebitInstallmentSecured

Migrate to Unzer SDK

Migrate from the old heidelpay SDK to the new Unzer SDK: