Control format payment-card

default.control

Card number input control

If set as format for a property, treats the property as a card’s long number (PAN).

Output a date control with the name "foo"

{{control "foo" control-format="payment-card"}}

or just

{{control "foo"}}

if the format property for the "foo" property in the model schema has been set to "payment-card"

Allows input to contain both spaces and dashes.

Validates number entered against acceptable card types, displaying relevant errors.

Adds a class representing cardtype matched.

Ensures that a valid CCV (CVV/SCV) is set dependent on the card type.

Currently, the format expects the CCV property to be named ccv.

To change the acceptable card types, send as part of BauplanData:

var BauplanData = {
    …
    clientdefaults: {
        cardtypes: [
            "visa",
            "mastercard",
            "amex"
        ]
    }

Error codes

  • payment-card.undefined-card-type
  • payment-card.invalid-card-type
  • payment-card.invalid-length
  • payment-card.invalid-luhn
Source:
See:

Members

(inner) acceptable

List of acceptable card types

By default

  • visa
  • mastercard

To override, see payment-card

Source:

(inner) additionalfields

List of card types which require additional fields (start date, issue number)

  • maestro
Source:

(inner) cardtypes

Card types object

Types defined

  • amex
  • dinersclubcarteblanche
  • dinersclubinternational
  • jcb
  • laser
  • visaprepaid
  • visaelectron
  • visadebit
  • visa
  • mastercard
  • maestro
  • discover
Properties:
Name Type Attributes Default Description
pattern regex

a regex matching the card type
length number | array

acceptable lengths of number for card type
ccv number <optional>
 3

How many digits the security code (CCV|CVV|SC) should be
Source:

Methods

(inner) getCardType(input) → {string}

Parameters
Name Type Description
input number

Card long number
Source:
Returns

Card type

Type
string

(inner) getValidCardType(input) → {boolean}

Parameters
Name Type Description
input number

Card long number
Source:
Returns

Whether rard type is acceptable

Type
boolean

(inner) getValidLength(input, cardtype) → {boolean}

Parameters
Name Type Description
input number

Card long number
cardtype string

Card type
Source:
Returns

Whether input is of correct length

Type
boolean

(inner) getValidLuhn(input) → {boolean}

Parameters
Name Type Description
input number

Card long number
Source:
Returns

Whether input passes Luhn check

Type
boolean