--- url: >- https://acquirer-api-docs-v4-en.pingpongx.com/notes/zh/services/checkout/hosted/sdk/index.md description: >- 通过JS-SDK嵌入PingPongCheckout收银台，适用于需要在网页中集成支付功能的场景。支持自定义主题色和多语言配置。主要参数包括innerJsUrl和token，用于加载和初始化SDK。创建支付时需传入订单对象，并设置mode为sandbox或production。收银台支持48小时内重 --- ## 渲染收银台 从下单中取到下列关键响应参数 | 参数名称 | 描述 | |:-----------|:--------------| | innerJsUrl | JS-SDK的加载地址 | | token | 初始化SDK时，需要的参数 | ### 引入JS-SDK PingPongCheckout 提供两种方式来引入SDK + 提前引入JS,复制以下代码，通过CDN地址引入PingPongCheckout JS-SDK ```javascript ``` + 在下单完成之后，使用innerJsUrl字段的值引入 #### SDK-config示意图
SDK-config示意图
::: note 在上图中，您可以对字体样式、间距等进行更细致的配置。然而，如果您只想更改主题色，请使用以下参数： - themeColor：收银台的主题色，将应用于加载动画、字体、按钮、表单聚焦后边框颜色等。 - themeLightColor：收银台的浅色主题色，将应用于部分阴影、浅背景色等。 如果您不传递这些参数，则默认使用 Pingpong 主题色。 ::: #### JS-SDK收银台语种支持 ::: note 在SDK`lang`参数中配置，默认英语 更多语言详见Locale ::: #### 初始化SDK示例代码 客户端点击下单按钮，提交订单之后，从服务端获取订单相关参数（order 对象），在初始化PingPongCheckout JS-SDK之后，传入order对象 到createPayment方法中，开始和PingPongCheckout交互，成功之后将会渲染出PingPongCheckout收银台 ```javascript window.addEventListener('load', loadHandle); function loadHandle() { const conf = { mode: 'sandbox', //sandbox/production (必填参数) lang: 'en', // 语言，不传默认英语 - de德语 en英语 es西班牙语 fr法语 it意大利语 ru俄语 zh中文 jp日语 root: '#payment-wrap', // PingPong收银台在哪个元素上渲染 须为id (必填) manul: false, // 手动模式。 即：支付按钮需要自己渲染，开启后可使用client.actionPayment()方法调用支付 showPrice: true, // 是否展示价格 bill: true, // 是否显示bill located: true, // 是否显示located(默认为true) menu: true, //是否显示支付方式按钮 base: { width: '100%', // 收银台宽度 height: '800px', // 收银台高度 backgroundColor: '#fff', // 收银台整体背景色 // 顶部价格及币种 priceBgColor: '#fff', // 顶部价格区域背景色 priceFontColor: '#1fa0e8', // 顶部价格字体颜色 priceFontSize: '32px', // 顶部价格字体大小 priceMB: '10px', // 顶部价格区域距底部间距 // 引导标题: “How would you like to pay” showHeaderLabel: true, // 是否显示引导标题 headerMB: '24px', // 引导标题距底部间距 headerSize: '20px', // 引导标题字体大小 headerColor: 'rgba(0, 0, 0, 0.85)', // 引导标题字体颜色 headerfontWeight: 700, // 引导标题加粗 // 支付方式 payMethodsWidth: '240px', // 支付方式按钮宽度 payMethodsHeight: '48px', // 支付方式按钮高度 payMethodsColor: 'rgba(0, 0, 0, 0.85)', // 支付方式按钮字体颜色 payMethodsActiveColor: '#1fa0e8', // 支付方式按钮点击后字体颜色 payMethodsFontsize: '14px', // 支付方式按钮字体大小 payMethodsActiveBorderColor: '#1fa0e8', // 支付方式按钮点击后边框颜色 payMethodsActiveBorderShadow: '0 2px 8px 0 rgb(31 160 232 / 20%)', // 支付方式按钮点击后阴影 showIcons: true, // 是否显示卡图标 showHeaderAmount: true, // 是否显示头部支付金额 // 表单相关 formItemMargin: '16px', // 表单距底部间距 formItemBorderColor: 'rgba(0, 0, 0, 0.08)', // 表单边框颜色 formItemFocusColor: '#1fa0e8', // 表单聚焦时提示文案和边框颜色 // 支付按钮 btnSize: '100%', // 按钮宽度百分比或者px btnColor: '#fff', // 按钮字体颜色 btnFontSize: '14px', // 按钮字体大小 btnMarginTop: '10px', // button 距顶部距离 btnMarginBottom: "24px", // button 距底部距离 btnBackgroundColor: '#1fa0e8', // 按钮背景色 btnBorderRadius: '8px', // 按钮圆角 btnBorderColor: '#1fa0e8', // 可单独配置btn边框颜色覆盖btnBorder中设置的颜色 } } let client = new ppPay(conf); // 在这里传入 从接口中获取到的token let token ="EU:Dt10Deb05qeI0HFWg0DU1NPcLE-dxCDiU40wyKBxHw1w1RDULBtXXtI2dsgSX8L7"; //使用此方法将会创建收银台 client.createPayment(token); // manul 模式 使用此方法将不会出现支付按钮，支付时机将会取决于持卡人的调用 // client.actionPayment(callback) } ``` ::: danger 1. 参数mode必须正确填写，开发测试填sandbox，上线之后使用production，上线前请检查参数mode； 2. 收银台不支持禁用cookies。 ::: ### 完成付款 正确如上设置之后，应正常渲染出收银台，正确输入卡号，过期时间和CVV信息，即可完成交易。 沙箱模式下的收银台如下所示
## 重新支付 收银台若未支付成功，可以手动打开URL再次发起支付，一个收银台URL有效是时长为48小时