第二步 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
environment	String(32)	Required	Set the current request environment: Production environment (Production) or Test environment (Sandbox)
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)	Required	Verification trigger timing, choose one of two: 'blur' / 'change', default is 'blur'
language	String(16)	Required	Currently supports Chinese (zh-cn) or English (en) versions.
languageJson	Json	Required	If other languages are required, you can customize [Language Configuration](#Language configuration).
inputStyle	Style	Required	For details, please refer to [Input Box Style in Payment Information](#Enter the box style in the payment information)

Input Box Style in Payment Information

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

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",
        },
      }
    });
}