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
`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:

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: