Skip to main content
knowledgecenter.2checkout.com

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://js.2pay.2checkout.com/v1/"></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: