内嵌式收银台
在阅读此章节之前，请先了解 "如何获得 redirect_url" (opens new window)
# 接入流程
# 服务端接入
商户服务端先获取调取接口获取TOKEN (opens new window)
商户服务端拿到TOKEN 写入http header 并请求 "支付接口" (opens new window)
商户服务端拿到返回的"支付接口" (opens new window) 返回的"redirect_url"完成页面跳转
跳转到Pyvio收银台后录入支付信息完成支付
最终的支付结果会通过通过异步通知的形式主动上报给商户，上报的地址为checkout请求参数"redirect_url"，具体可参考异步通知
# 客户端接入
# 加载JS SDK
<script src="https://cdn.pyvio.com/plugins/payment-sdk-v1.js"></script>
# 初始化 JS SDK 类
<body>
<div id="payment-wrap"></div>
</body>
<script>
const checkout = new window.PYVIO_PAYMENT_PLUGIN({
env: 'sandbox',
manual: true,
size: 'normal',
rootId: 'payment-wrap',
})
</script>
# 初始化参数
| 参数名 | 说明 | 是否必填 | 类型 |
|---|---|---|---|
| env | 请传入 sandbox, prod 或者 production， prod 和 production 是同一个意义。 | 是 | string |
| rootId | DOM ID, 收银台会渲染到此DOM中，如果您不传此字段，收银台将会渲染在当前页面的body标签中。 | 是 | string |
| manual | 设置 manual 为 true, 我们会开放一个名为 checkout.payNow() 的方法，调用此方法等于点击Pay Now按钮。 | 否 | boolean |
# 加载收银台
调用 loadCheckout 方法来渲染收银台。
<script>
// context
checkout.loadCheckout(redirect_url, callback)
</script>
# 调用参数
| 参数名 | 说明 | 是否必填 | 类型 |
|---|---|---|---|
| redirect_url | 开发者唯一标识。 | 是 | string |
| callback | 此函数将会在收银台渲染完成后被调用。 | 否 | function |
# payNow
调用此函数相当于单击页面上的PayNow按钮。
<script>
// context
checkout.payNow()
</script>
# reload
此方法在 loadCheckout 执行成功后方可被调用，调用此方法将刷新收银台。
<script>
// context
checkout.reload()
</script>
# 完整 Demo
html5 + javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Demo</title>
<script src="https://cdn.pyvio.com/plugins/payment-sdk-v1.js"></script>
</head>
<body>
<h1>This is a demo page</h1>
<div id="payment-wrap"></div>
<h2>This is a footer</h2>
</body>
<script>
// 这不是一个真实的 redirect_url，如需测试请填充正确的内容。
const redirect_url = 'https://sandbox-cashier.pyvio.com/checkout?token=417ef70627e96844fceb09b4a3e4611f87d57749a39fdd59d520e00d5f5e85b6'
const checkout = new window.PYVIO_PAYMENT_PLUGIN({
env: 'sandbox',
rootId: 'payment-wrap'
})
checkout.loadCheckout(redirect_url, cb)
function cb(){
console.log('Success')
}
</script>
</html>
# 主题配置
如果您需要个性的Style，请参考下方配置
new window.PYVIO_PAYMENT_PLUGIN({
env: 'sandbox',
rootId: 'payment-wrap',
// theme 控制Style
theme: {
modulesVariable: {
showHeader: true,
showBillingInfo: true,
showSupportCardBrands: true,
showBill: true,
showLocated: true,
showFooterInfo: true,
showPayBtn: true,
showSecurityIconsl: true
},
themeVariable: {
// 定制主题色
themeColor: 'rgba(0, 123, 104, 1)',
// 主题色渐变
themeColorShadow: 'rgba(0, 123, 104, 0.46)',
// 报错颜色
errorColor: 'rgba(234, 91, 57, 1)',
// 报错shadow
errorShadowColor: 'rgba(234, 91, 57, 0.3)',
// 警告颜色
warningColor: '#F57929',
// loading覆盖层色彩
loadingMaskColor: 'rgba(255, 255, 255, 0.2)',
// loading spinner背景色
loadingSpinnerBackColor: 'rgba(0, 0, 0, 0.1)',
// loading spinner主色彩
loadingSpinnerColor: 'rgba(0, 0, 0, 0.8)',
// 元素间最小间距
minDistance: '8px',
// 输入框/下拉选择框高度
inputHeight: '48px',
// 最小字体
minFontSize: '12px',
// 一般字体
commonFontSize: '14px',
// 标题字体
titleFontSize: '16px',
// Checkout页眉安全支付标题字体
secureTitleFontSize: '40px',
// checkout页眉高度
checkoutHeaderHeight: '180px',
// 标题文本色彩
titleTextColor: '#141922',
// 一般文字色彩
commonTextColor: ' #525866',
// 链接文字色彩
linkTextColor: ' #007B68',
// 浅灰色文本色彩
lightGaryTextColor: '#9399A3',
// 卡品牌上下padding
supportCardBrandsPadding: '6px',
// placeholder颜色
placeholderColor: '#999999',
// popup关闭区域高度
popupHeight: '48px',
// 页面左右边距
wrapPadding: '15.8%',
// result结果页content背景色
resultContentBg: '#F7F8FA',
// 表单上下边距
formItemDistance: '14px',
// 左侧billingInfo背景色
billingBg: '#fff',
// 左侧billingInfo右侧边框内阴影色
billingInsetColor: 'rgba(72,88,101,0.06)',
// 主表单背景色
mainFormBg: '#ffffff',
// 表单label颜色
mainFormLabelColor: 'rgba(0, 0, 0, 0.45)',
// 表单value颜色
mainFormValueColor: 'rgba(0, 0, 0, 0.8)',
// header背景色
headerBg: 'linear-gradient(180deg, #F7F9FC 0%, #F3F8FC 100%)',
// 主表单最大宽度
paymentFormMaxWidth: '600px',
// 表单输入框圆角
inputBorderRadius: '4px',
// 主表单padding
formContentPadding: '80px 64px'
}
}
})
modulesVariable
themeVariable
