Method reference

Methods for initializing and using PaymentJs.

Methods

init

PaymentJs.init(publicIntegrationKey, numberDivId, cvvDivId, completeCallback);

Initializes the PaymentJs object for PAN and CVV entry. Pass null for cvvDivId to collect only the card number (PAN-only mode, no CVV field).

Parameters

publicIntegrationKey — the connector’s public integration key (provided to you with your credentials).
numberDivId — the id of the <div> which will contain the primary account number (PAN).
cvvDivId — the id of the <div> which will contain the CVV code, or null for PAN-only mode.
completeCallback(PaymentJs) — a callback function that will receive the initialized PaymentJs as first argument.

initCvvRefresh

PaymentJs.initCvvRefresh(publicIntegrationKey, referenceTransactionId, cvvDivId, completeCallback);
PaymentJs.initCvvRefresh(publicIntegrationKey, paymentToken, cvvDivId, completeCallback);

Initializes the PaymentJs object for CVV refreshing.

Parameters

publicIntegrationKey (string): the connector’s public integration key (provided to you with your credentials).

The selected connector, identified by the publicIntegrationKey,

must use the same customer profile container as the used paymentToken, or
must belong to the same merchant as the connector identified by the referenceTransactionId.

Reference to a register or debit with register transaction for which the CVV will be refreshed:
- referenceTransactionId (string): the referenced transaction ID. - paymentToken (string): the customer profile payment token.
cvvDivId (string): the id of the <div> which will contain the CVV code.
completeCallback (function: (PaymentJs) => void): a callback function that will receive the initialized PaymentJs as first argument.

tokenize

PaymentJs.tokenize(additionalData, successCallback, errorCallback);

Submit the sensitive card information to the vaulting server for tokenization.

Parameters

additionalData (object): an object, may contain the following keys: first_name, last_name, month, year, email, phone_number, company, address1, zip, city, state, country.
successCallback (function: (token, cardData) => void): will be called upon completion, receiving the token (as string) as first argument, and additional cardData as second argument , for example:

{
  "card_type": "visa",
  "full_name": "Alex Smith",
  "bin_digits": "41111111",
  "first_six_digits": "411111",
  "last_four_digits": "1111",
  "month": "9",
  "year": "2031",
  "fingerprint": "46f7adfeb0a123fb8fcbfasdf6171asd6b3dfas44834c"
}

Possible cardType values are: amex, dinacard, diners, discover, elo, jcb, mada, maestro, mastercard, meeza, uatp, unionpay, visa_electron, and visa.

Forward compatibility

Please note that the enumerated list provided above is subject to change or expansion over time. As such, be ready to accommodate and appropriately handle unfamiliar card brands.

errorCallback (function: (errors) => void): called if an error occurs, containing error information. For more details see Error codes.

refreshCvv

PaymentJs.refreshCvv(successCallback, errorCallback);

Submit the CVC/CVV code to the vaulting server.

Parameters

successCallback (function: () => void): will be called upon successful completion.
errorCallback (function: (errors) => void): called if an error occurs, containing error information. For more details see Error codes.

initRiskScript

PaymentJs.initRiskScript(options, completeCallback);

Initialize Risk Scripts. Required for certain types of risk checks, see External risk checks for more details.

Parameters

options (object): An object including the type, e.g. { type: 'forter' }. type can be forter or riskified.
completeCallback (function (...) => void): will be called upon successful completion, parameters depend on type from options.

setNumberStyle

PaymentJs.setNumberStyle(styleObject);

Sets the style of the number field.

Parameters

styleObject (object): an object with CSS properties, for example:

{
  "border-color": "red",
  "font-size": "10px"
}

Additionally, it is possible to style the placeholder of the number field by providing a nested object with CSS properties in the field ::placeholder, e.g.

{
  "border-color": "red",
  "font-size": "10px",
  "::placeholder": {
    "color": "#a00"
  }
}

PCI compliance: no external resource loading

In order to comply with Payment Card Industry (PCI) security standards, we are unable to permit the loading of external resources such as typefaces or background images.

setCvvStyle

PaymentJs.setCvvStyle(styleObject);

Sets the style of the CVV field.

Parameters

styleObject (object): an object with CSS properties, for example:

{
  "border-color": "red",
  "font-size": "10px"
}

Additionally, it is possible to style the placeholder of the CVV field by providing a nested object with CSS properties in the field ::placeholder, e.g.

{
  "border-color": "red",
  "font-size": "10px",
  "::placeholder": {
    "color": "#a00"
  }
}

PCI compliance: no external resource loading

In order to comply with Payment Card Industry (PCI) security standards, we are unable to permit the loading of external resources such as typefaces or background images.

setNumberPlaceholder

PaymentJs.setNumberPlaceholder(placeholderText);

Sets the placeholder text for the number input field.

Parameters

