简体中文

English

简体中文

English

主题

WebSDK支付 ​

引入 Onerway JavaScript 库 ​

CDN 引入 ​

html
<script src="https://checkout-sdk.onerway.com/v3/"></script>

在页面添加SDK入口 ​

html
<div id='pacypay_checkout'></div>

创建SDK实例 ​

js
const pacypay = new Pacypay(transactionId, options)

options ​

创建options对象 ​

js
const options = {
    container: 'pacypay_checkout', // 容器id。默认pacypay_checkout
    locale: '', // 收银台语言。根据实际情况填写，详见下方locale参数说明
    environment: '', // 环境类型。支持沙盒、生产环境，详见下方environment参数说明。
    mode: '', // 支付方式。支持 收银台、Apple Pay、Google Pay，详见下方mode参数说明
    redirectUrl: '', // 此字段由服务端下单接口返回，用于客户端唤起SDK。
    config: {
        //  config配置项。参数说明及示例请查看下方config配置项
    }, 
    onPaymentCompleted: function() {
        // 请求成功完成回调方法
    },
    onError: function() {
        // 请求异常回调方法
    }
}

示例中的字段未赋值，请根据下方字段说明填写，完整配置请参考对应场景的代码示例

options字段说明 ​

属性类型必填说明
containerstringNo容器id,默认pacypay_checkout
localestringNo语言类型。
1. 收银台集成：详见
2. Google Pay 和 Apple Pay 集成详见： ApplePay、GooglePay。
environmentstringYes环境类型，支持sandbox、production。默认为 production
modestringYes支付方式，支持 CARD、ApplePay、GooglePay
redirectUrlstringYes下单接口的响应返回，用于客户端唤起SDK。
configobjectYes配置项。
1.信用卡接入详见以下： config
2. Google Pay 和 Apple Pay 接入详见： GooglePay Config、ApplePay Config。
onPaymentCompletedfunctionYes请求成功完成回调方法
onErrorfunctionYes请求异常回调方法

config ​

创建config项 ​

注意

以下是SDK收银台配置代码示例，Apple Pay、Google Pay 配置及字段说明请参考对应场景的代码示例

js
const config = {
    subProductType: '', // DIRECT - 直接支付/订阅支付/预授权支付；TOKEN - 绑卡支付//
    checkoutTheme: '', // light -浅色主题；dark -深色主题
    customCssURL: '', // 自定义样式链接地址。配置该值后，checkoutTheme 会失效
    showPayButton: true, // 是否显示支付按钮。详见下方 showPayButton 参数说明
    buttonSeparation: false, // 绑卡与支付是否分步操作。 详见下方 buttonSeparation 参数说明
    displayBillingInformation: true, // 是否显示账单信息。详见下方 displayBillingInformation 参数说明
    hideTokenList: false, // 是否隐藏绑卡列表。详见下方 hideTokenList 参数说明
    variables: {
        // 自定义主题色变量名。详见下方 variables 参数说明
    },
    styles: {
        // 自定义样式。详见下方 styles 参数说明
    }
}
config字段说明 ​
属性类型必填说明
subProductTypestringYes子产品类型。
DIRECT - 直接支付 / 订阅支付
TOKEN - 绑卡支付
checkoutThemestringNo主题类型。light、dark
customCssURLstringNo自定义样式链接地址。配置后，checkoutTheme 值无效
variablesobjectNo自定义主题色。详见以下 variables 说明
stylesobjectNo自定义样式。详见以下 styles 说明。
showPayButtonbooleanNo默认为 true。如果设为 false 可自定义支付按钮和展示账单信息，请参阅 自定义支付按钮
buttonSeparationbooleanNo针对TOKEN - 绑卡支付，默认为 true。
true：绑卡与支付按钮分开操作；
false：绑卡与支付一步完成
displayBillingInformationbooleanNo默认为 true。
true：显示账单信息；
false ：隐藏账单信息，需通过自定义支付按钮传入账单信息
hideTokenListbooleanNo针对TOKEN - 绑卡支付，默认为 false。
true：隐藏已绑定的卡列表；
false：展示卡列表，不传默认展示绑过的卡列表，

config 配置中的 subProductType 必须与下单接口中的 subProductType 一致

