亮色模式

Google Pay 流程（iframe）

:::tip[]

适用场景

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

开放能力对接清单：

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

请您提供用于对接 Google Pay 的站点域名地址（域名需要以 HTTPS 协议开头）和付款人购物截图，用于向渠道完成申报相关工作（如果您测试和正式环境的域名不同，需要分别进行申报）;
请确保您的联调环境能够访问外网，并提供测试对接的谷歌邮箱（需要未绑定过google账号），连连技术绑定完成后，您需要登录确认加入测试组；
您可以使用Google Pay的国家/地区列表；
支持的浏览器列表；

:::

一、业务时序图

:::tip[]
通过 iframe 集成模式对接 Google Pay，嵌入在商家结账页面；
:::
Google Pay - iframe 流程图.jpg

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

三、开发说明

准备工作

客户端开发是基于连连 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');

    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>

五、测试集成

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