Shift4 Components are web UI elements that securely collect sensitive information (like card number, expiration, and CVC for card payments) in your payment forms. The use of Shift4 ensures that sensitive payment data never touches your server or your website.

To use Shift4 Components you need to include Shift4.js library and initialize it with your public key:

<script type="text/javascript" src="https://js.dev.shift4.com/shift4.js"></script>

<script type="text/javascript">
  // Initialize Shift4 object with your public key
  var shift4 = Shift4("pu_test_WVMFC9GFuvm54b0uorifKkCh");
</script>

Once the library is configured, there are two ways to use Shift4 Components to collect card data:

• use separate components for number, expiry, and CVC

• use a single component for all card details

Single component for all card details

This approach is the fastest and easiest to implement. It is also preferred when you have limited space for a payment form.

First, you need to create a placeholder tag in the HTML code of your website:

<div id="card"></div>

Then in JavaScript code, you need to create a Single Line and mount it to that placeholder tag:

var card = shift4.createComponent("card").mount("#card");

Later, when all card data have been provided by a customer, you need to create a token from that Single Line:

shift4.createToken(card).then(/*...*/).catch(/*...*/);

Complete and working code can be found in our Single Line example.

Separate components for number, expiry and CVC

When you want full control over your payment form, you can use separate components for each field. This approach requires little more code than using a single component, but it is also fast and easy to implement.

First, you need to create a placeholder tag for each component. To simplify the creation of components, we group these placeholders under one common tag, and we used the data-shift4 attribute to specify a type of component:

<div id="payment-form"></div>
    <div data-shift4="number"></div>
    <div data-shift4="expiry"></div>
    <div data-shift4="cvc"></div>
</div>

Doing it this way allows to create of a component group and automatically creates and mounts all components in that group:

var components = shift4.createComponentGroup().automount("#payment-form");

Later, when all card data have been provided by a customer, you need to create a token from that component group:

shift4.createToken(components).then(/*...*/).catch(/*...*/);

Complete and working code can be found in our Custom Form example.

Creating components manually

An alternative approach to using the data-shift4 attribute and automount method is to manually create each component. To do this, you don't need to have a common parent element, but you need some other way to locate placeholder tags (for example, using the id attribute):

<div id="number"></div>
<div id="expiry"></div>
<div id="cvc"></div>

Then in JavaScript, you need to create a component group and then create and mount each component in that group:

var components = shift4.createComponentGroup();
components.createComponent("number").mount("#number");
components.createComponent("expiry").mount("#expiry");
components.createComponent("cvc").mount("#cvc");

Using separate component for expiration month and year

Another alternative possibility is to use two components for the card expiration date - separate components for expiration month and year.

To do so, you must create two placeholder tags and use component types expiryMonth and expiryYear. It can be done by using data-shift4 attribute and automount() or manual component creation.

Component styling

You can customize the visuals of Shift4 components on your webpage. In order to do that 3 new attributes can be set in options. The options are applicable either to a single component or a component group. They are merged but only for top level attributes, ie.: finalOptions = {...componentGroupOptions, ...componentOptions}.

New attributes added to the options are:

• height - can be used to change height of component's iframe

• style - can be used to change styles; has two nested attributes:

• base - used to defined base styles;

• invalid - used to define styles when input has invalid value (for example invalid card number).

• fonts - can be used to add additional fonts (maps to @font-face from CSS), must be a list of objects with following attributes:

  • family - maps to font-family from CSS;

  • style - maps to font-style from CSS;

  • weight - maps to font-weight from CSS;

  • display - maps to font-display from CSS;

  • src - maps to src from CSS;

  • unicodeRange - maps to unicode-range from CSS.

For defining styles following attributes can be used:

• color - maps to color from CSS;

• backgroundColor - maps to background-color from CSS;

• fontFamily - maps to font-family from CSS;

• fontSize - maps to font-size from CSS;

• fontWeight - maps to font-weight from CSS.

Additionally following pseudo classes are also supported:

• :hover

• :focus

• ::placeholder

let shift4 = Shift4("pk_test_*****");

let options = {
  height: '38px',
  style: {
    base: {
      color: '#44d',
      fontSize: '30px',
      fontFamily: 'Orbitron',
      '::placeholder': {
        color: '#99f'
      },
    },
    invalid: {
      color: '#f00',
      '::placeholder': {
        color: '#f99'
      },
    }
  },
  fonts: [{
    family: 'Orbitron',
    style: 'normal',
    weight: 400,
    display: 'swap',
    src: "url(https://fonts.gstatic.com/s/orbitron/v25/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format('woff2');"
  }]
};

let components = shift4.createComponentGroup(options);
let number = components.createComponent("number").mount("#number");
let expiry = components.createComponent("expiry", "#expiry").mount("#expiry");
let cvc = components.createComponent("cvc").mount("#cvc");