Hosted-通过JS-SDK嵌入收银台

# 渲染收银台

从下单中取到下列关键响应参数

参数名称	描述
innerJsUrl	JS-SDK的加载地址
token	初始化SDK时，需要的参数

# 引入JS-SDK

PingPongCheckout 提供两种方式来引入SDK

提前引入JS,复制以下代码，通过CDN地址引入PingPongCheckout JS-SDK

<script src="https://pay-cdn.pingpongx.com/production-fra/static/sdk-v3/ppPay.min.js"></script>

在下单完成之后，使用innerJsUrl字段的值引入

# SDK-config示意图

笔记

在上图中，您可以对字体样式、间距等进行更细致的配置。然而，如果您只想更改主题色，请使用以下参数：

themeColor：收银台的主题色，将应用于加载动画、字体、按钮、表单聚焦后边框颜色等。
themeLightColor：收银台的浅色主题色，将应用于部分阴影、浅背景色等。如果您不传递这些参数，则默认使用 Pingpong 主题色。

# JS-SDK收银台语种支持

笔记

在SDKlang参数中配置，默认英语更多语言详见Locale

# 初始化SDK示例代码

客户端点击下单按钮，提交订单之后，从服务端获取订单相关参数（order 对象），在初始化PingPongCheckout JS-SDK之后，传入order对象到createPayment方法中，开始和PingPongCheckout交互，成功之后将会渲染出PingPongCheckout收银台


    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)
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

注意 :

1. 参数mode必须正确填写，开发测试填sandbox，上线之后使用production，上线前请检查参数mode

2. 收银台不支持禁用cookies

# 完成付款

正确如上设置之后，应正常渲染出收银台，正确输入卡号，过期时间和CVV信息，即可完成交易。

沙箱模式下的收银台如下所示

# 重新支付

收银台若未支付成功，可以手动打开URL再次发起支付，一个收银台URL有效是时长为48小时

上次更新: 2024/01/04, 11:53:02