第二步 配置支付信息

const testPayment = JsPayment.createPayment(PaymentOptions);

PaymentOptions 详情

参数	类型	必填	说明
token	String(32)	必填	从第一步中获取token
environment	String(32)	必填	设置当前请求的环境，生产环境(Production)或测试环境(Sandbox)
cardOptions	CardOptions	必填	可以查看(CardOptions详情)

CardOptions 详情

参数	类型	必填	说明
elementId	String(64)	必填	元素ID，用于将付款信息(HTML)填充到指定的元素中
errorTrigger	String(32)	必填	校验时触发的时机，二选一 'blur'·'change' 默认'blur'
language	String(16)	必填	目前支持中文（zh-cn）或英语（en）版本。
languageJson	Json	必填	如有其他语言需求，可自定义语言配置。
inputStyle	Style	必填	详情可以查看付款信息中输入框样式

付款信息中输入框样式

参数	说明
color	文字颜色
caretColor	光标颜色
fontSize	文字大小
fontWeight	文字粗细

语言配置

{
  "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"
}

实例

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