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 you can use to gather information required for some of the payment methods: 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 customer UI components.

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: Insert the customer form

Insert the Unzer customer form component:

The <unzer-customer-form> component can be inserted either within or outside the <unzer-payment> element. On submit, all customer and company data will be automatically gathered and submitted together with the payment form to create the customer and payment type resources.

B2B Customer Detection
The customer form automatically detects B2B customers when company information is provided via setCustomerData() or when customerSettings: { type: 'B2B' } is passed. It will display the appropriate company-related fields including company name, company type, registration details, and owner information (for sole proprietors). By default, if no customerSettings is provided, the form defaults to B2C.

B2B Field Visibility

When using customerSettings: { type: 'B2B' }, the form displays B2B-specific fields:

Always visible:

• Personal information (email, salutation, name)
• Company name
• Company type (Other, Authority, Association, Company, Sole proprietor)
• Registration type (Registered / Not registered)
• Billing and shipping addresses

Conditionally visible:

• Commercial register number (required when registration type is “Registered”)
• Owner information (first name, last name, birth date) - required for sole proprietors with “Not registered” status
• Mobile number (required for certain payment methods like Unzer Invoice, Unzer Installment)

If you want to initialize the customer elements with the data of an already created customer, you will need to call the setCustomerData() function of the <unzer-payment> element, and pass a customer object in JSON format.

customer object

address object

companyInfo object

owner object

mobileNumber object

customerSettings object

Using Customer Settings

• Use customerSettings: { type: 'B2B' } to render an empty B2B form without pre-populating data
• Use customerSettings: { type: 'B2C' } to explicitly set B2C (or omit for default B2C behavior)

The following code example shows the options described above:

HTML

HTML Javascript

Copy

<unzer-payment
        id="unzer-payment"
        publicKey="s-pub-xyz"
        locale="de-DE">
            <!-- ... Here you will need to add the Unzer payment type tag, so the form UI elements will be inserted -->
            <!--    e.g <unzer-paylater-invoice></unzer-paylater-invoice> -->
</unzer-payment>

<unzer-customer-form></unzer-customer-form>

<unzer-checkout id='unzer-checkout'></unzer-checkout>

Javascript

HTML Javascript

Copy

const unzerPaymentElement = document.getElementById('unzer-payment');
unzerPaymentElement.setCustomerData({
    "id": "s-cst-xyz",
    "lastname": "Universum",
    "firstname": "Peter",
    "salutation": "mr",
    "birthDate": "20.12.1987",
    "mobileNumber": {
        "prefix": "49",
        "phone": "1234"
    },
    "shippingAddress": {
        "name": "Peter Universum",
        "street": "Hugo-Junkers-Str. 5",
        "zip": "60386",
        "city": "Frankfurt am Main",
        "country": "DE",
        "shippingType": "equals-billing"
    },
    "billingAddress": {
        "state": "Peter Universum",
        "street": "Hugo-Junkers-Str. 5",
        "zip": "60386",
        "city": "Frankfurt am Main",
        "country": "DE"
    },
    "companyInfo": {
      "companyType": "association",
      "registrationType": "not_registered",
      "function":"OWNER",
      "commercialSector": "OTHER",
      "owner": {
        "firstname": "Peter",
        "lastname": "Universum",
        "birthdate": "1974-10-03"
      }
    }
})

Step 2: Handling the form’s submission

Customer form with payment

After the submit button is clicked, the customer and payment data are automatically submitted. You will then need to query the unzer-checkout element and handle the response inside its onPaymentSubmit event listener.

The following code example shows how to read customer and payment data from the response.

JavaScript

JavaScript

Copy

// ...
const unzerCheckout = document.getElementById('unzer-checkout');
unzerCheckout.onPaymentSubmit = (response) => {
    if (response.submitResponse && response.customerResponse) {
        if (response.customerResponse.success) {
            // Optional: Only in case a new customer is created in the frontend.
            const customerId = response.customerResponse.data.id;
        }

        if (response.submitResponse.success) {
            const paymentTypeId = response.submitResponse.data.id;
        }

        // Submit all IDs to your server-side integration to perform the payment transaction.
    }
};

Examples

Here you can find complete examples for 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.

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

Unzer Invoice with B2B customer create form

HTML

HTML JavaScript

Copy

<unzer-payment
          id="unzer-payment"
          publicKey="s-pub-xyz"
          locale="de-DE">
  <unzer-paylater-invoice></unzer-paylater-invoice>
</unzer-payment>

<unzer-customer-form></unzer-customer-form>

<unzer-checkout id='unzer-checkout'></unzer-checkout>

JavaScript

HTML JavaScript

Copy

const unzerPaymentElement = document.getElementById('unzer-payment');
unzerPaymentElement.setCustomerData({ customerSettings: { type: 'B2B' } });

const unzerCheckout = document.getElementById('unzer-checkout');
unzerCheckout.onPaymentSubmit = (response) => {
    if (response.submitResponse && response.customerResponse) {
        if (response.customerResponse.success) {
            // Optional: Only in case a new customer is created in the frontend.
            const customerId = response.customerResponse.data.id;
        }

        if (response.submitResponse.success) {
            const paymentTypeId = response.submitResponse.data.id;
        }

        // Submit all IDs to your server-side integration to perform the payment transaction.
    }
};

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