Method reference

Methods for initializing and using PaymentJs.

init

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

Initializes the PaymentJs object, pass the connector's public integration key publicIntegrationKey (provided to you with your credentials), the id of the <div>s which will contain the number numberDivId and CVV code cvvDivId, and a completeCallback function. This function will receive the PaymentJs object as first argument.

initCvvRefresh

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

Initializes the PaymentJs object, pass the connector's public integration key publicIntegrationKey (provided to you with your credentials), the referenced transaction ID referenceTransactionId, the id of the <div> which will contain the CVV code cvvDivId, and a completeCallback function. This function will receive the PaymentJs object as first argument.

tokenize

PaymentJs.tokenize(additionalData, successCallback, errorCallback);

This submits the sensitive card information to the vaulting server.

additionalData is an object, may containing the following keys: first_name, last_name, month, year, email, phone_number, company, address1, zip, city, state, country.

successCallback(token, cardData) will be called upon completion, receiving the token (as string) as first argument, and additional card data as second argument.

Example card data

{
  "card_type": "visa",
  "full_name": "Alex Smith",
  "bin_digits": "41111111",
  "first_six_digits": "411111",
  "last_four_digits": "1111",
  "month": "12",
  "year": "2028",
  "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 is called if an error occurs, containing error information (see above).

refreshCvv

PaymentJs.refreshCvv(successCallback, errorCallback);

This submits the CVC/CVV code to the vaulting server.

successCallback will be called upon successful completion

errorCallback is called if an error occurs, containing error information (see above).

initRiskScript

PaymentJs.initRiskScript(options, completeCallback);

Initialize Risk Scripts required for certain types of risk checks like the Kount risk check.

The options parameter should be an object including the type, e.g. { type: 'kount' }.

completeCallback will be called upon successful completion.

setNumberStyle

PaymentJs.setNumberStyle(styleObject);

Sets the style of the number field.

The styleObject parameters should be an object with CSS properties, e.g.

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

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.

The styleObject parameters should be an object with CSS properties, e.g.

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

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,

setCvvPlaceholder

PaymentJs.setCvvPlaceholder(placeholderText);

Sets the placeholder text for the CVV input field,

numberOn

PaymentJs.numberOn(event, callbackFunction);

Attach an event listener for the number input field.

The callbackFunction will receive data about the event, e.g.

Data object

{
  "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.

For details see Event listening.

cvvOn

PaymentJs.cvvOn(event, callbackFunction);

Attach an event listener for the CVV input field.

The callbackFunction will receive data about the event, e.g.

Data object

{
  "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.

For details see Event listening.

setRequireCardHolder

PaymentJs.setRequireCardHolder(boolean);

With this you can disable the requirement of passing a card-holder name within the additionalData object.

enableAutofill

PaymentJs.enableAutofill();

Enables the autofill handling, see description in chapter Auto-fill card data.

onAutofill

PaymentJs.onAutofill(data);

Registers an event handler to receive auto filled data, see description in chapter Auto-fill card data.

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).