亮色模式

Apple Pay 流程（iframe）

:::tip[]
适用场景

支付方式：Apple Pay
集成模式：嵌入式 iframe 模式

开放能力对接清单：

:::caution[Apple Pay 对接前准备]

请您提供显示 Apple Pay 按钮的域名地址，我们将协助向渠道完成申报相关工作；
将连连提供的 apple-developer-merchantid-domain-association.txt 上传到您的服务器中，并确保https://{域名}/.well-known/apple-developer-merchantid-domain-association.txt地址访问可以被访问，**注意：域名需要以 HTTPS 协议开头，Apple 会通过指定 IP 访问 txt 文件，请确认是否存在IP访问限制，查看Apple出口IP**。
请确保您的联调环境能够访问外网，如果您需要测试设备是否支持Apple Pay，可以通过Apple官网Demo进行测试。建议使用iPhone手机（型号为iPhone 11及以上，且只支持 Safari 浏览器），如提示设备不支持可以更新至iOS最新版本后重试，参考支持设备
Apple Pay仅支持 Visa 和 MasterCard 信用卡，沙箱环境查看支持测试卡；
您可以使用Apple Pay的国家列表；
支持的发卡行名单；
支持的浏览器列表；

:::

    ## 一、业务时序图

:::tip[]
通过 iframe 集成模式对接 Apple Pay，嵌入在商家结账页面；
:::

    ![Apple Pay - iframe 流程图.jpg](https://api-test.lianlianpay-inc.com/api/v1/projects/345279/resources/338420/image-preview)

用户在商家网站/APP内购物下单；商家客户端向后端发送请求支付指令； **商家服务端调用连连全球收单的 [API-获取iframe凭证](https://doc.lianlianpay.com/3476164e0?nav=2) 获取凭证信息；** **连连全球收单同步返回iframe凭证信息；** 商家服务端向商家客户端传输iframe凭证信息；商家客户端使用 iframe 凭证加载连连 iframe 页面到商户收银台页面，开启监听函数callBack(card_token)；商家客户端向用户展示结算付款页面；用户选择Apple Pay进行支付；连连全球收单iframe模块执行回调函数callBack(card_token)；商家客户端组织参数向后端发送指令； **商家服务端调用连连全球收单的 [API-支付](https://doc.lianlianpay.com/3476473e0?nav=2) 接口进行创单支付**； **连连全球收单同步返回支付结果；** **支付成功后，连连开放平台会向商家服务端发送 [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` 映射为商家自己的支付提示信息；

三、开发说明

准备工作

客户端开发是基于连连 SDK 进行开发。
连连 iframe 页面渲染示例：

流程说明

由于不同环境所使用的 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', {
    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,
    // 应Google Pay要求，transactionInfo对象为必传项
    transactionInfo: {
        //交易的总货币价值，必传，类型：string，且必须为两位小数
        totalPrice: '100.00',
        //交易的币种，必传，类型：string
        currencyCode: 'USD',
    },
});
// 挂载到 HTML 中 id 为 llpay-card-element 标签上
card.mount('#llpay-card-element');

```js LLP.openListeningLLpayCardToken(function(result) { if (result && result.data) { let card_token = result.data; //卡凭证信息 //组织参数提交支付 //.... } }); ```

四、Demo 示例

<html>
  
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /></head>
  
  <body style="margin: 0;">
    <!--连连iframe模块父容器-->
    <div id="llpay-card-element"></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-iframe凭证获取
      token: "XXX",
      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: "",
      transactionInfo: {
        //交易的总货币价值，类型：string，且必须为两位小数
        totalPrice: '100.00',
        currencyCode: 'USD',
      },
    });
    card.mount('#llpay-card-element');
    //3、开启监听函数用来接收支付所用卡凭证,待函数回调返回卡凭证,客户端组织参数提交支付
    LLP.openListeningLLpayCardToken(function(result) {
      if (result && result.data) {
        let card_token = result.data;
        //组织参数提交支付
        //....
      }
    });</script>

</html>

五、测试集成

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