Checkout Express

<div class="ws-checkout mx-auto max-w-lg">
  <div class="rounded-xl border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-card-bg)] p-6">
    <h2 class="text-lg font-semibold text-[var(--ws-checkout-text)]">Express Checkout</h2>
    <div class="mt-4 grid grid-cols-3 gap-3">
      <button type="button" class="flex items-center justify-center gap-2 rounded-lg bg-black px-4 py-3 text-sm font-medium text-white transition hover:opacity-90"> <!-- ws-ok -->
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
        Apple Pay
      </button>
      <button type="button" class="flex items-center justify-center gap-2 rounded-lg bg-white px-4 py-3 text-sm font-medium text-gray-800 shadow ring-1 ring-gray-200 transition hover:bg-gray-50"> <!-- ws-ok -->
        <svg class="h-5 w-5" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
        Google Pay
      </button>
      <button type="button" class="flex items-center justify-center gap-2 rounded-lg bg-[#FFC439] px-4 py-3 text-sm font-medium text-[#003087] transition hover:opacity-90">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M7.076 21.337H2.47a.641.641 0 01-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 00-.607-.541c1.955 3.073-.338 7.26-5.275 7.26h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106H7.076l-.19 1.2a.641.641 0 00.633.74h3.192c.458 0 .847-.334.919-.788l.038-.196.727-4.611.047-.254a.927.927 0 01.919-.788h.578c3.745 0 6.677-1.522 7.532-5.924.357-1.838.172-3.371-.749-4.449z"/></svg>
        PayPal
      </button>
    </div>
    <div class="relative my-6">
      <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-[var(--ws-checkout-border)]"></div></div>
      <div class="relative flex justify-center"><span class="bg-[var(--ws-checkout-card-bg)] px-3 text-xs text-[var(--ws-checkout-text-soft)]">or pay with card</span></div>
    </div>
    <form class="space-y-4" aria-label="Card payment">
      <div>
        <label for="ex-card-number" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Card Number</label>
        <input type="text" id="ex-card-number" name="card-number" autocomplete="cc-number" placeholder="1234 5678 9012 3456" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label for="ex-expiry" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">Expiry</label>
          <input type="text" id="ex-expiry" name="expiry" autocomplete="cc-exp" placeholder="MM/YY" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
        </div>
        <div>
          <label for="ex-cvv" class="block text-sm font-medium text-[var(--ws-checkout-text-soft)]">CVV</label>
          <input type="text" id="ex-cvv" name="cvv" autocomplete="cc-csc" placeholder="123" class="mt-1 block w-full rounded-lg border border-[var(--ws-checkout-border)] bg-[var(--ws-checkout-bg)] px-3 py-2 text-sm text-[var(--ws-checkout-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-checkout-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-checkout-action-bg)]" />
        </div>
      </div>
      <button type="submit" class="w-full rounded-lg bg-[var(--ws-checkout-action-bg)] px-4 py-3 text-sm font-medium text-[var(--ws-checkout-action-text)] transition hover:opacity-90">Pay Now</button>
    </form>
  </div>
</div>