alt

Important information

There was an update of Unzer TLS/SSL certificates. Learn more

Unzer

B2B customer UI components

Use business customer form provided by Unzer in your online shopping solution.

Overview

As an alternative to the Customer UI component that is used for business to customer transaction, you can also use the B2B Customer UI component. It’s a ready-made form provided by Unzer that allows you to gather information required by some of our payment methods: Unzer Direct Debit Secured, Unzer Invoice, and Unzer Instalment. If you don’t have information about the B2B customer (and accompanying customerId) to pass in the transaction, or you want to update information about the already existing customer, you can use the B2B Customer UI component.

Read this guide to learn how to use the B2B Customer UI component, and check our demo page to see it in action.

icon
Although it’s possible to use the B2B Customer UI component on its own, we recommend using it together with the UI component for one of the payment methods mentioned above.

Before you begin

  • Familiarize yourself with general guide on integrating using UI components.
  • We recommend that you already have one of the payment methods integrated on your website - the customer form is merely an addition to it.

Step 1: Create unzer instance and insert the customer form

Create an unzer instance with your public key:

// Creating an unzer instance with your public key
let unzerInstance = new unzer('s-pub-xxxxxxxxxx');

We recommend adding the customer form inside your payment form and placing it between the payment elements and the submit button, or above the payment elements, in case of Unzer Invoice..

<form id="payment-form" class="unzerUI form">
  <div id="example-your-payment-method" class="field">
    <!-- ... The Payment form UI elements will be inserted here -->
  </div>

  <div id="b2b-customer" class="field">
    <!-- The B2B customer form UI element will be inserted here -->
  </div>
  
  <div id="error-holder" class="field" style="color: #9f3a38">
    <!-- Errors will be inserted here -->
  </div>
  <button class="unzerUI primary button fluid" id="submit-button" type="submit">
    Pay
  </button>
</form>

Step 2: Create a B2B customer instance and render the form

A B2B customer instance is created like any other UI component. In Order to render the customer form, you will need to call either create() or update() method. In case you wish to initialize the form with the data of an already created customer, you will need to call the initFormFields() function. This has to be done before the update() call.

// Creating a B2B customer instance
let b2BCustomer = unzerInstance.B2BCustomer()
// Rendering the B2B customer form
b2BCustomer.create({
  containerId: 'b2b-customer',
  errorHolderId: 'error-holder'
})
// Creating a customer instance
let b2BCustomer = unzerInstance.B2BCustomer()
// Initialize customer form with existing customer data
b2BCustomer.initFormFields({
  "lastname": "Universum",
  "firstname": "Peter",
  "salutation": "mr",
  "company": "unzer GmbH",
  "birthDate": "1987-12-20",
  "email": "john.doe@unzer.com",
  "billingAddress": {
    "name": "Peter Universum",
    "street": "Hugo-Junkers-Str. 5",
    "state": "DE-BO",
    "zip": "60386",
    "city": "Frankfurt am Main",
    "country": "DE"
  },
  "companyInfo": {
    "registrationType": "not_registered",
    "function": "OWNER",
    "commercialSector": "AIR_TRANSPORT",
    "commercialRegisterNumber": "de-423fsdf-zz"
  },
})

// Call the update method that will initialize the form with existing customer data
// You need to pass the customerId and an options object as parameter.
// The containerId has to be set within the options object
b2BCustomer.update('s-cst-7f0910d26396', {
    containerId: 'b2b-customer',
})

Step 3: Handling the form’s submission

Customer form with payment

Usually you want to use the customer form with a payment method. In that case, you will create promises for both payment type and customer resources and handle them with Promise.all(). Below, you can see examples for Unzer Direct Debit Secured and Unzer Invoice payment types.

// Inside your event handler
let paymentTypePromise = paymentMethod.createResource()
let b2bCustomerPromise = b2BCustomer.createCustomer()
Promise.all([paymentTypePromise, b2bCustomerPromise])
  .then(function(values) {
    // Success
  })
  .catch(function(error) {
    // Error
  })
// Inside your event handler
let paymentTypePromise = paymentMethod.createResource()
let b2bCustomerPromise = b2BCustomer.updateCustomer()
Promise.all([paymentTypePromise, b2bCustomerPromise])
    .then(function(values) {
      // Success
    })
    .catch(function(error) {
      // Error
    })

