SecureFields SDK Events

Listen to events using secureForm.on(eventName, handler).

For the full type definitions see SecureFieldsEventsPayload and SecureFieldsChangeEventPayload.

Events Reference

Event	Description	Payload
ready	The SDK has been loaded and is ready to use.	void
success	The form was submitted successfully.	vault_form_token: string, card?: CardInfo, birth_date?: string (Oney private cards only)
error	An error occurred while using the SDK.	message: string, code?: string, payload?: any
formValid	Form validation state changed. Fired once at init with hasErrors: true.	hasErrors: boolean, fields?: FieldsState
focus	A field was focused.	SecureFieldsChangeEventPayload
blur	A field was blurred/unfocused.	SecureFieldsChangeEventPayload
autocomplete	A field was autocompleted.	SecureFieldsChangeEventPayload
keyup	A key was pressed in a field.	SecureFieldsChangeEventPayload
keydown	A key was pressed down in a field.	SecureFieldsChangeEventPayload
change	Any field changed (aggregates focus, blur, keyup, keydown, autocomplete).	SecureFieldsChangeEventPayload
brandDetected	A card brand was detected from the card number.	brands?: Brand[]
brandUserSelection	The user manually selected a brand (co-brand case).	matchedBrands: Brand[], selected: Brand
brandNotDetected	No brand could be detected from the card number.	void

Usage Example

// Enable submit button once the SDK is ready
secureForm.on('ready', () => {
  document.getElementById('pay-btn').disabled = false;
});

// Toggle the submit button based on overall form validity
secureForm.on('formValid', ({ hasErrors }) => {
  document.getElementById('pay-btn').disabled = hasErrors;
});

// Display SDK error messages
secureForm.on('error', ({ code, message }) => {
  document.getElementById('error-box').textContent = `[${code}] ${message}`;
});

// Show brand logo as the user types their card number
secureForm.on('brandDetected', ({ brands }) => {
  const primary = brands?.[0];
  if (primary) {
    document.getElementById('brand-logo').src = `/img/brands/${primary}.svg`;
  }
});

// Handle co-brand selection (e.g. CB / VISA dual-brand cards)
secureForm.on('brandUserSelection', ({ selected, matchedBrands }) => {
  console.log('User selected:', selected, 'from', matchedBrands);
});

// Real-time field validation feedback
secureForm.on('change', ({ fieldName, valid }) => {
  const el = document.getElementById(`${fieldName}-error`);
  if (el) el.hidden = valid ?? true;
});

// Draw the focus indicator on the field's container: the input inside the frame has none
secureForm.on('focus', ({ fieldName }) => {
  document.getElementById(`${fieldName}-container`)?.classList.add('is-focused');
});
secureForm.on('blur', ({ fieldName }) => {
  document.getElementById(`${fieldName}-container`)?.classList.remove('is-focused');
});

// On successful tokenization — forward vault_form_token to your backend
secureForm.on('success', ({ vault_form_token, card }) => {
  console.log('Card:', card?.bin, '****', card?.last_four_digits);
  // Pass vault_form_token to your payment creation endpoint
  sendToBackend(vault_form_token);
});

Note

The success event fires alongside the promise returned by submit() — both carry the same vault_form_token and card data. Use whichever fits your flow.