Skip to content
JS Reference
Last updated

Shift4 object

Shift4 object is the main entry point to all Shift4.js functionalities. Create one by initializing Shift4.js.

createComponent(type, options = {})

Create a new component of the specified type.

Parameters

type | string

Component type to be created. It could be a card - a single component to collect all card details. To collect card details in separate fields, use ComponentGroup.createComponent().

options | object

Plain object with additional options.

Result

Component object

Example

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

createComponentGroup()

Create a new grouping object that will be used to create multiple related components, such as number, expiry and cvc components that will be used together to collect details for a single card.

Result

ComponentGroup object

Example

var components = shift4.createComponentGroup();

createToken(component, data = {})

Tokenize card data from a given component or component group by sending it to the "create token" API method.

Parameters

component | Component | ComponentGroup

A single component or a group of components from which sensitive card data will be tokenized.

data | object

Additional data that will be included in the tokens API request. The "create token" API method lists all permitted keys.

For security reasons, this parameter cannot be used to send the following fields in the request: number, expMonth, expYear and cvc. Values of these fields must be collected using components.

Result

Promise object

Example

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

function onFormSubmit() {
	shift4.createToken(card)
			.then(tokenCreatedCallback)
			.catch(errorCallback);
}

verifyThreeDSecure(request)

Starts a 3D Secure process.

Depending on the card and the card's issuer, this may result in the 3D Secure challenge being displayed in an iframe or popup window.

Parameters

request | object

The request object will be sent to the API. The following keys are allowed:

  • card (string) - a token identifier (generated by the createToken() method) or a card identifier (created using the Cards API).
  • amount (integer) - the amount in minor units of the given currency (for example, 10€ is represented as "1000" and 10¥ is represented as "10"), which must match the value that will be used to create a Charge using API
  • currency (string) - the currency, represented as a three-letter ISO currency code, must match the value later used to create a Charge using API
  • merchantAccountId (string, optional) - the merchant account identifier that will be used to complete the 3D Secure process
  • challengeIndicator (string, optional) - this field is used to express preference when it comes to the 3DS flow. Possible values:
    • no_preference
    • no_challenge_requested - merchant prefers frictionless flow
    • challenge_requested_requestor_preference - merchant strongly prefers challenge flow
    • challenge_requested_mandate - merchant strongly prefers challenge flow due to PSD2 requirements

Result

Promise object

Example

function tokenCreatedCallback(token) {
	var request = {
		card: token.id,
		amount: 2499,
		currency: 'USD',
	};

	shift4.verifyThreeDSecure(request)
		.then(threeDSecureCompletedCallback)
		.catch(errorCallback);
}

Next steps

  • Components -- mount components and collect card details.
  • Styling -- customize how components look.

Getting started

Components