placeholderText (string): text for the placeholder of the number input field.

setCvvPlaceholder

PaymentJs.setCvvPlaceholder(placeholderText);

Sets the placeholder text for the CVV input field.

Parameters

placeholderText (string): text for the placeholder of the CVV input field.

setNumberInputType

PaymentJs.setNumberInputType(inputType);

Sets the type attribute on the number input field.

Parameters

inputType (string): type value (i.e. ‘text’, ‘password’).

setCvvInputType

PaymentJs.setCvvInputType(inputType);

Sets the type attribute on the CVV input field.

Parameters

inputType (string): type value (i.e. ‘text’, ‘password’).

setNumberAttribute

PaymentJs.setNumberAttribute(attribute, value);

Sets an attribute on the number input field.

Parameters

attribute (string): attribute to set (allowed: ‘aria-describedby’, ‘aria-description’, ‘aria-disabled’, ‘aria-errormessage’, ‘aria-invalid’, ‘aria-label’, ‘aria-labelledby’, ‘aria-placeholder’, ‘aria-required’).
value (string): value of the attribute.

setCvvAttribute

PaymentJs.setCvvAttribute(attribute, value);

Sets an attribute on the CVV input field.

Parameters

attribute (string): attribute to set (allowed: ‘aria-describedby’, ‘aria-description’, ‘aria-disabled’, ‘aria-errormessage’, ‘aria-invalid’, ‘aria-label’, ‘aria-labelledby’, ‘aria-placeholder’, ‘aria-required’).
value (string): value of the attribute.

numberOn

PaymentJs.numberOn(event, callbackFunction, { getBinData: boolean });

Attach an event listener for the number input field.

For more details see Event listening.

If getBinData is set to true, the result will be asynchronous (adding a backend call) and the BIN data will be attached as the binData key to the response data.

{
  "binData": {
    "cardBrand": "VISA",
    "fundingSource": "CREDIT",
    "issuer": "VISA Bank 1",
    "normalizedCardBrand": "visa",
    "subBrand": null
  },
  ...
}

cardBrand is the brand as reported by the BIN data source. normalizedCardBrand is the same brand normalized to the card type identifiers also used by cardType (see the list below), or null if the brand cannot be resolved to one of them. binData is null while fewer than six digits have been entered or when no BIN data is found.

Parameters

event (string): the number input event to attach the callbackFunction to. One of input, focus, blur, mouseover, mouseout, enter, esc, tab, or shift-tab.
callbackFunction (function: (event) => void): a callback that receives data about the event, for example:

{
  "cardType": "visa",
  "cvvLength": 3,
  "numberLength": 12,
  "validCvv": true,
  "validNumber": true
}

Possible cardType values are: amex, dinacard, diners, discover, elo, jcb, mada, maestro, mastercard, meeza, uatp, unionpay, visa_electron, and visa.

Forward compatibility

Please note that the enumerated list provided above is subject to change or expansion over time. As such, be ready to accommodate and appropriately handle unfamiliar card brands.

cvvOn

PaymentJs.cvvOn(event, callbackFunction);

Attach an event listener for the CVV input field.

For more details see Event listening.

Parameters

event (string): the CVV input event to attach the callbackFunction to. One of input, focus, blur, mouseover, mouseout, enter, esc, tab, or shift-tab.
callbackFunction (function: (event) => void): a callback that receives data about the event, for example:

{
  "cardType": "visa",
  "cvvLength": 3,
  "numberLength": 12,
  "validCvv": true,
  "validNumber": true
}

Possible cardType values are: amex, dinacard, diners, discover, elo, jcb, mada, maestro, mastercard, meeza, uatp, unionpay, visa_electron, and visa.

Forward compatibility

Please note that the enumerated list provided above is subject to change or expansion over time. As such, be ready to accommodate and appropriately handle unfamiliar card brands.

setRequireCardHolder

PaymentJs.setRequireCardHolder(requireCardHolder);

Disable the requirement of passing a card-holder name in the additionalData object of the tokenize method.

Parameters

requireCardHolder (boolean): a boolean whether a card-holder name is required when calling tokenize.

enableAutofill

PaymentJs.enableAutofill();

Enables autofill handling.

For details see Auto-fill card data.

onAutofill

PaymentJs.onAutofill(autofillCallback);

Registers an event handler to receive auto filled data.

For details, see Auto-fill card data.

Parameters

autofillCallback (function: (data) => void): a callback that is called when card-data autofill is triggered and receives data about the event, for example:

{
  card_holder: "Alex Smith",
  month: 09,
  year:  2031,
}

Deprecated methods

onNumberInput

PaymentJs.onNumberInput(callbackFunction);

This function is deprecated in favor of numberOn('input', callbackFunction).

onCvvInput

PaymentJs.onCvvInput(callbackFunction);

This function is deprecated in favor of cvvOn('input', callbackFunction).