Ctrlk
Sign up for free
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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 the payment form

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

Add card element placeholder

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 client

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

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

Initialize client, define style, create component, and generate token

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('AVLRNG');

  // 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

Place the order using the generated token.

Demo

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

HTML

<div class="container">
  <div class="row justify-content-md-center mt-5">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Implementation for the 2Pay.js client with style injection</h5>

          <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>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

JavaScript (alternate demo script)

PreviousSet the language when generating the card componentNextPreload iframe to increase loading speed

Last updated

Was this helpful?