亮色模式

国际卡绑卡流程（iframe）

:::tip[]
适用场景

支付方式：国际卡绑卡
集成模式：嵌入式 iframe 模式

开放能力对接清单：

一、业务时序图

:::tip[]
通过 iframe 集成模式对接国际卡绑卡，实现用户在商家平台的绑卡场景，商家无需 PCI 资质认证；
:::
国际卡独立绑卡 - iframe 流程图.jpg

用户在商家网站/APP内进行绑卡；商家客户端向后端发送请求绑卡指令； **商家服务端调用连连全球收单的 [API-获取iframe凭证](https://doc.lianlianpay.com/3476164e0?nav=2) 获取凭证信息；** **连连全球收单同步返回iframe凭证信息；** 商家服务端向商家客户端传输iframe凭证信息；商家客户端使用 iframe 凭证加载连连 iframe 页面到商家绑卡页面；商家客户端向用户展示绑卡页面；用户在绑卡页面填写卡信息；商家客户端调用连连全球收单SDK提交绑卡；连连全球收单iframe模块同步返回绑卡结果；商家客户端向用户展示绑卡结果； **绑卡成功后，连连开放平台会向商家服务端发送 [Notify - 绑卡结果通知](https://doc.lianlianpay.com/3476486e0?nav=1) ，同时建议商家对接 [API-绑卡查询](https://doc.lianlianpay.com/3476481e0?nav=1) 接口，确保及时更新绑卡状态；** **商家服务端收到绑卡结果通知后，须返回固定通知响应，表示商家已处理结果，否则会重新投递消息；**

:::info[]
绑卡后返回的卡凭证类型分为：

PAYMENT_TOKEN 可以直接用来支付的卡凭证，当调用 API - 支付请求时，传入card_token代替卡信息进行支付；
LIANLIAN_TOKEN 需要动态收集卡 CVV 的卡凭证，使用连连全球收单提供 iframe 模块进行收集用户卡 CVV 信息,收集完成会得到动态卡凭证进行支付；
:::

二、开发说明

准备工作

客户端开发是基于连连 SDK 进行开发。

流程说明

由于不同环境所使用的 SDK 文件地址不一样，商户需确认其当前环境，再进行引入。测试/沙箱：`https://gacashier.lianlianpay-inc.com/sandbox2/llpay.min.js` 生产：`https://secure-checkout.lianlianpay.com/v2/llpay.min.js` 此步骤需要 iframe 凭证作为参数，[iframe 凭证获取](https://doc.lianlianpay.com/3476164e0?nav=2) ```html

```

<button onclick="confirmBindingCard()">绑卡提交</button>
<script>function confirmBindingCard() {
    LLP.getValidateResult().then((res) =>{
      if (res && !res.validateResult) {
        // 校验未通过
        // res = { code: 'F40000', message: 'Parameter validation failed', validateResult: false }
        console.log('校验未通过');
      } else {
        console.log('校验通过');
        LLP.confirmBindingCard().then(function(confirmBindingCardResult) {
          // confirmBindingCardResult数据结构说明参考下列要点说明
          console.log('confirmBindingCardResult', confirmBindingCardResult);
        });
      }
    });
  }
</script>

:::info[]
确认绑卡返回结果confirmBindingCardResult说明，code为400006时是渠道拒绝，message是渠道拒绝原因
| code | message |
| ------ | ------------------------- |
| 200000 | Success |
| 400005 | Wait and retry |
| 400006 | Issuing bank is not supported/Issuing bank time out/Issuing bank verification failed |
| 990000 | Network error |
| F90000 | Please contact technology |

:::

```javascript // 设置多语言，仅支持以下所列： // 葡语：pt-BR，英文：en-US，简中：zh-CN，繁中：zh-TW，日语：ja-JP // 系统将自动获取浏览器语言，同时也支持商家上传设置。如果传入的语言系统不支持，则会自动转换为“en-US”； LLP.setLanguage('en-US'); ```

三、Demo 示例

<html>
  
  <head>
    <metaname="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /></head>
  
  <body style="margin: 0;">
    <div id="llpay-binding-card-container"></div>
    <button onclick="confirmBindingCard()">绑卡提交</button></body>
  <script src="https://gacashier.lianlianpay-inc.com/sandbox2/llpay.min.js"></script>
  <script>var bindingCardEle = LLP.elements();
    var bindingCard = bindingCardEle.create('binding-card', {
      //必传，iframe凭证，
      token: 'XXXX',
      //必传，与商户报备地址一致
      merchantUrl: 'XXXXXX',
      //选传，主题色配置，不传则为默认色'#0074D5'
      themeColor: '#0074D5',
    });
    bindingCard.mount('#llpay-binding-card-container');

    function confirmBindingCard() {
      LLP.getValidateResult().then((res) =>{
        if (res && !res.validateResult) {
          console.log('校验未通过');
        } else {
          console.log('校验通过');
          LLP.confirmBindingCard().then(function(confirmBindingCardResult) {
            console.log('confirmBindingCardResult', confirmBindingCardResult);
          });
        }
      });
    }

    LLP.setLanguage('en-US');</script>

</html>

四、测试集成

连连全球收单为商家提供专用测试数据，用于沙箱环境联调开发，详情查看测试验收场景