Payment fields

<div id="card"></div>
<button id="pay" disabled>Pay</button>

<script src="https://js.wajub.com"></script>
<script>
const sessionId = 'YOUR_SESSION_TOKEN';

const factory = wajub.components(sessionId, {
  locale: 'fr',
  componentOrigin: 'https://shop.example.com',
  appearance: { primaryColor: '#2563eb', borderRadius: '12px', labels: 'floating' },
});

const card = factory.create('card')
  .on('change', (e) => { document.getElementById('pay').disabled = !e.complete; })
  .on('focus', () => console.log('focused'))
  .on('blur', () => console.log('blurred'))
  .on('success', (txn) => console.log('paid', txn))
  .on('error', (err) => console.error(err.code))
  .mount('#card');

document.getElementById('pay').onclick = () =>
  wajub.confirmPayment({ sessionId, components: card });
</script>

// Address only
factory.create('address', {
addressMode: 'shipping',
collectName: true,
fields: { phone: 'auto' },
}).mount('#address');

// Payment with inline address
factory.create('payment', {
collectAddress: 'shipping',
collectName: true,
layout: 'tabs',
}).mount('#payment');

component.on('change', (e) => {
console.log('complete:', e.complete, 'empty:', e.empty);
if (e.error) console.log(e.error.message);
if (e.value) console.log('address:', e.value); // address component
});