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:

Old New
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:

Old New
heidelpayInstance unzerInstance
heidelpayInstance.Card() unzerInstance.Card()

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

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

// Creating a credit card instance
var 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 heidelpay instance with your public key
var unzerInstance = new unzer('s-pub-xxxxxxxxxx');

// Creating a credit card instance
var 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:

Old New
InvoiceGuaranteed InvoiceSecured
InvoiceFactoring InvoiceSecured
SepaDirectDebitGuaranteed SepaDirectDebitSecured
HirePurchaseDirectDebit InstallmentSecured

Migrate to Unzer SDK

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