create_customer​

{{#form 'create_customer'}}
  <div class="account">
    <label for="email">{{ t 'user.username' }}</label>
    <input type="text" name="customer[email]" placeholder="{{ t 'user.username' }}" />
  </div>
  <div class="password">
    <label for="password">{{ t 'user.password' }}</label>
    <input type="password" name="customer[password]" placeholder="{{ t 'user.password' }}" />
  </div>
  {{#if form.registerConfig.checkTag}}
    <div class="verifycode">
      <input type="text" name="customer[verifycode]" placeholder="{{ t 'user.code' }}" />
      <button class="verifycode-button">{{ t 'user.send' }}</button>
    </div>
  {{/if}}
  {{#if form.registerConfig.firstNameCheck}}
    <div class="first-name">
      <label for="first-name">{{ t 'user.firstName' }}</label>
      <input type="text" name="customer[first_name]" placeholder="{{ t 'user.firstName' }}" />
    </div>
  {{/if}}
  {{#if form.registerConfig.lastNameCheck}}
    <div class="last-name">
      <label for="last-name">{{ t 'user.lastName' }}</label>
      <input type="text" name="customer[last_name]" placeholder="{{ t 'user.lastName' }}" />
    </div>
  {{/if}}
  {{#if form.registerConfig.birthdayCheck}}
    <div class="birthday">
      <label for="birthday">{{ t 'user.birthday' }}</label>
      <input type="date" name="customer[birthday]" placeholder="{{ t 'user.birthday' }}" />
    </div>
  {{/if}}
  <div class="age">
    <label for="age">{{ t 'user.age' }}</label>
    <input type="text" name="attribute[age]" placeholder="{{ t 'user.age' }}" />
  </div>
  <div class="accepts-marketing">
    <input type="checkbox" name="customer[accepts_marketing]" value="true">
    <label for="accepts-marketing">Subscribe to email marketing</label>
  </div>
  <div class="submit">
    <input class="submit-button" type="submit" value="{{ t 'user.signUp' }}">
  </div>
{{/form}}

class Register {
  constructor() {
    this.form = document.querySelector('#create-customer-form');
    this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
    this.verifyCodeButton = this.form.querySelector('.verifycode-button');
    this.verifyCodeButton.addEventListener(
      'click', this.onSendVerifyCodeHandler.bind(this)
    );
    this.register = new window.Shopline.customerAccount.Register(this.form)
  }
  // Sending email or SMS verification code
  onSendVerifyCodeHandler(e) {
    e.preventDefault();
    if (this.verifyCodeButton.getAttribute('aria-disabled') === 'true') return;
    this.verifyCodeButton.setAttribute('aria-disabled', true);
    this.register.sendVerifyCode()
      .then(response => {
        if (response.errorMessage) {
          this.verifyCodeError = true;
          // Handling send failure exception scenarios
        }
      })
      .finally(() => {
        if (!this.verifyCodeError) {
          this.verifyCodeButton.removeAttribute('aria-disabled');
        }
      })
  }
  // Registration Logic
  onSubmitHandler(e) {
    e.preventDefault();
    this.register.submit()
      .then(response => {
        window.location.href = '/user/center';
      })
      .catch(error => {
        // Handling registration failure exception scenarios
      })
  }
}
// Initialize user login registration JS SDK
window.Shopline.loadFeatures(
  [
    {
      name: 'customer-account-api',
      version: '0.3'
    }
  ],
  function(error) {
    if (error) {
      throw error;
    }
    new Register();
  }
);