跳到主要内容

概述​

通过Oceanpayment，商家可以利用嵌入式集成解决方案将Google Pay付款体验嵌入到他们的结账页面中。

工作原理​

商户通过Oceanpayment提供的嵌入式组件集成Google Pay按钮，并在支付成功后自动生成QuickPay ID。

  1. 在页面中引入Oceanpayment的JS SDK：
//加载Oceanpayment Js文件
<script src="https://secure.oceanpayment.com/pages/js/oceanpayment-googlepay.js"></script>
<script src="https://secure.oceanpayment.com/pub/js/jquery/jq.js"></script>
  1. 在页面上创建一个<div>容器：
//加载Google Pay支付按钮
<div id="oceanpayment-googlepayelement"></div>
  1. 使用初始化并渲染支付UI组件到容器中，初始化init();
  • 传值true提交沙盒环境；
  • 传空提交生产环境；
  • mode = quickpay为创建QuickPay ID模式。
//初始化Oceanpayment
<script>
   $(function() {
        //传true提交沙盒环境，传空提交生产环境。
        onePageGooglePay.init(true, {
            mode: "quickpay",
            cssUrl: '',/*传入线上css样式文件地址，可以控制按钮大小*/
            transactionInfo: {
                //*传入订单实际的金额，币种，国家
                orderCurrency:ORDER_CURRENCY,/*交易币种*/
                orderAmount:ORDER_AMOUNT,/*交易金额*/
                billCountry:BILLING_COUNTRY,/*账单国家*/
            },
            buttonStyle: {
                buttonColor:'',/*按钮颜色*/
                buttonType:'',/*按钮类型*/
                buttonRadius:'',/*圆角*/
                buttonSizeMode:'',/*尺寸样式*/
                buttonLocale:''/*按钮语言*/
            }
        });
  });
</script>
  1. 创建QuickPay ID
  • 调用创建QuickPay ID方法，支付时需要做防重复提交处理；
  • 使用方法transformToJson(formData){}将提交的必填参数转为Json格式；
  • 再调用onePageGooglePay.checkout()提交必要参数给Oceanpayment支付网关。
//提交参数
<script>
//Oceanpayment支付方法
  function opGooglepay() {
    //获取form 表单元素
    var register = $("#payForm");
    //Jquery的serialize()方法
    var formData = register.serializeArray();
    //提交参数信息给Oceanpayment支付网关
    onePageGooglePay.checkout(transformToJson(formData));
  }
  //输出Json数据
  function transformToJson(formData){
    var obj={}
    for (var i in formData) {
      obj[formData[i].name]=formData[i]['value'];
    }
    return obj;
  }
</script>

处理返回​

商户保存返回的卡信息quickpay_id，格式为UUID形式，用来发起快捷/订阅支付。

注意

Oceanpayment将绑卡结果发送至backUrl页面，backUrl传值一定要和当前页面的地址和完整路径完全一致，才能调用oceanpaymentGooglePayCallBack()方法接收支付返回信息。

var oceanpaymentGooglePayCallBack = function(data){}
  1. 当卡信息校验失败时，data.msg会返回报错信息，例如：
{"code":-1, "msg":"xxx"}
  1. 接收绑卡返回：
  • 当data.msg返回为空时，表示卡信息校验通过；
  • 当data.code = 2，表示Google Pay按钮加载成功。
var oceanpaymentGooglePayCallBack = function(data){	
   if (data.code == 2) {
      //唤起按钮，调用创建QuickPay ID
      opGooglepay();
   }else{
      /*处理返回结果*/
      //console.log(data);
   }
}
  1. 当data.code = 3，表示用户关闭了Google Pay支付弹窗，数据返回格式：
{"code":3,"msg":"","method":"GooglePay"}
  1. 返回示例：
<?xml version="1.0" encoding="UTF-8"?>
<response>
  <account>995149</account>
  <terminal>99514901</terminal>
  <signValue>79e63f6995a84934da921bab8a2ba8cb492971a36130a76d58ea18355af7f578</signValue>
  <customer_id>customer_id20240507174225</customer_id>
  <order_notes></order_notes>
  <card_number>411111***1111</card_number>
  <card_type>VISA</card_type>
  <card_country>PL</card_country>
  <quickpay_id>37ca4cff-4e99-4cd6-9869-8d6c7ad259d7</quickpay_id>
  <quickpay_status>1</quickpay_status>
  <quickpay_details>1:Success</quickpay_details>
</response>

签名​

查看详细的签名和验签功能。