亮色模式

国际卡支付流程（iframe）

:::tip[]
适用场景

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

开放能力对接清单：

API-获取iframe凭证
API-支付
API-支付查询
Notify - 支付结果通知
:::
```
  ## 一、业务时序图
```

:::tip[]
通过 iframe 集成模式对接国际卡支付，嵌入在商家结账页面，商家无需 PCI 资质认证；
:::

    ![国际卡 - iframe 流程图.jpg](https://api-test.lianlianpay-inc.com/api/v1/projects/345279/resources/338416/image-preview)

用户在商家网站/APP内购物下单；商家客户端向后端发送请求支付指令； **商家服务端调用连连全球收单的 [API-获取iframe凭证](https://doc.lianlianpay.com/3476164e0?nav=2) 获取凭证信息；** **连连全球收单同步返回iframe凭证信息；** 商家服务端向商家客户端传输iframe凭证信息；商家客户端使用 iframe 凭证加载连连 iframe 页面到商户收银台页面；商家客户端向用户展示结算付款页面；用户选择国际卡进行支付并输入卡信息；用户输入完成后确认付款；商家客户端调用连连全球收单SDK获取卡凭证；连连全球收单iframe模块同步返回卡凭证；商家客户端组织参数向后端发送指令； **商家服务端调用连连全球收单的 [API-支付](https://doc.lianlianpay.com/3476473e0?nav=2) 接口进行创单支付**； **同步返回支付结果，国际卡支付可能会返回用户需要3DS跳转认证；** 商家服务端判断如果需要3DS认证，给客户端返回3DS认证地址；商家客户端跳转3DS认证地址；用户在3DS页面进行安全认证操作； **支付成功后，连连开放平台会向商家服务端发送 [Notify - 支付结果通知](https://doc.lianlianpay.com/3476484e0?nav=2) ，同时建议商家对接 [API-支付查询](https://doc.lianlianpay.com/3476474e0?nav=2) 接口，确保及时更新订单状态；** **商家服务端收到支付结果通知后，须返回固定通知响应，表示商家已处理结果，否则会重新投递消息；**

二、订单处理说明

- `payment_status = "PS"` 时，说明连连创单成功且支付完成，商家可以更新自己的订单状态； - `payment_status = "PP"` & `3ds_status = ""` 时，说明连连创单成功且向银行支付请求完成，银行正在处理该请求，支付结果会以开放消息方式通知给商家指定的 `notification_url` 服务地址； - `payment_status = "PP"` & `3ds_status = "CHALLENGE"` 时，此种结果需要买家完成 3ds 认证，商家系统需要控制页面跳转到 `payment_url` 地址，这个地址会跳转到银行 3ds 认证页面，买家完成 3ds 认证后连连全球收单会自动发起支付，支付结果会以开放消息方式通知给商家指定的 `notification_url` 服务地址； - 支付失败结果中 `return_code`，`return_msg` 中提示原因，可以将 `return_code` 映射为商家自己的支付提示信息；

:::info[]
支持通过已绑定的卡进行支付，但需注意，支付时需要将“卡凭证标识”通过传入 API-支付中 payment_data.card.card_token 字段，代替卡信息传给连连全球收单；
:::

三、开发说明

准备工作

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

流程说明

由于不同环境所使用的 SDK 文件地址不一样，商户需确认其当前环境，再进行引入。测试/沙箱：`https://gacashier.lianlianpay-inc.com/sandbox2/llpay.min.js` 生产：`https://secure-checkout.lianlianpay.com/v2/llpay.min.js` 编写 iframe 的父容器，id 可自定义，需要保证 mount 挂载方法里的 id 传值与此一致

<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: '',
    merchantUrl: window.location.href,
});
card.mount('#llpay-card-element');

支付按钮绑定点击事件，事件中调用连连 SDK 获取卡凭证; 组织参数调用商家后端接口发起支付，商家后端接口实现调用连连支付创单开放接口;

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

四、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>

五、测试集成

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