1
// Create elements
2
const cardNumber = paymentKit.card.createElement('card_pan');
3
const cardExpiry = paymentKit.card.createElement('card_exp');
4
const cardCvc = paymentKit.card.createElement('card_cvc');
5
6
// Mount to DOM containers
7
cardNumber.mount('#card-number');
8
cardExpiry.mount('#card-expiry');
9
cardCvc.mount('#card-cvc');

1
const cardNumber = paymentKit.card.createElement('card_pan', {
2
  style: {
3
    fontSize: '16px',
4
    fontFamily: 'Inter, system-ui, sans-serif',
5
    color: '#1f2937'
6
  },
7
  placeholder: '1234 1234 1234 1234',
8
  onLoaded: () => console.log('Ready'),
9
  onFocusChange: (isFocused) => console.log('Focus:', isFocused)
10
});

1
paymentKit.submit({
2
  fields: {
3
    customer_name: 'Jane Smith',
4
    customer_email: 'jane@example.com',
5
    customer_country: 'US',
6
    customer_zip_code: '94102'
7
  },
8
  paymentMethod: 'card',
9
  onSuccess: (result) => {
10
    console.log('Payment ID:', result.paymentIntentId);
11
    window.location.href = '/success';
12
  },
13
  onError: (errors) => {
14
    // Card errors: errors.card_pan, errors.card_exp, errors.card_cvc
15
    // Form errors: errors.customer_name, errors.customer_email, etc.
16
    // General error: errors.root
17
    console.error(errors);
18
  }
19
});