Card binding SDK

This SDK collects users' card information. The boundCardToken parameter can be obtained through OpenAPI. Check it out.

Merchant website access example

production

<script src="https://ramp.saintpay.it/js/frames.min.js"></script>
<script>
  // nitialization
  SaintpayFrames.init({
    boundCardToken: "******",
  });
  // Calling card binding
  SaintpayFrames.dispatch("submitCard");
</script>

<div id="saintpayFrame"></div>

SDK parameters

Functions

Method name	Description
init(object)	Initialization method for loading form SaintpayFrames.init(object)
addEventHandler(event, handler)	Add a call method for specified trigger events. "event" refers to the name of a valid event, and "handler" refers to the callback handling. Example: SaintpayFrames.addEventHandler(Events.CARD_TOKENIZED, (event) => {})
removeEventHandler(event, handler)	This is used to remove events added via the addEventHandler method. "event" refers to the name of a valid event, and "handler" refers to a specified function to remove. Example: SaintpayFrames.removeEventHandler(Events.CARD_TOKENIZED, (event) => {})
removeAllEventHandlers(event)	Removes all listeners added to the specified event. "event" refers to the name of a valid event. Example: SaintpayFrames.removeAllEventHandlers(Events.CARD_TOKENIZED)
dispatch(event, handler)	Manually triggers a specified event. "event" refers to a list of valid events, and "handle" represents a callback handling (optional). Example: SaintpayFrames.dispatch(Events.CARD_SUBMIT, (e) => {})

Init configuration

Configuration name	Description	Mandatory	Default value
boundCardToken	Card binding token	Y	none
locale	Language	N	en View supported languages.
getContainer	Node DOM inserted to iframe	N	() => document.querySelector("#SaintpayFrame")
fields	Form options	N	{ holderName: false, phone: false, country: false, city: false, address: false, postalCode: false }

addEventHandler Event

Event name	Javascript constant	Description
cardTokenizationValid	CARD_TOKENIZATION_VALID	Triggered upon completion of card binding token verification. It will return to isValid: true / false
cardValidationChanged	CARD_VALIDATION_CHANGED	Triggered when the status of the card verification changes. It will return to isValid: true / false

dispatch Event

Event name	Javascript constant	Description	Response
submitCard	CARD_SUBMIT	Method for card form submission	{ tokenValid: true/false, status: true/false, cardId: "622***111" }
resetForm	CARD_RESET_FORM	Method for clearing card form	undefined
isCardValid	CARD_IS_VALID	Obtain the result of whether the card verification has been successful	{ isValid: true / false }

Fields Option

Name	Javascript constant	Description
holderName	FIELD_HOLDER_NAME	Cardholder name
phone	FIELD_PHONE	Cardholder's mobile number and area code
country	FIELD_COUNTRY	Cardholder's country/region
city	FIELD_CITY	Cardholder's mobile number and area code
address	FIELD_ADDRESS	Cardholder address
postalCode	FIELD_POSTAL_CODE	Cardholder's postal code
billState	FIELD_BILL_STATE	Cardholder's state; If the card belongs to The United States or Canada, the state is mandatory or is not

Custom CSS

If you want to override the default style of Frames and customize the element's CSS, pass a style object to the init method.

Property name	Description
backgroundColor	The iframe element background color.
input	The default input element style Accepts an object with color 、 backgroundColor、fontSize、 height、padding、rounded、border
label	The form lable element style Accepts an object with color 、 paddingBottom、fontSize
focus	Rules applied when the element is focused Accepts an object with color
invalid	Rules applied when the element is invalid Accepts an object with color 、 padding、fontSize
placeholder	The input element placeholder style Accepts an object with color
select	The default select element style Accepts an object with options、backgroundColor options Accepts an object with activeBackgroundColor、fontSize、color、height

For example, an instance of Frames initialized with these values:

javascript

SaintpayFrames.init({
  boundCardToken: "YOUR-CARD-TOKEN",
  style: {
    backgroundColor: "#000000",
    padding: "10px 5px",
    input: {
      color: "#e7d2c4",
      backgroundColor: "#F8F6F9",
      fontSize: "20px",
      height: "80px",
      padding: "10px 10px 10px 10px",
      rounded: "20px",
      border: "1px solid #e7d2c4",
    },
    label: {
      color: "#e7d2c4",
      fontSize: "14px",
      paddingBottom: "15px",
    },
    focus: {
      color: "#afd523",
    },
    invalid: {
      color: "#9a1313",
      fontSize: "20px",
      padding: "10px 10px 10px 10px",
    },
    placeholder: {
      color: "#ba8397",
    },
    select: {
      backgroundColor: "#e7d2c4",
      border: "1px solid #9a1313",
      options: {
        activeBackgroundColor: "#bcc397",
        fontSize: "20px",
        color: "#26bfd4",
        height: "64px",
      },
    },
  },
});