import React, { useEffect } from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'

const FinixForm = () => {
  useEffect(() => {
    const onSubmit = () => {
      form.submit('sandbox', 'APgPDQrLD52TYvqazjHJJchM', function (err, res) {
        // get token ID from response
        const tokenData = res.data || {};
        const token = tokenData.id;
        
        alert("Your token ID is: " + token);
      });
    }
    
    const form = Finix.CardTokenForm('form', {
      showAddress: true,
      onSubmit,
    });
  }, [])
  
  return (
    <div id='form' />
  );
}

ReactDOM.render(<FinixForm />, document.getElementById('app'));