In the example, paymentTypePromise and b2bCustomerPromise were created to temporarily store the individual promises.

When creating the promises, be sure to use the following methods:

  • createResource() for the PaymentType
  • createCustomer() for the Customer resource creation
  • updateCustomer() for the Customer resource update

After that, you can simply handle both promises with Promise.all() and the recently created variables as parameter list.

Optionally, you can add a custom event listener that sends the validation result of all input fields

Customer form only

Although we recommend using the customer form in addition to a payment method, it is possible to submit it on its own. This works just like with every other resource, except for the method signature. Instead of createResource() you need to write createCustomer() or updateCustomer().

// Inside your form event handler:
b2BCustomer.createCustomer()
  .then(function(data) {
  // Success
})
  .catch(function(error) {
  // Error
})
// Inside your form event handler:
b2BCustomer.updateCustomer()
  .then(function(data) {
  // Success
})
  .catch(function(error) {
  // Error
})

Both createCustomer() and updateCustomer() create a promise which has to be handled with then() and catch() as shown above.

Optionally, you can add a custom event listener that sends the validation result of all input fields

b2bCustomer.addEventListener('validate', function(e) {
  if (e.success) {
    // run some code (e.g. enable the `pay` button)
    document.getElementById('submit-button').removeAttribute('disabled')
  } else {
    // run some code (e.g. disable the `pay` button)
    document.getElementById('submit-button').setAttribute('disabled', 'disabled');
  }
})

Examples

Here you can find complete examples for Unzer Direct Debit Secured and Unzer Invoice UI component integration with a B2B customer form.

Reminder: Unzer provides you with an optional B2B customer form, in case you have not saved any customer data in the first place. The B2B customer UI component is optional, except when you want to integrate one of the payment methods mentioned in the overview section.

icon
Don’t forget to include unzer.js and unzer.css on your website before you start creating payment forms.

Unzer Direct Debit Secured with B2B customer create form

<form id="payment-form-sepa-secured-b2b-customer" class="unzerUI form" novalidate>
  <div id="direct-debit-secured-IBAN" class="field">
    <!-- The IBAN field UI Element will be inserted here -->
  </div>
  <div id="b2b-customer" class="field">
    <!-- The B2B customer form UI Element will be inserted here -->
  </div>
  <div class="field">
    <button class="unzerUI primary button fluid" type="submit">Pay</button>
  </div>
</form>
// Creating an Unzer instance with your public key
let unzerInstance = new unzer('s-pub-xxxxxxxxxx');
// Creating an Unzer Direct Debit Secured instance
let sepaSecured = unzerInstance.SepaDirectDebitSecured()
// Rendering the input field
sepaSecured.create('sepa-direct-debit-secured', {
  containerId: 'direct-debit-secured-IBAN'
});
// Creating a B2B customer instance
let b2BCustomer = unzerInstance.B2BCustomer()
// Rendering the B2B customer form
b2BCustomer.create({
  containerId: 'b2b-customer'
})
// Handling the form's submission
let form = document.getElementById('payment-form-sepa-secured-b2b-customer')
form.addEventListener('submit', function(event) {
  event.preventDefault();
  let sepaSecuredPromise = sepaSecured.createResource()
  let b2bCustomerPromise = b2BCustomer.createCustomer()
  Promise.all([sepaSecuredPromise, b2bCustomerPromise])
    .then(function(values) {
    // Success
  })
    .catch(function(error) {
    // Error
  })
});

For a complete guide on integrating, see Unzer Direct Debit Secured.

Unzer Invoice with B2B customer create form

<form id="payment-form-paylater-invoice">
  <div id="b2b-customer" class="field">
    <!-- The B2B customer form UI element will be inserted here -->
  </div>
  <div id="example-paylater-invoice">
    <!-- ... The Payment form UI element, will be inserted here -->
  </div>
  <div class="field">
    <button class="unzerUI primary button fluid" type="submit">Pay</button>
  </div>
</form>
// Create an Unzer instance with your public key
let unzerInstance = new unzer('s-pub-xxxxxxxxxx');

