Step 2: Configure payment information

const testPayment = JsPayment.createPayment(PaymentOptions);

PaymentOptions Details

Parameter	Type	Required	Description
token	String(32)	Required	Obtain token from Step 1 Get Token
gateway	String(32)	Required	Set the environment for the current request to distinguish between the production environment and the test environment. (For specific links, contact the customer service for assistance.)
cardOptions	CardOptions	Required	For details, please refer to (CardOptions Details)

CardOptions Details

Parameter	Type	Required	Description
elementId	String(64)	Required	Element ID, used to fill payment information (HTML) into the specified element
errorTrigger	String(32)	Optional	Verification trigger timing, choose one of two: 'blur' / 'change', default is 'blur'
language	String(16)	Optional	Currently supports Chinese (zh-cn) or English (en) versions.
languageJson	Json	Optional	If other languages are required, you can customize Language Configuration.
inputStyle	Style	Optional	For details, please refer to (Input Box Style in Payment Information)
inputPlaceholder	Json	Optional	For details, please refer to (Input Box Placeholder in Payment Information)

Input Box Style in Payment Information

Parameter	Description
color	Text Color
caretColor	Cursor Color
fontSize	Font Size
fontWeight	Font Weight

Input Box Placeholder in Payment Information

Parameter	Description
firstName	First Name reminder phrase
lastName	Last Name reminder phrase
cardNumber	Card Number reminder phrase
expirationDate	Expiration Date reminder phrase
securityCode	Security Code reminder phrase

Language Configuration

{
  "firstName": "First Name",
  "firstName.required": "Please enter the first name",
  "lastName": "Last Name",
  "lastName.required": "Please enter the last name",
  "cardNumber.label": "Card Number",
  "cardNumber.required": "Please enter the card number",
  "cardNumber.error": "Please enter a valid card number",
  "expirationDate.label": "Expiration Date",
  "expirationDate.required": "Please enter the expiration date",
  "expirationDate.error": "Please enter a valid expiration date",
  "securityCode.label": "Security code",
  "securityCode.required": "Please enter the security code",
  "securityCode.error": "Please enter a valid security code"
}

Example

<div style="display: flex;align-items: center;justify-content: center;height: 100%;width: 100%">
  <div style="width: 430px;height: 300px;">
    <div id="test" style=" width: 100%;"></div>
    <button id="payment" type="button" style="width: 100%;height: 40px;">Payment</button>
  </div>
</div>

function createPayment(res: any) {
  const element = document.getElementById("payment");
  const testPayment: any = JsPayment.createPayment(
    {
      token: res.token,
      environment: 'Sandbox',
      cardOptions: {
        elementId: 'test',
        language: 'en',
        inputStyle: {
          color: "red",
          fontSize: "14px",
        },
        inputPlaceholder: {
          firstName: 'First Name',
          lastName: 'Last Name',
          cardNumber: 'Card Number',
          expirationDate: 'Expiration Date',
          securityCode: 'Security Code',
        }
      }
    });
}