Connect once.
Expand anywhere.

const { Hellgate } = window;
const client = await Hellgate.init('d5529f03-e84a-4a43-867c-b3412a097e63', {
  base_url: 'https://sandbox.hellgate.io',
});

// get the handler for card payments
const cardHandler = await client.use('CARD');

// create the one-line form
const cardForm = cardHandler.createForm({
  // customize styles
  style: {
    fonts: ['https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap'],
    base: {
      fontFamily: 'Nunito, sans-serif',
      color: '#111',
      fontSize: '16px',
      '::placeholder': { color: '#6b7280' },
    },
  },
});
const cardholderField = cardHandler.createTextField();

// and mount it
cardForm.mount('#my-form-element');
cardholderField.mount('#cardholder-element');

// use an existing button to process the data
const submitButton = document.getElementById('my-submit-button');

submitButton.addEventListener('click', async () => {
  try {
    const result = await cardHandler.process({
      // the value from cardholderField will be extracted automatically
      cardholder_name: cardholderField,
    });

    const resultElement = document.getElementById('result');
    const errorElement = document.getElementById('error');

    // handle the result
    if (result.status === 'success' || result.status === 'pending') {
      resultElement.textContent = 'Processing has been successfully completed';
      errorElement.textContent = '';
    } else {
      // processing failed, failure reason could be found in the data attribute
      resultElement.textContent = '';
      errorElement.textContent = result.data.reason;
    }
  } (err) {
    // something went wrong before processing could begin (e.g., a network issue or an internal backend error)
  }
});