Welcome to the SDK Reference for Blox. This SDK simplifies secure online transactions by embedding PCI-compliant iframes into your checkout process to collect payment details. It then generates payment card tokens on the client side, enabling secure and hassle-free transactions. Browse this reference guide to get started and unlock the full capabilities of our solution.
For more information and examples, see Blox
The namespace class contains the
BloxController class for instantiating the secure blox instances and tokenizing the card details.
Creates an instance to control the secure blox instances and tokenize the card details.
Property value is true when all blox instances are valid
Creates a secure blox instance to be mounted on an HTML element container.
Clears input elements of all blox instances at once
Validates all blox instances at once
Returns a token representation of the card data collected via the secure blox instances. If an error occurs it will be thrown using the standard JS mechanism. So to handle them the developer should use
try catch or the
catch method of the promise.
|payload||PaymentCardTokenCreatePayload||Payload required to create a payment card token|
Encrypts CVV collected via the secure blox instance. If an error occurs it will be thrown using the standard JS mechanism. So to handle them the developer should use
try catch or the
catch method of the promise.
|cardNumber||Shows an input element for the card number|
|cardExpiryDate||Shows an input element for the card expiration date|
|cardCvv||Shows an input element for the CVV code|
|cardHolderName||Card holder name|
|singleUse?||Optional. Flag to create a single-use token, that will be deleted from the system upon usage.|
|type||The type of the payment card token, if single use the token can be used for payment only once|
|token||The payment card token to be used during payment|
|card||MaskedPaymentCardDetails||Masked card information plus additional card information like its brand, type, country|
|encryptedCvv||During tokenization the API encrypted the CVV without storing it anywhere inside bridgerpay, you should provide it later on the payment request.|
|maskedNumber||Masked payment card number e.g.|
|bin||The card's bin|
|last4Digits||The card's last 4 digits|
|expireMonth||The card's expiry month|
|expireYear||The card's expiry year|
|holderName||Card holder name|
|brand?||Optional. The card's brand, e.g.|
|issuer?||Optional. An organization that issued the card|
|country?||Optional. The country's ISO 3166 alpha-2 code where the card was issued|
|encryptedCvv||Encrypted CVV that wasn't stored anywhere inside bridgerpay, you should provide it later on the payment request.|
The secure blox instance is responsible for setting up the iframe with an input form element to show on your checkout page and collecting one part of the user's card data.
Mounts a secure blox instance to the DOM, onto the container where the input element should be rendered.
Clears the blox instance input element.
update(options: BloxOptions): void
At any time you can update the blox instance by calling the update method and providing a new set of options. The options will override whatever was provided during the blox instance creation.
|placeholder?||Optional. Placeholder for default text to show in an input element|
|skipLuhnValidation?||Optional. Flag to disable the Luhn validation|
|unmaskedCvv?||Optional. Flag to keep CVV unmasked.|
|cvvLength?||Optional. Defaults to 3. If CVV Blox is used separately from Card Number Blox, the client must provide this value based on the rules defined by the client.|
|style?||BloxStyle||Optional. CSS styles for styling the input elements. See Blox Style Reference|
Binds an event listener to the blox instance input element, for events that are triggered when the value of an input element has been changed.
|empty||Whether the input element is empty.|
|valid||Whether the card data is inserted and valid.|
|invalid||Whether the card data is invalid.|
|dirty||The input element value was changed at least once|
|pristine||The input element value hasn't changed since loading|
|touched||The input element was focused at least once since loading|
|untouched||The input element hasn't been focused yet|
|error||The validation error|
|brand?||Optional. Will be returned only for the |
Unmounts the blox instance from the DOM. You can only call this once.
You can style the elements by providing the style object on the BloxController constructor options argument, on the createBlox method options argument, or on the update method options argument.
The following is a list of object key names, representing the input element status to which you can apply styles. Note that the objects must be nested with the
|base||Styles that are inherited by the rest style objects|
|empty||Applied when the element has no value|
|valid||Applied when the element value is valid|
|invalid||Applied when the element value is invalid|
Any valid CSS property can be used in
camelCase notation applicable to an HTML input element.
Any valid pseudo-CSS selector can be used to apply styles, for example:
Updated 29 days ago