Skip Navigation

Payments

The Payment components offer users one or more methods of entering credit card and/or other payment information.

Available in React

Standard Credit Card Payment


Examples

Examples

Standard Credit Card Fields with Address

This version is identical to the standard credit card payment example, but it also includes input fields for capturing the user’s address.

CREDIT CARD INFORMATION
BILLING ADDRESS


When to Use

  • Users are required to enter an address along with the credit card information.

Multiple Payment Options (Accordion)

This version allows users to choose from a small, limited set of accepted payment types.

Phasellus cursus purus eu varius finibus. Praesent pretium nisi est, nec aliquet nulla sollicitudin eget. Maecenas lacinia mi in neque scelerisque.

CVV Security Code

Find the 3-digit
security code on
the back of your
credit card, by the
signature line, or
on the front of
your Amex card, by the card number.


When to Use

  • Users can select a payment type other than credit card.
  • There is a relatively small number of options from which to choose (less than 5).

When Not to Use

  • When only one category is offered (for example, the user can only pay by credit card).
  • When users can combine multiple payment options.

Multiple Payment Options (Select)

This version allows users to choose from a dropdown of accepted payment types.

Phasellus cursus purus eu varius finibus. Praesent pretium nisi est, nec aliquet nulla sollicitudin eget. Maecenas lacinia mi in neque scelerisque.


When to Use

  • There are more than four non-credit card payment types from which to choose.
  • There are space constraints and using a select (dropdown) is preferable to the accordion version.

Unified Credit Card Fields

This example streamlines the process by auto-advancing the user through the input fields.

CVV Security Code

Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec.


When to Use

  • This version is recommended for touch interfaces, at small and extra small breakpoint sizes.

Currency Input

Currency Inputs capture monetary values and have display options that account for localization.


Developer Notes

Card Number

A Card Number Input is created using the class .spark-payment--card-number. It is then instantiated using new Spark.Payments.CardNumber(el). The following options may be passed when using new Spark.Payments.CardNumber(el, {});:

Name Type Default Description
validate function null A function to run to validate the state of the input. It should call onValidate with the parameters outlined below.
validatePattern string null If supplied, this regular expression pattern will be used in the default validate method to determine if an input is in a valid state.
onValidate function noop() A callback function run after validation has completed. Callback arguments are isValid, newValue, instance.
onInput function noop() A callback function run when the input value changes.
onFocus function noop() A callback function run when the input gains focus.
onBlur function noop() A callback function run when the input loses focus.
onInvalid function noop() A callback function that runs the moment the input becomes invalid.
onValid function noop() A callback function that runs the moment the input becomes valid.
cardTypes object null Configurations for extending or overwriting supported card types.
disableCardDefaults array null An array of default card types that should be disabled.
disableAllCardDefaults boolean false Determines whether all default card types should be disabled. If set to true, at least one card type has to be provided using the cardTypes option.
useLuhnTest boolean true Determines whether to use the Luhn algorithm as part of basic validity test.

The Card Number Input provides mechanisms to get and set values with or without formatting, and with additional checks for validity. For all available methods and full API, refer to the component code on Bitbucket. For detailed usage around manipulating supported card types with the cardTypes and disableCardDefaults params, refer to Advanced Usage.

<div class="col-xs-12 col-md-8 col-xl-6">
  <label class="spark-payment--card-number">
    <div aria-hidden="true" class="spark-payment__card-type"><i class="spark-icon-credit-card spark-icon--fill spark-icon--md"></i></div>
    <input class="spark-input__field" name="number" type="phone" placeholder="0000 0000 0000 0000" role="textbox" data-novalidate>
    <span class="spark-label">Credit Card Number</span>
  </label>
</div>

<style type="text/css">
  
</style>
var cardNumberEl = document.querySelector('.spark-payment--card-number');
var cardNumber = new Spark.Payments.CardNumber(cardNumberEl);

