WooCommerce checkout

<form id="checkout" class="demo demo--wide" novalidate>
  <p class="demo-chip">Checkout · billing details</p>
  <div class="demo-grid-2">
    <div class="demo-field">
      <label class="demo-label" for="first">First name</label>
      <input id="first" class="demo-input" value="Lab" autocomplete="off">
    </div>
    <div class="demo-field">
      <label class="demo-label" for="last">Last name</label>
      <input id="last" class="demo-input" value="Buyer" autocomplete="off">
    </div>
  </div>
  <div class="demo-field">
    <label class="demo-label" for="email">Email</label>
    <input id="email" class="demo-input" value="buyer@example.com" autocomplete="off">
  </div>
  <div class="demo-field" id="phone-field">
    <label class="demo-label" for="billing_phone">Phone <span class="demo-hint">· the store's own field, untouched</span></label>
    <input id="billing_phone" class="demo-input" autocomplete="off">
    <p id="error" class="demo-error" role="alert"></p>
  </div>
  <div class="demo-row">
    <button class="demo-btn" type="submit">Place order</button>
    <span id="saved" class="demo-kv" hidden></span>
  </div>
</form>

import { createPhoneInput } from 'https://www.devix.pk/cdn/oss/phone-field-for-woocommerce@1.0.0/assets/vendor/phone-input/index.js';

const input = document.getElementById('billing_phone');
const error = document.getElementById('error');
const saved = document.getElementById('saved');

// Exactly what the plugin does on a WooCommerce checkout: overlay layout, so the store's
// input keeps its own styling, and the country button floats inside it.
const phone = createPhoneInput(input, { initialCountry: 'ae', layout: 'overlay' });

document.getElementById('checkout').addEventListener('submit', (event) => {
  event.preventDefault();
  if (!phone.isValid()) {
    error.textContent = phone.getValidationMessage() || 'Enter a phone number.';
    saved.hidden = true;
    return;
  }
  // The server saves one format, whatever the shopper typed.
  error.textContent = '';
  saved.hidden = false;
  saved.textContent = `Saved on the order: ${phone.getNumber('INTERNATIONAL')}`;
});

@import url('https://www.devix.pk/cdn/oss/phone-field-for-woocommerce@1.0.0/assets/vendor/phone-input/phone-input.min.css');

/* The plugin only moves the label clear of the country button; everything else is the theme's. */
#phone-field .demo-label { transition: none; }
#billing_phone { font-variant-numeric: tabular-nums; }