Customer UI

<!-- ... Payment elements -->
<div id="customer" class="field">
  <!-- The customer form UI element will be inserted here -->
</div>
<!-- Submit button>

// Creating a customer instance
var Customer = heidelpayInstance.Customer()
// Rendering the customer form
Customer.create({
  containerId: 'customer'
})

// Creating a customer instance
var Customer = heidelpayInstance.Customer()
// Initialize customer form with existing customer data
Customer.initFormFields({
  "lastname": "Universum",
  "firstname": "Peter",
  "salutation": "mr",
  "birthDate": "1987-12-20",
  "billingAddress": {
    "street": "Hugo-Junkers-Str. 5",
    "state": "DE-BO",
    "zip": "60386",
    "city": "Frankfurt am Main",
    "country": "DE"
  }
})

// Optional: add a custom event listener that sends the validation result 
// of all input fields
// Note: the event listner has to be called before the `update()` call
Customer.addEventListener('validate', function(e) {
  if (e.success) {
    // run some code (e.g. enable the disabled `pay` button)
  } else {
    // run some code (e.g. disable the `pay` button)
  }
})

// Call the update method that will initialize the form with
// existing customer data
// You should pass the current customer's Id, and the containerId
Customer.update('s-cst-7f0910d26396', {
    containerId: 'customer',
})

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

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

// Inside your event handler
var paymentPromise = paymentMethod.createResource()
var customerPromise = Customer.createCustomer()
Promise.all([paymentPromise, customerPromise])
  .then(function(values) {
  // Success
})
  .catch(function(error) {
  // Error
})

<form id="payment-form-sepa-guaranteed-customer" class="heidelpayUI form" novalidate>
  <div id="sepa-guaranteed-customer-IBAN" class="field">
    <!-- The IBAN field UI Element will be inserted here -->
  </div>
  <div id="customer" class="field">
    <!-- The customer form UI Element will be inserted here -->
  </div>
  <div class="field">
    <button class="heidelpayUI primary button fluid" type="submit">Pay</button>
  </div>
</form>

// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');
// Creating an Unzer Direct Debit Secured instance
var SepaGuaranteedCustomer = heidelpayInstance.SepaDirectDebitGuaranteed()
// Rendering the input field
SepaGuaranteedCustomer.create('sepa-direct-debit-secured', {
  containerId: 'sepa-guaranteed-customer-IBAN'
});
// Creating a customer instance
var Customer = heidelpayInstance.Customer()
// Rendering the customer form
Customer.create({
  containerId: 'customer'
})
// Handling the form's submission
var form = document.getElementById('payment-form-sepa-guaranteed-customer')
form.addEventListener('submit', function(event) {
  event.preventDefault();
  var SepaGuaranteedPromise = SepaGuaranteedCustomer.createResource()
  var customerPromise = Customer.createCustomer()
  Promise.all([SepaGuaranteedPromise, customerPromise])
    .then(function(values) {
    // Success
  })
    .catch(function(error) {
    // Error
  })
});

<form id="payment-form">
  <div id="example-invoice-secured"></div>
  <div id="customer" class="field">
    <!-- The customer form UI element will be inserted here -->
  </div>
  <div class="field">
    <button class="heidelpayUI primary button fluid" type="submit">Pay</button>
  </div>
</form>

// Creating an Unzer instance with your public key
var unzer= new Unzer('s-pub-xxxxxxxxxx');
// Creating a Invoice Guaranteed instance
var InvoiceGuaranteed = heidelpayInstance.InvoiceGuaranteed()
// Creating a customer instance
var Customer = heidelpayInstance.Customer()
// Rendering the customer form
Customer.create({
  containerId: 'customer'
})
// Handle payment form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  var InvoiceGuaranteedPromise = InvoiceGuaranteed.createResource()
  var customerPromise = Customer.createCustomer()
  Promise.all([InvoiceGuaranteedPromise, customerPromise])
    .then(function(values) {
      // Success
    })
    .catch(function(error) {
      // Error
    })
});

<form id="payment-form-sepa-guaranteed-birthday" class="heidelpayUI form" novalidate>
  <div id="sepa-guaranteed-customer-IBAN" class="field">
    <!-- The IBAN field UI Element will be inserted here -->
  </div>
  <div id="customer" class="field">
    <!-- The customer form UI Element will be inserted here -->
  </div>
  <div class="field">
    <button class="heidelpayUI primary button fluid" type="submit">Pay</button>
  </div>
</form>

// Creating an Unzer instance with your public key
var heidelpayInstance = new heidelpay('s-pub-xxxxxxxxxx');
// Creating an Unzer Direct Debit Secured instance
var SepaGuaranteedCustomer = heidelpayInstance.SepaDirectDebitGuaranteed()
// Rendering the input field
SepaGuaranteedCustomer.create('sepa-direct-debit-secured', {
  containerId: 'sepa-guaranteed-customer-IBAN'
});
// Creating a customer instance
var Customer = heidelpayInstance.Customer()
// Load the ID of the customer you want to update
// The customerId string would look similar to s-cst-79b8zf879pp3
var customerId = 's-cst-79b8zf879pp3'
// Apart from updating birthdate, you can also update name and/or address of a customer
// If that is the case, pass 'name' and/or 'address' strings in the array of the `fields` key
var options = {
  containerId: 'customer',
  fields: ['birthdate'], // at least one string required ('birthdate' || 'name' || 'address')
  infoBoxText: 'Your birthdate data', // optional
  showHeader: false, // optional
}
// Rendering the customer update form with birthday field only
Customer.update(customerId, options);

// Handling the form's submission
var form = document.getElementById('payment-form-sepa-guaranteed-birthday')
form.addEventListener('submit', function(event) {
  event.preventDefault();
  var SepaGuaranteedPromise = SepaGuaranteedCustomer.createResource()
  var customerPromise = Customer.updateCustomer()
  Promise.all([SepaGuaranteedPromise, customerPromise])
    .then(function(values) {
    // Success
  })
    .catch(function(error) {
    // Error
  })
});