Card Number with Error

<div class="col-xs-12 col-md-8 col-xl-6">
  <label class="spark-payment--card-number">
    <div aria-hidden="true" class="spark-payment__card-type"><i class="spark-icon-credit-card spark-icon--fill spark-icon--md"></i></div>
    <input class="spark-input__field" name="number" type="tel" placeholder="0000 0000 0000 0000" role="textbox">
    <span class="spark-label">Credit Card Number</span>
  </label>
</div>

<style type="text/css">
  
</style>
var cardNumberEl = document.querySelector('.spark-payment--card-number');
var cardNumber = new Spark.Payments.CardNumber(cardNumberEl, {
  onInput: function() {
    if (this.type) {
      this.setSuccess(this._cardTypes[this.type].name);
    } else if (this.value) {
      this.setError('Card type not recognized');
    } else {
      this.setError('Card Number is Required');
    }
  }
});

cardNumber.setError('Card type not recognized');

Card Expiration

A Card Expiration Date Input is created using the class .spark-payment--expiration. It is then instantiated using new Spark.Payments.CardExpiration(el). The following options may be passed when using new Spark.Payments.CardExpiration(el, {});:

Name Type Default Description
validate function null A function to run to validate the state of the input. It should call onValidate with the parameters outlined below.
validatePattern string null If supplied, this regular expression pattern will be used in the default validate method to determine if an input is in a valid state.
onValidate function noop() A callback function run after validation has completed. Callback arguments are isValid, newValue, instance.
onInput function noop() A callback function run when the input value changes.
onFocus function noop() A callback function run when the input gains focus.
onBlur function noop() A callback function run when the input loses focus.
onInvalid function noop() A callback function that runs the moment the input becomes invalid.
onValid function noop() A callback function that runs the moment the input becomes valid.

The Card Expiration Input provides mechanisms to get and set values with or without formatting, and with additional checks for validity. For all available methods and full API, refer to the component code on Bitbucket.

<div class="col-xs-12 col-md-8 col-xl-6">
  <label class="spark-payment--expiration">
    <input class="spark-input__field" name="expiration" type="tel" minlength="7" pattern="(0[1-9]|1[0-2]) - \d\d" placeholder="MM - YY" role="textbox" data-novalidate>
    <span class="spark-label">Expiration</span>
  </label>
</div>

<style type="text/css">
  
</style>
var expirationEl = document.querySelector('.spark-payment--expiration');
var expiration = new Spark.Payments.CardExpiration(expirationEl);

Card Expiration with Error

<div class="col-xs-12 col-md-8 col-xl-6">
  <label class="spark-payment--expiration">
    <input class="spark-input__field" name="expiration" type="tel" minlength="7" pattern="(0[1-9]|1[0-2]) - \d\d" placeholder="MM - YY" role="textbox">
    <span class="spark-label">Expiration</span>
  </label>
</div>

<style type="text/css">
  
</style>
var expirationEl = document.querySelector('.spark-payment--expiration');
var expiration = new Spark.Payments.CardExpiration(expirationEl, {
  onValid: function() {
    this.clearMessages();
  },
  onInvalid: function() {
    this.setError('Invalid Expiration');
  }
});

expiration.setError('Invalid Expiration');

Card Security Code (CVV)

A Card Security Code Input is created using the class .spark-payment--card-security-code. It is then instantiated using new Spark.Payments.CardSecurityCode(el). The following options may be passed when using new Spark.Payments.CardSecurityCode(el, {});:

Name Type Default Description
validate function null A function to run to validate the state of the input. It should call onValidate with the parameters outlined below.
validatePattern string noop() If supplied, this regular expression pattern will be used in the default validate method to determine if an input is in a valid state.
onValidate function noop() A callback function run after validation has completed. Callback arguments are isValid, newValue, instance.
onInput function noop() A callback function run when the input value changes.
onFocus function noop()ll A callback function run when the input gains focus.
onBlur function noop() A callback function run when the input loses focus.
onInvalid function noop() A callback function that runs the moment the input becomes invalid.
onValid function noop() A callback function that runs the moment the input becomes valid.
info string null Adds a button within the input that toggles a Popover that has more content explaining what’s required of the field. Use a CSS query selector to identify the popover.
infoToggleAriaLabel string "Show Card Security Code instructions" The `aria-label` for the icon added using the info option.

For all available methods and full API, refer to the component code on Bitbucket.

<div class="col-xs-12 col-md-8 col-xl-6">
  <label class="spark-payment--card-security-code">
    <input class="spark-input__field" name="cvv" type="tel" role="textbox" minlength="3" maxlength="4" pattern="\d{3,4}" required data-novalidate>
    <span class="spark-label">CVV</span>
  </label>
</div>

<style type="text/css">
  
</style>
var cvvEl = document.querySelector('.spark-payment--card-security-code');
var cvv = new Spark.Payments.CardSecurityCode(cvvEl);

Card Security Code (CVV) with Information Popover

CVV Security Code

Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec.

<div class="col-xs-12 col-md-8 col-xl-6">
  <label class="spark-payment--card-security-code">
    <input class="spark-input__field" name="cvv" type="tel" role="textbox" minlength="3" maxlength="4" pattern="\d{3,4}" required data-novalidate>
    <span class="spark-label">CVV</span>
  </label>
</div>

<style type="text/css">
  
</style>

<div id="example-cvv-popover" class="spark-popover example--popover">
  <div class="spark-popover__content">
    <a tabindex="0" class="spark-popover__close" title="Close"></a>
    <h3 class="example">CVV Security Code</h3>
    <p class="example spark-mar-b-0"><img class="example" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/payments/cvv.png">Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec.</p>
  </div>
</div>
var cvvEl = document.querySelector('.spark-payment--card-security-code');
var cvv = new Spark.Payments.CardSecurityCode(cvvEl, {
  info: '#example-cvv-popover'
});

Card Security Code (CVV) with Error

CVV Security Code

Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec. 

<div class="col-xs-12 col-md-8 col-xl-6">
  <label class="spark-payment--card-security-code">
    <input class="spark-input__field" name="cvv" type="tel" role="textbox" minlength="3" maxlength="4" pattern="\d{3,4}" required>
    <span class="spark-label">CVV</span>
  </label>
  <div class="spark-popover example--popover">
    <div class="spark-popover__content">
      <a tabindex="0" class="spark-popover__close" title="Close"></a>
      <h3 class="example">CVV Security Code</h3>
      <p class="example spark-mar-b-0">
      	<img class="example" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/payments/cvv.png">
      	Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec.
      </p>
    </div>
  </div>
</div>

<style type="text/css">
  
.example--secure-checkout-button i {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  vertical-align: inherit;
}

.spark-popover__content h3.example {
  font-size: 1.66666667rem;
  text-transform: uppercase;
}

.spark-popover__content p.example {
  max-width: 267px;
  white-space: normal;
}

.spark-popover__content img.example {
  border-radius: 50%;
  display: inline-block;
  float: right;
  height: 120px;
  margin: 0 0 0 .5rem;
  width: 120px;
}

.example--btn-group {
  width: 100%;
}


</style>
var cvvEl = document.querySelector('.spark-payment--card-security-code');
var cvv = new Spark.Payments.CardSecurityCode(cvvEl, {
  info: '.example--popover',
  onValid: function() {
    this.clearMessages();
  },
  onInvalid: function() {
    if (this.value) {
      this.setError('Invalid CVV');
    } else {
      cvv.setError('Required');
    }
  }
});

cvv.setError('Required');

Card Set Deprecated

A Card Set is an optional wrapper around one set of Card Number, Card Expiration, and Card Security Code inputs. It can be used to instantiate the set of fields at once, and offers control of the set of fields from a single object. A Card Set is created using the class .spark-payment--card-set and is instantiated using new Spark.Payments.CardSet(el);. The following options may be passed when using new Spark.Payments.CardSet(el, {});:

Name Type Default Description
onInput function noop() A callback function run when the input value changes.
onValid function noop() A callback function that runs the moment the input becomes valid.
onInvalid function noop() A callback function that runs the moment the input becomes invalid.
onFocus function noop() A callback function run when the input gains focus.
onBlur function noop() A callback function run when the input loses focus.
validate function noop() A function to run to validate the state of the input. It should call onValidate with the parameters outlined below.
onValidate function noop() A callback function run after validation has completed. Callback arguments are isValid, newValues, instance.

Additional Card Set Properties

Name Type Description
number Payments.CardNumber Provides direct access to the CardNumber component instance.
expiration Payments.CardExpiration Provides direct access to the CardExpiration component instance.
securityCode Payments.CardSecurityCode Provides direct access to the CardSecurityCode component instance.

For all available methods and full API, refer to the component code on Bitbucket.

<div class="col-xl-6 col-md-8 col-xs-12">
  <div class="spark-panel spark-panel--card">
    <div class="spark-panel__content">
      <div class="spark-payment--card-set">
        <label class="spark-payment--card-number">
          <div aria-hidden="true" class="spark-payment__card-type"><i class="spark-icon-credit-card spark-icon--fill spark-icon--md"></i></div>
          <input class="spark-input__field" name="number" type="tel" placeholder="0000 0000 0000 0000" role="textbox" data-novalidate>
          <span class="spark-label">Credit Card Number</span>
        </label>

        <div class="row spark-mar-b-1">
          <div class="col-xs-12 col-md-7 col-lg-8 spark-mar-b-1--lte-sm">
            <label class="spark-payment--expiration">
              <input class="spark-input__field" name="expiration" type="tel" minlength="7" pattern="(0[1-9]|1[0-2]) - \d\d" placeholder="MM - YY" role="textbox" data-novalidate>
              <span class="spark-label">Expiration Date</span>
            </label>
          </div>

          <div class="col-xs-12 col-md-5 col-lg-4 spark-pad-l-0--gte-md">
            <label class="spark-payment--card-security-code">
              <input class="spark-input__field" name="cvv" type="tel" role="textbox" minlength="3" maxlength="4" pattern="\d{3,4}" required data-novalidate>
              <span class="spark-label">CVV</span>
            </label>
          </div>
        </div>
      </div>

      <label class="spark-input">
        <input class="spark-input__field" name="name" type="text" role="textbox">
        <span class="spark-label">Name on Card</span>
      </label>

      <label class="spark-checkbox">
        <input class="spark-checkbox__input" type="checkbox">
        <span class="spark-checkbox__box"></span>
        <span class="spark-label">Save as default payment</span>
      </label>
    </div>
  </div>
</div>

<style type="text/css">
  
</style>
var cardSetEl = document.querySelector('.spark-payment--card-set');
var cardSet = new Spark.Payments.CardSet(cardSetEl);

/*
To pass Popover configurations to the CardSecurityCode field, use the following approach:

var cardSetEl = document.querySelector('.spark-payment--card-set');
var cardSet = new Spark.Payments.CardSet(cardSetEl, {
  securityCode: {
    info: '.example--popover'
  }
});
*/

Unified Credit Card Input

A Unified Card Input is created using the class .spark-payment--unified and is instantiated using new Spark.Payments.UnifiedCreditCard(el);. The following options may be passed when using new Spark.Payments.UnifiedCreditCard(el, {});:

Name Type Default Description
cardTypes object undefined Passed through and consumed by the inner Card Number component.
info string undefined Adds a button within the input that toggles a Popover that has more content explaining what’s required of the field. Use a CSS query selector to identify the popover.
onValidate function noop() A callback function run after validation has completed. Callback arguments are isValid, newValues, instance.

Additional Unified Credit Card Input Properties

Name Type Description
number Payments.CardNumber Provides direct access to the CardNumber component instance.
expiration Payments.CardExpiration Provides direct access to the CardExpiration component instance.
securityCode Payments.CardSecurityCode Provides direct access to the CardSecurityCode component instance.

For all available methods and full API, refer to the component code on Bitbucket.

CVV Security Code

Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec. 

<div class="col-xs-12 col-md-8 col-xl-6">
  <div class="spark-payment--unified">

    <label class="spark-payment--card-number">
      <div aria-hidden="true" class="spark-payment__card-type"><i class="spark-icon-credit-card spark-icon--fill spark-icon--md"></i></div>
      <input class="spark-input__field" name="number" type="tel" placeholder="0000 0000 0000 0000" role="textbox" required>
      <span class="spark-label">Credit Card Number</span>
    </label>

    <div class="spark-payment--unified__fields">

      <label class="spark-payment--expiration">
        <input class="spark-input__field" name="expiration" type="tel" minlength="7" pattern="(0[1-9]|1[0-2]) - \d\d" placeholder="MM - YY" role="textbox" required>
        <span class="spark-label">Expiration</span>
      </label>

      <label class="spark-payment--card-security-code">
        <input class="spark-input__field" name="cvv" type="tel" role="textbox" minlength="3" maxlength="4" pattern="\d{3,4}" required required>
        <span class="spark-label">CVV</span>
      </label>

    </div>

  </div>

  <div class="spark-popover example--popover">
    <div class="spark-popover__content">
      <a tabindex="0" class="spark-popover__close" title="Close"></a>
      <h3 class="example">CVV Security Code</h3>
      <p class="example spark-mar-b-0">
        <img class="example" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/payments/cvv.png">
        Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec.
      </p>
    </div>
  </div>
</div>

<style type="text/css">
  
.example--secure-checkout-button i {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  vertical-align: inherit;
}

.spark-popover__content h3.example {
  font-size: 1.66666667rem;
  text-transform: uppercase;
}

.spark-popover__content p.example {
  max-width: 267px;
  white-space: normal;
}

.spark-popover__content img.example {
  border-radius: 50%;
  display: inline-block;
  float: right;
  height: 120px;
  margin: 0 0 0 .5rem;
  width: 120px;
}

.example--btn-group {
  width: 100%;
}


</style>
var unifiedEl = document.querySelector('.spark-payment--unified');
var unifiedInput = new Spark.Payments.UnifiedCreditCard(unifiedEl, {
  info: '.example--popover'
});

Unified Credit Card Input with Error

CVV Security Code

Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec. 

<div class="col-xs-12 col-md-8 col-xl-6">
  <div class="spark-payment--unified">

  	<label class="spark-payment--card-number">
  	  <div aria-hidden="true" class="spark-payment__card-type"><i class="spark-icon-credit-card spark-icon--fill spark-icon--md"></i></div>
  	  <input class="spark-input__field" name="number" type="tel" placeholder="0000 0000 0000 0000" role="textbox" required>
  	  <span class="spark-label">Credit Card Number</span>
  	</label>

  	<div class="spark-payment--unified__fields">

  		<label class="spark-payment--expiration">
  		  <input class="spark-input__field" name="expiration" type="tel" minlength="7" pattern="(0[1-9]|1[0-2]) - \d\d" placeholder="MM - YY" role="textbox" required>
  		  <span class="spark-label">Expiration</span>
  		</label>

  		<label class="spark-payment--card-security-code">
  		  <input class="spark-input__field" name="cvv" type="tel" role="textbox" minlength="3" maxlength="4" pattern="\d{3,4}" required>
  		  <span class="spark-label">CVV</span>
  		</label>

  	</div>

  </div>

  <div class="spark-popover example--popover">
    <div class="spark-popover__content">
      <a tabindex="0" class="spark-popover__close" title="Close"></a>
      <h3 class="example">CVV Security Code</h3>
      <p class="example spark-mar-b-0">
      	<img class="example" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/payments/cvv.png">
      	Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec.
      </p>
    </div>
  </div>
</div>

<style type="text/css">
  
.example--secure-checkout-button i {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  vertical-align: inherit;
}

.spark-popover__content h3.example {
  font-size: 1.66666667rem;
  text-transform: uppercase;
}

.spark-popover__content p.example {
  max-width: 267px;
  white-space: normal;
}

.spark-popover__content img.example {
  border-radius: 50%;
  display: inline-block;
  float: right;
  height: 120px;
  margin: 0 0 0 .5rem;
  width: 120px;
}

.example--btn-group {
  width: 100%;
}


</style>
var unifiedEl = document.querySelector('.spark-payment--unified');
var unifiedInput = new Spark.Payments.UnifiedCreditCard(unifiedEl, {
  info: '.example--popover'
});

unifiedInput.setError('Invalid Expiration');
unifiedInput.onInvalid = function(e) {
  if (e.input instanceof Spark.Payments.CardNumber) {
    unifiedInput.setError('Invalid Card Number');
  } else if (e.input instanceof Spark.Payments.CardExpiration) {
    unifiedInput.setError('Invalid Expiration');
  } else if (e.input instanceof Spark.Payments.CardSecurityCode) {
    unifiedInput.setError('Invalid Security Code');
  }
}
unifiedInput.onValid = function() {
  unifiedInput.clearMessages();
}

Advanced Usage

Spark Payment Card Number Inputs may be extended if the card type and/or number format you require is not already supported in what the component ships with. The component has a series of internally stored card type configurations used to enable it’s unique behavior. These configurations can be overwritten or appended to, to extend on current configurations or add support for additional card types, by passing card type configuration objects in through the cardTypes param on instantiation.

A card type configuration is an Object cardTypes parameter where the key is a unique string representive of the type. This may be anything, but must be all lowercase, and contain no special characters. Card Type configurations have a property for the card type name, length of the card number, length of the security code, the number prefix that identifies a card as this type, and the pattern for which the card number is displayed.

Card Type Configuration

Name Type Description
name string The name of the issuing bank.
length number The length of digits in the card number of this type.
cvv Number The length of digits in the card security code of this type.
prefix number The key digits used to identify a card as this type, used as the beginning of every card number issued by the bank.
pattern array A pattern for how card numbers of this length are represented on cards of this type, identifying how many digits are displayed before any spacing is injected.

Here is an example card type for UATP cards

uatp: {
    name: 'UATP',
    length: 15,
    cvv: 3,
    prefix: 1,
    pattern: [4, 5, 6]
  }

Multiple Values

If a card type has multiple possible lengths and/or patterns, length and pattern properties should be provided in an array, where the order of values in each array align. So in example, for a card type that has 2 different lengths and associated patterns, the value of pattern[0] should align with the value of length[0], and the value of pattern[1] should align with the value of length[1].

Another property which can be passed an array of values is the prefix property. If your card type has multiple prefixes, bundle them into an array. Prefixe values may also be an array if they represent a range.

Here is an example card type for VISA cards, which have variable card number lengths and patterns, as well as a series of prefixes.

visa: {
    name: 'Visa',
    length: [16, 19],
    cvv: 3,
    prefix: [
      4,
      4026,
      417500,
      4405,
      4508,
      4844,
      4913,
      4917
    ],
    pattern: [
      [4, 4, 4, 4],
      [6, 4, 8, 1]
    ]
  }

Card Type Images

If extending with an additional card type, you’ll need to provide your own image, and write a little CSS. The unique string you choose to represent your card type with will be used in constructing values which will appear on the component in the event it detects the card type, so you may display your own card type image with the following CSS.

.spark-payment--card-number[data-card-type$='newcardtype'] .spark-icon-credit-card::after {
    background-image: url(/path/to/new/card/type.svg);
  }

Card type images are 48px x 36px, though if you wish to overwrite the styles for current images or supply images for additional card types, you won’t have to worry about modifying any further display styles. Card type images appear as a background-image for a container displayed at 2rem x 2rem, and have a further background-size property that will use the image to fill the full width of the available area while maintaining the aspect ratio. The component currently uses SVG images, so it is recommended that any additional images you configure also be as well. SVG images are vector based and can be scaled infinitely, which means they support all retina devices out of the box, so there are currently no styles written to support multiple images designed to be paired against specific pixel densities. If you wish to use an alternative image type such as PNG, JPEG, or GIF, you’ll need to write any additional varying pixel density styles to support retina devices yourself.

Current Card Type Configurations

ID Image name length cvv prefix pattern
amex American Express 15 4 
[
    34,
    37
  ]
 [4, 6, 5]
china China Union Pay [16, 19] 3 62 
[
    [4, 4, 4, 4],
    [6, 13]
  ]
discover Discover 16 3 
[
    6011,
    [622126, 622925],
    [644, 649],
    65
  ]
 [4, 4, 4, 4]
jcb JCB 16 3 
[
    [3528, 3589]
  ]
 [4, 4, 4, 4]
mc MasterCard 16 3 
[
    [51, 55],
    [2221, 2720]
  ]
 [4, 4, 4, 4]
uatp UATP 15 3 1 [4, 5, 6]
dc Diners Club International 14 3 
[
    [300, 305],
    309,
    36,
    [38, 39]
  ]
 [4, 6, 4]
visa VISA [16, 19] 3 
[
    4,
    4026,
    417500,
    4405,
    4508,
    4844,
    4913,
    4917
  ]
 
[
    [4, 4, 4, 4],
    [6, 4, 8, 1]
  ]

Disabling Default Card Types

If your product only accepts a subset of the different card types documented above, you may want to prevent a situation where the user could see the logo for a card type you don’t accept.

For example, if a product is only capable of processing credit card payments made with MasterCard or Visa, you should disable other card types otherwise a user could see a UATP card logo if a card number starting with 1 is typed in for instance.

To disable support for card types you don’t currently need, first locate the unique IDs for those you wish to disable by referencing the Current Card Type Configurations table above. Once you have the IDs for the card types you wish to disable, pass them into disableCardDefaults as an array on instantiation.

Below is an example which disables China Union Pay, Diners Club, JCB, and UATP, leaving default configurations in place only for American Express, Discover, MasterCard, and Visa cards.

var cardNumberEl = document.querySelector('.spark-payment--card-number');
var cardNumber = new Spark.Payments.CardNumber(cardNumberEl, {
  disableCardDefaults: [
    "china",
    "dc",
    "jcb",
    "uatp"
  ]
});

Currency Input

A Currency Input is created using the class .spark-payment--currency. It is then instantiated using new Spark.Payments.CurrencyInput(el). The following options may be passed when using new Spark.Payments.CurrencyInput(el, {});:

Note: The Currency Input follows the IEEE 754 standard for Floating-Point arithmetic, and as such should not be used for extremely large values.

Name Type Default Description
decimalSeparator string . A string that separates the whole currency amount from the partial currency amount. For example the decimal in 1.00 or the comma in 1,00 for regional currency inputs. Ensure that the placeholder value set in the Currency Input matches the selected decimalSeparator.
precision integer 2 An integer value to use for the input's decimal precision. If the value attribute is set on the component ensure that its contents match the precision if provided.
validate function null A function to run to validate the state of the input. It should call onValidate with the parameters outlined below.
validatePattern string null If supplied, this regular expression pattern will be used in the default validate method to determine if an input is in a valid state.
onValidate function null A callback function run after validation has completed. Callback arguments are isValid, newValue, instance.
onChange function null A callback function run when the input value changes. Callback arguments are newValue, instance.
onFocus function null A callback function run when the input gains focus. Callback arguments are newValue, instance.
onBlur function null A callback function run when the input loses focus. Callback arguments are newValue, instance. 
<div class="row">    
  <div class="col-xs-12 col-sm-6 col-sm-5 col-xl-4 spark-mar-b-1">
    <label class="spark-input spark-input--has-prefix spark-payment--currency">
      <input type="tel" class="spark-input__field" name="example1" placeholder="0.00" value="0.00">
      <span class="spark-input__prefix">$</span>
      <span class="spark-label">Amount</span>
    </label>
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-5 col-xl-4 spark-mar-b-1">
    <label class="spark-input spark-input--has-prefix spark-input--has-suffix spark-payment--currency">
      <input type="tel" class="spark-input__field" name="example2" placeholder="0.00" value="0.00">
      <span class="spark-input__prefix" aria-label="Canadian Dollar">$</span>
      <span class="spark-label">Amount</span>
      <span class="spark-input__suffix" aria-hidden="true">CAD</span>
    </label>
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-5 col-xl-4">
    <label class="spark-input spark-input--has-suffix spark-payment--currency">
      <input type="tel" class="spark-input__field" name="example3" placeholder="0.00" value="">
      <span class="spark-label">Amount</span>
      <span class="spark-input__suffix" arial-label="Euro">EUR</span>
    </label>
  </div>
</div>



<style type="text/css">
  
</style>
var currencyInputs = document.querySelectorAll('.spark-payment--currency');

for(var i = 0, len = currencyInputs.length; i < len; i++) {
  new Spark.Payments.CurrencyInput(currencyInputs[i])
}

Right-to-Left Support

<div class="row" dir="rtl" lang="ar-SA">
  <div class="col-xs-12 col-sm-6 col-sm-5 col-xl-4 spark-mar-b-1">
    <label class="spark-input spark-input--has-prefix spark-payment--currency">
      <input type="tel" class="spark-input__field" name="example1" placeholder="0.00" value="0.00">
      <span class="spark-input__prefix">﷼</span>
      <span class="spark-label">مقدار</span>
    </label>
  </div>
</div>

<div class="row" dir="rtl" lang="ar-SA">
  <div class="col-xs-12 col-sm-6 col-sm-5 col-xl-4 spark-mar-b-1">
    <label class="spark-input spark-input--has-prefix spark-input--has-suffix spark-payment--currency">
      <input type="tel" class="spark-input__field" name="example2" placeholder="0.00" value="0.00">
      <span class="spark-input__prefix">﷼</span>
      <span class="spark-label">مقدار</span>
      <span class="spark-input__suffix" aria-hidden="true">ر.س</span>
    </label>
  </div>
</div>

<div class="row" dir="rtl" lang="ar-SA">
  <div class="col-xs-12 col-sm-6 col-sm-5 col-xl-4">
    <label class="spark-input spark-input--has-suffix spark-payment--currency">
      <input type="tel" class="spark-input__field" name="example3" placeholder="0.00" value="">
      <span class="spark-label">مقدار</span>
      <span aria-label="ريال سعودي" class="spark-input__suffix">ر.س</span>
    </label>
  </div>
</div>



<style type="text/css">
  
</style>
var currencyInputs = document.querySelectorAll('.spark-payment--currency');

for(var i = 0, len = currencyInputs.length; i < len; i++) {
  new Spark.Payments.CurrencyInput(currencyInputs[i])
}

Accessibility Notes

Using CVV Inputs with Popovers

When using a Popover with the CVV Input, an aria-label is required on the Popover’s toggle to allow assistive technologies to convey the purpose of the control. A label is provided by default but it can be overridden as necessary using the available infoToggleAriaLabel option. Refer to the Popover’s accessibility documentation for more information on how to make it accessible.