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 Unzer UI customer elements:

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

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

customerSettings object

mobileNumber object

The following code example shows the options described above:

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

<p>Shipping Information</p>
<unzer-shipping-address></unzer-shipping-address>

<p>Billing Information</p>
<unzer-billing-address></unzer-billing-address>

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

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.

// ...
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

<unzer-payment
          id="unzer-payment"
          publicKey="s-pub-xyz"
          locale="de-DE">
  <unzer-paylater-invoice></unzer-paylater-invoice>
</unzer-payment>
  
<p>Shipping Information</p>
<unzer-shipping-address></unzer-shipping-address>

<p>Billing Information</p>
<unzer-billing-address></unzer-billing-address>

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

const unzerPaymentElement = document.getElementById('unzer-payment');
unzerPaymentElement.setCustomerData({"customerSettings": "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