Set custom CSS styles when generating the card component

Overview

Set up the 2Pay.js payments client to accept payments on your website. To collect payments you need to create a payment form, tokenize sensitive card information, and use that token to create a charge.

See the steps below on how to set a custom CSS when generating the card component.

Use case

1. Create a form with id="payment-form":

<form type="post" id="payment-form">
  <div class="form-group">
    <label for="name" class="label control-label">Name</label>
    <input type="text" id="name" class="field form-control">
  </div>
  <button class="btn btn-primary" type="submit">Generate token</button>
</form>

2. Inside the form, add an element with id="card-element". The form should now look like this:

<form type="post" id="payment-form">
  <div class="form-group">
    <label for="name" class="label control-label">Name</label>
    <input type="text" id="name" class="field form-control">
  </div>

  <div id="card-element">
    <!-- A TCO IFRAME will be inserted here. -->
  </div>

  <button class="btn btn-primary" type="submit">Generate token</button>
</form>

3. Include the 2Pay.js drop-in payments client JavaScript:

<script type="text/javascript" src="https://2pay-js.2checkout.com/v1/2pay.js"></script>

4. Insert the following configuration JavaScript to set the custom CSS when adding the card component, and generate the token request:

window.addEventListener('load', function() {
  // Initialize the JS Payments SDK client.
  let jsPaymentClient = new  TwoPayClient('RDGM');

  // Define a custom JSON Style
  let style = {
    margin                 : 0,
    fontFamily             : '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
    fontSize               : '1rem',
    fontWeight             : '400',
    lineHeight             : '1.5',
    color                  : '#212529',
    textAlign              : 'left',
    backgroundColor        : 'pink',
    '*'                    : {
      'boxSizing': 'border-box'
    },
    '.no-gutters'          : {
      marginRight: 0,
      marginLeft : 0
    },
    '.row'                 : {
      display : 'flex',
      flexWrap: 'wrap'
    },
    '.col'                 : {
      flexBasis: '0',
      flexGrow : '1',
      maxWidth : '100%',
      padding  : '.5rem 0 .5rem 0',
      position : 'relative',
      width    : '100%'
    },
    'div'                  : {
      display: 'block'
    },
    label                  : {
      display     : 'inline-block',
      marginBottom: '.5rem',
      color       : 'green',
      fontWeight  : '900'
    },
    'input'                : {
      overflow       : 'visible',
      margin         : 0,
      fontFamily     : 'inherit',
      display        : 'block',
      width          : '100%',
      height         : 'calc(1.5em + .75rem + 2px)',
      padding        : '.375rem .75rem',
      fontSize       : '1rem',
      fontWeight     : '400',
      lineHeight     : '1.5',
      color          : 'red',
      backgroundColor: '#eee',
      backgroundClip : 'padding-box',
      border         : '1px solid #ced4da',
      borderRadius   : '.25rem',
      transition     : 'border-color .15s ease-in-out,box-shadow .15s ease-in-out'
    },
    '.card-expiration-date': {
      paddingRight: '.5rem'
    }
  };
  
  // Create the component that will hold the card fields.
  let component = jsPaymentClient.components.create('card', style);
  
  // Mount the card fields component in the desired HTML tag. This is where the iframe will be located.
  component.mount('#card-element');

  // Handle form submission.
  document.getElementById('payment-form').addEventListener('submit', (event) => {
    event.preventDefault();
    
    // Extract the Name field value
    const billingDetails = {
      name: document.querySelector('#name').value
    };

    // Call the generate method using the component as the first parameter
    // and the billing details as the second one
    jsPaymentClient.tokens.generate(component, billingDetails).then((response) => {
      console.log(response.token);
    }).catch((error) => {
      console.error(error);
    });
  });
});

5. Place the order using the generated token. 

Demo

After performing the steps above, your implementation should look like this: