亮色模式
国际卡支付流程（iframe）
:::tip[]
适用场景
- 支付方式：国际卡支付
- 集成模式：嵌入式 iframe 模式
开放能力对接清单：
-
## 一、业务时序图
:::tip[]
通过 iframe 集成模式对接国际卡支付，嵌入在商家结账页面，商家无需 PCI 资质认证；
:::
二、订单处理说明
:::info[]
支持通过已绑定的卡进行支付，但需注意，支付时需要将“卡凭证标识”通过传入 API-支付 中 payment_data.card.card_token 字段，代替卡信息传给连连全球收单；
:::
三、开发说明
准备工作
客户端开发是基于连连 SDK 进行开发。
流程说明
<div id="llpay-card-element"></div>
创建连连 iframe 并渲染到商家支付界面，此步骤需要 iframe 凭证作为参数，[iframe 凭证获取](https://doc.lianlianpay.com/3476164e0)
var elements = LLP.elements();
var card = elements.create('card', {
//通过开放接口API获取
token: 'xxxx',
style: {
base: {
backgroundColor: '#f8f8f8',
bolderColor: '#f1f1f1',
color: '#bcbcbc',
fontWeight: '400',
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
fontSize: '14px',
fontSmoothing: 'antialiased',
floatLabelSize: '12px',
floatLabelColor: '#333333',
floatLabelWeight: '100',
},
},
apiType: '',
/* paymentMethods：
* 类型: string[]，
* 类型的枚举值: "google_pay","apple_pay","inter_credit_card";
* 若不传 paymentMethods，则所有支付方式均展示
*/
//paymentMethods: ['google_pay','apple_pay','inter_credit_card'],
merchantUrl: window.location.href,
});
card.mount('#llpay-card-element');
<button onclick="handleSubmit()">Submit</button>
<script>// 调用连连SDK获取卡凭证，组织参数提交支付
function handleSubmit() {
LLP.getValidateResult().then(function(res) {
if (res && !res.validateResult) {
console.log('校验不通过，支付取消');
} else {
LLP.confirmPay().then(function(result) {
if (result && result.data) {
let card_token = result.data; //卡凭证信息
//组织参数提交支付
//....
}
});
}
});
}</script>
更多方法
方法名称
listenPaymentMethodChange(callback)
方法说明
- 适用场景：商家对接iframe多种支付方式，通过监听当前用户选择的支付方式，制定不同的业务策略
- 参数：callback: (data: any) => void - 回调函数，接收支付方式变化的数据
- 返回值：返回一个卸载函数，用于停止监听支付方式变化
使用示例
// 开始监听支付方式变化
const unListen = LLP.listenPaymentMethodChange(function(data) {
//data:{paymentMethod: 'google_pay'}
//paymentMethod值为google_pay apple_pay inter_credit_card
console.log('支付方式变化:', data.paymentMethod);
});
// 在需要时停止监听
// unListen();
方法名称
setLanguage(lang: any)
方法说明
- 适用场景：支持商家本地化展业，可以采用当地常用语言，提高用户转化率
- 支持切换的多语言：
葡语：pt-BR，英文：en-US，简体中文：zh-CN，繁体中文：zh-TW，日语：ja-JP； - 系统会自动获取当前浏览器的语言，也支持商家自定义语言。当商家上送的语言系统暂不支持，则会自动转换为“
en-US”；
使用示例
window.onload=function(){
LLP.setLanguage('en-US');
}
四、Demo 示例
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /></head>
<body>
<!--连连iframe模块父容器-->
<div id="llpay-card-element"></div>
<!--模拟支付提交按钮并绑定事件-->
<div>
<button onclick="handleSubmit()">Submit</button></div>
</body>
<!-- 1、 引入连连sdk文件 -->
<script src="https://gacashier.lianlianpay-inc.com/sandbox2/llpay.min.js"></script>
<script>// 2、商家支付界面嵌入连连iframe模块
var elements = LLP.elements();
var card = elements.create('card', {
//通过开放接口API获取
token: 'XXXX',
style: {
base: {
backgroundColor: '#f8f8f8',
bolderColor: '#f1f1f1',
color: '#bcbcbc',
fontWeight: '400',
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
fontSize: '14px',
fontSmoothing: 'antialiased',
floatLabelSize: '12px',
floatLabelColor: '#333333',
floatLabelWeight: '100',
},
},
//与商家报备地址一致
merchantUrl: '',
});
card.mount('#llpay-card-element');
//3、调用连连SDK获取卡凭证，组织参数提交支付
function handleSubmit() {
LLP.getValidateResult().then(function(res) {
if (res && !res.validateResult) {
console.log('校验不通过，支付取消');
} else {
LLP.confirmPay().then(function(result) {
if (result && result.data) {
let card_token = result.data; //卡凭证信息
//组织参数提交支付
//....
}
});
}
});
}</script>
</html>
五、测试集成
- 连连全球收单为商家提供专用测试数据，用于沙箱环境联调开发，详情查看测试验收场景