variables ​
属性类型必填说明
colorBackgroundstringNo主题背景色
colorPrimarystringNo主题色，如输入框高亮、光标颜色
colorTextstringNo字体颜色
colorDangerstringNo错误提示颜色
borderRadiusstringNo输入框角度
fontSizeBasestringNo基础字体大小，会按照该基准进行缩放
fontFamilystringNo字体样式
styles ​
属性类型必填说明
.pacypay-checkout__payment-methodobject否收银台支付方式容器
.pacypay-checkout_payment-method_headerobject否标题栏
.pacypay-checkout_payment-methodheader_titleobject否标题栏名称
.pacypay-checkout_payment-methodimage_wrapperobject否标题栏图片容器
.pacypay-checkout_payment-method_brandsobject否标题栏右侧银行卡类型容器
.pacypay-checkout_payment-method_imageobject否标题栏图片
.pacypay-checkout_payment-method_brandobject否标题栏右侧银行卡图片
.pacypay-checkout_payment-method_nameobject否标题栏标题名称
.pacypay-checkout_payment-method_detailsobject否表单内容容器
.pacypay-checkout__field-wrapperobject否表单项容器
.pacypay-checkout__fieldobject否标题栏右侧银行卡图片
.pacypay-checkout_payment-method_brandobject否表单项
.pacypay-checkout__field--cardNumberobject否表单项--卡号
.pacypay-checkout__field--expireobject否表单项--到期时间
.pacypay-checkout__field--cvvobject否表单项--CVV
.pacypay-checkout__field--lastNameobject否表单项--name
.pacypay-checkout__label-textobject否表单项标题
.pacypay-checkout__label-text--requireobject否表单项标题必填标识
.pacypay-checkout__inputobject否表单项输入框
.pacypay-checkout__error-textobject否表单项错误提示文案
.pacypay-checkout__buttonobject否按钮
.pacypay-checkout__button--payobject否支付按钮
.pacypay-checkout_button_textobject否按钮文案
.pacypay-checkout__loadingobject否按钮 Loading 容器
.pacypay-checkout__spinnerobject否按钮 Loading 动画

自定义支付按钮 ​

注意

自定义支付按钮需要将 showPayButton 设为 false ，并调用 submit方法

js
pacypay.submit();

如果绑卡时不需要显示账单信息，请将 displayBillingInformation 设为 false，并在submit方法传入账单信息。

js
pacypay.submit({
    billingInformation: {
        "firstName": "ZZ",
        "lastName": "ZZ",
        "phone": "188888888888",
        "email": "shipping@test.com",
        "postalCode": "888888",
        "address": "ShippingAddress",
        "country": "CN",
        "province": "SH",
        "city": "SH",
        "street": "lujiazui",
        "number": "1",
        "identityNumber": "110000"
    }
});

SDK直接支付代码示例 ​

注意

subProductType 必须与 下单接口 的 subProductType 保持一致

js
const transactionId = '下单接口返回的 transactionId';  
const redirectUrl = '下单接口返回的 redirectUrl'; 
const pacypay = new Pacypay(transactionId, {
   locale: 'zh-cn', // en zh-cn ar de es fi fr it ja ko nl no pl pt ru sv th zh-tw
   environment: 'sandbox', // sandbox、production
   mode: 'CARD',
   redirectUrl: redirectUrl, // 此字段由服务端下单接口返回，用于客户端唤起SDK。
   config: {
     subProductType: 'DIRECT', // DIRECT - 直接支付/订阅支付/预授权支付，TOKEN - 绑卡支付
     checkoutTheme: 'light', // light、dark
     customCssURL: '', // 自定义样式链接地址，配置该值后，checkoutTheme 则无效
     variables: {
       "colorBackground": "black", // 主题背景色
       "colorPrimary": "red", // 主题色，如输入框高亮、光标颜色
       "colorText": "white", // 字体颜色
       "colorDanger": "#FF1493", // 错误提示颜色
       "borderRadius": "2px", // 输入框角度
       "fontSizeBase": "16px", // 基础字体大小，会按照该基准进行缩放
       "fontFamily": "Arial, sans-serif", // 字体样式
     },
     // 如果想自定义所有样式则只用配置styles. checkoutTheme,customCssURL,variables都可以不传
     // 详情请看styles属性说明
     styles: {
       ".pacypay-checkout__button--pay": { // 支付按钮样式
       "background-color": "red",
     },
   }
 },
 onPaymentCompleted: function (res) {
   //成功支付后回调方法
   const txtInfo = res.data; // 返回交易结果详情
   const respCode = res.respCode; // 响应码
   const respMsg = res.respMsg; // 响应信息
   if(respCode === '20000') { // respCode 为 20000 表示交易正常
     switch (txtInfo.status) { // 交易状态判断
       case 'S': // status 为 'S' 表示成功
       // 支付最终状态以异步通知结果为准
       break;
       case 'R': // status 为 'R' 表示需要3ds验证
       // 当交易状态为 R 时，商户需要重定向到该URL完成部分交易，包括3ds验证
       window.location.href = txtInfo.redirectUrl;
       break;
     }
   } else {
   // 交易失败
   }
 },
 onError: function (err) {
   //支付异常回调方法
   console.log(err);
   }
 });