Components

A Component securely collects one piece of sensitive information, such as a card number or CVC. When several components collect details for a single card, a ComponentGroup binds them together.

Use Shift4.createComponent() for a single component that collects all card details, or Shift4.createComponentGroup() to collect them in separate fields.

Component object is used to securely collect sensitive information (like card number or cvc).

Mounts component to placeholder tag located by given selector.

selector | string | Element

Either CSS selector or DOM element that will be used as a mounting point.

Component object on which this method was called

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

Removes any current value from a component.

Component object on which this method was called.

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

card.clear();

When multiple components are required to collect card details for a single card, the ComponentGroup object is used to group them.

Automatically search all tags nested under the tag located by the given selector and create components on all tags with the data-shift4 attribute. The value of that attribute is used to determine the type of the component.

selector | string | Element

Either CSS selector or DOM element that will be used as a starting point when searching for tags with data-shift4 attribute.

ComponentGroup object on which this method was called.

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

Create a new component of a given type and assigns it to this component group.

type | string

Component type to create. It could be one of the following types:

• number - used to collect card numbers
• expiry - used to collect card expiration dates (both month and year)
• cvc - used to collect card security code
• expiryMonth - used to collect card expiration month
• expiryYear - component for collecting the card's expiration year

options | object

Plain object with additional options.

Component object

var components = shift4.createComponentGroup();

var number = components.createComponent("number");				

• Styling -- customize how components look.
• Shift4 object -- tokenize the collected card details.