// Creating an Unzer Invoice instance
let paylaterInvoice = unzerInstance.PaylaterInvoice()
// Creating a B2B Customer instance
let b2BCustomer = unzerInstance.B2BCustomer()
// Rendering the B2B customer form
b2BCustomer.create({
  containerId: 'b2b-customer',
  paymentTypeName: 'paylater-invoice',
  errorHolderId: 'error-holder'
})
// Rendering the Unzer Invoice payment form
paylaterInvoice.create({
  containerId: 'example-paylater-invoice',
  customerType: 'B2B',
  errorHolderId: 'error-holder',
})

// Handle customer and Unzer Invoice form validation
let isValidCustomer = false;
let isValidPaylaterInvoice = false;

paylaterInvoice.addEventListener('change', function eventHandlerResource(e) {
  if (e.success) {
    isValidPaylaterInvoice = true;
    if (isValidCustomer) {
      document.getElementById('submit-button').removeAttribute('disabled')
    }
  } else {
    isValidPaylaterInvoice = false;
    document.getElementById('submit-button').setAttribute('disabled', 'disabled');
  }
})

customer.addEventListener('validate', function(e) {
  if (e.success) {
    isValidCustomer = true;
    if (isValidPaylaterInvoice) {
      document.getElementById('submit-button').removeAttribute('disabled')
    }
  } else {
    document.getElementById('submit-button').setAttribute('disabled', 'disabled');
    isValidCustomer = false;
  }
})

// Handle payment form submission
let form = document.getElementById('payment-form-paylater-invoice');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  let paylaterInvoicePromise = paylaterInvoice.createResource()
  let b2bCustomerPromise = b2BCustomer.createCustomer()
  Promise.all([paylaterInvoicePromise, b2bCustomerPromise])
    .then(function(values) {
      // Success
    })
    .catch(function(error) {
      // Error
    })
});

For a complete guide on integrating this payment method, see Accept Unzer Invoice with UI components

Code reference

Constructor function

unzerInstance.B2BCustomer()

Initializes the B2B customer object.

create function

Method

void create(Object options)

Description

Creates an input form for B2B customer data. You can pass additional options as key value pairs inside the options parameter.

Properties

Parameter Type Description
options object A JSON object with various options.

options

Parameter Type Description Required
containerId String The HTML id of the DOM element, where the UI component will be inserted.
Example:
containerId: 'card-element-id-number'
Yes

initFormFields function

Method

void initFormFields(Object b2bCustomerData)

Description

Passes the existing customer data to B2BCustomer component.

Properties

Parameter Type Description
b2bCustomerData Object An object containing existing customer information

b2bCustomerData

Parameter Type Description UI Validation
firstname String Value required only if registrationType is not_registered
Default: ""
maxLength: 40 characters"
lastname String Value required only if registrationType is not_registered
Default: ""
maxLength: 40 characters"
salutation String Value required only if registrationType is not_registered
Default: "mr"
Radio button, only one option is selected.
Choices: Mr., Mrs., Diverse
birthDate String Value required only if registrationType is not_registered
Default: ""
errorMessage:
- Wrong birthday
- Customer must be over 18 years old to use this payment method

dateFormat: depend on language of selected country. For example, English is yyyy-MM-dd
email String Value required only if registrationType is not_registered
Default: ""
maxLength: 100 characters
errorMessage: Wrong email
acceptanceData: a-z, A-Z, 0-9, should contain only one @ character.
billingAddress Object Billing address of the customer.
companyInfo Object Customer’s company info.
differentBillingAddress Object Optional field
Another billing address
Default: ""

billingAddress

Parameter Type Description UI Validation
street String Default: "" maxLength: 50 characters"
state String Default: ""
zip String Default: "" Zip code validation will depend on the country that is selected
errorMassage: Wrong postal code
city String Default: ""
country String Default: "Germany" List of countries for zip code validation:
Country
Germany, Austria, Belgium, Czechia, Denmark, France, Iran, Ireland, Italy, Luxembourg, Netherlands, Poland, Russia, Spain, Sweden, Switzerland, Tunisia, UK, Ukraine, USA

companyInfo

Parameter Type Description
registrationType String Choices:
registered and not_registered
commercialRegisterNumber String Value required only if registrationType is registered
commercialSector String Choices listed below:

commercialSector

Available options
‘OTHER’,
‘WHOLESALE_TRADE_EXCEPT_VEHICLE_TRADE’,
‘RETAIL_TRADE_EXCEPT_VEHICLE_TRADE’,
‘WATER_TRANSPORT’,
‘AIR_TRANSPORT’,
‘WAREHOUSING_AND_SUPPORT_ACTIVITES_FOR_TRANSPORTATION’,
‘POSTAL_AND_COURIER_ACTIVITIES’,
‘ACCOMMODATION’,
‘FOOD_AND_BEVERAGE_SERVICE_ACTIVITIES’,
‘MOTION_PICTURE_PRODUCTION_AND_SIMILAR_ACTIVITIES’,
‘TELECOMMUNICATIONS’,
‘COMPUTER_PROGRAMMING_CONSULTANCY_AND_RELATED_ACTIVITIES’,
‘INFORMATION_SERVICE_ACTIVITIES’,
‘RENTAL_AND_LEASING_ACTIVITIES’,
‘TRAVEL_AGENCY_AND_RELATED_ACTIVITIES’,
‘SERVICES_TO_BUILDINGS_AND_LANDSCAPE_ACTIVITIES’,
‘LIBRARIES_AND_SIMILAR_CULTURAL_ACTIVITIES’,
‘SPORTS_ACTIVITIES_AND_AMUSEMENT_AND_RECREATION_ACTIVITIES’,
‘OTHER_PERSONAL_SERVICE_ACTIVITIES’,
‘NON_RESIDENTIAL_REAL_ESTATE_ACTIVITIES’,
‘MANAGEMENT_CONSULTANCY_ACTIVITIES’,
‘ELECTRICITY_GAS_AND_STEAM_SUPPLY’,
‘WATER_COLLECTION_TREATMENT_AND_SUPPLY’,
‘SEWERAGE’,
‘MANUFACTURE_OF_FOOD_PRODUCTS’,
‘MANUFACTURE_OF_BEVERAGES’,
‘MANUFACTURE_OF_TEXTILES’,
‘OTHERS_COMMERCIAL_SECTORS’,
‘MANUFACTURE_OF_WEARING_APPAREL’,
‘MANUFACTURE_OF_LEATHER_AND_RELATED_PRODUCTS’,
‘MANUFACTURE_OF_PHARMACEUTICAL_PRODUCTS’,
‘REPAIR_AND_INSTALLATION_OF_MACHINERY_AND_EQUIPMENT’,
‘TRADE_AND_REPAIR_OF_MOTOR_VEHICLES’,
‘PUBLISHING_ACTIVITIES’,
‘REPAIR_OF_COMPUTERS_AND_GOODS’,
‘PRINTING_AND_REPRODUCTION_OF_RECORDED_MEDIA’,
‘MANUFACTURE_OF_FURNITURE’,
‘OTHER_MANUFACTURING’,
‘ADVERTISING_AND_MARKET_RESEARCH’,
‘OTHER_PROFESSIONAL_SCIENTIFIC_AND_TECHNICAL_ACTIVITIES’,
‘ARTS_ENTERTAINMENT_AND_RECREATION’

update function

Method

void update()

Description

Initiates a B2B customer update form and mounts it onto the declared DOM element.

Properties

Parameter Type Description Required
customerId String ID of the customer that is to be updated. Yes
options Object Object containing containerId. Yes

options

Parameter Type Description Required
containerId String The HTML id of the DOM element, where the UI component will be inserted. Yes

createCustomer function

Method

Object createCustomer()

Description

Creates a promise and submits the (b2b customer) form’s data. It either gets resolved or rejected. In both cases an object is returned.

Returns

An object with the following structure:

  • Success: {id: String}
  • Error: {}
Parameter Type Description
id String The returned /customers resource ID.

updateCustomer function

Method

Object updateCustomer()

Description

Creates a promise and submits the (b2b customer) form’s updated data. It either gets resolved or rejected. In both cases an object is returned.

Returns

An object with the following structure:

  • Success: {id: String}
  • Error: {}
Parameter Type Description
id String The returned /customers resource Id.

The returned ID is the same as the one passed in update() method