jQuery toggleClass example

Toggle class name on click in jQuery

by ruhul105

HTML

<script src="https://js.tilled.com/v2"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

const createTilledForm = async () => {
    const tilled = new Tilled(
      'pk_4qZi2CWFbf1ukCpKsBpUaIwxebNF7Nrp1FdtDSoEUS3oUEOoMaiZRckeuj3Qq3RmoQKrWnqPTKgxmakgUgAWgYlSdEpiH8VUW8hC',
      'acct_c94RVLuuLLpiV36UygNoc',
      { sandbox: true }
    );
    console.log('tilled:', tilled);
    const form = await tilled.form({
      payment_method_type: 'card',
    });
    const fieldOptions = {
      styles: {
        base: {
          fontFamily: 'Helvetica Neue, Arial, sans-serif',
          color: '#304166',
          fontWeight: '400',
          fontSize: '16px',
        },
        invalid: {
          ':hover': {
            textDecoration: 'underline dotted red',
          },
        },
        valid: {
          color: '#00BDA5',
        },
      },
    };

    form.createField('cardNumber', fieldOptions).inject('#card-number-element');
    // Example of providing selector instead of using inject()
    form.createField('cardExpiry', {
      ...fieldOptions,
      selector: '#card-expiration-element',
    });
    form.createField('cardCvv', fieldOptions).inject('#card-cvv-element');

    await form.build();
  };
  
  createTilledForm()