跳到主要内容

概述​

Apple Pay集成绑卡创建QuickPay ID有两种方式，选择您合适的方式：

  • 嵌入式创建：商户通过 Oceanpayment提供的嵌入式组件集成Apple Pay按钮，并在支付成功后自动生成 QuickPay ID。
  • 直连创建：商户通过集成官方Apple Pay按钮，服务端接口直接调用 Oceanpayment创建QuickPay ID。

工作原理​

开始之前

Apple Pay使用嵌入式集成时，商户必须先为其注册的每个域名添加Oceanpayment托管域名验证文件。

  1. 在页面中引入Oceanpayment的JS SDK：
//加载Oceanpayment Js文件
<script src="https://secure.oceanpayment.com/pages/js/oceanpayment-applepay.js"></script>
<script src="https://secure.oceanpayment.com/pub/js/jquery/jq.js"></script>
  1. 在页面上创建一个<div>容器：
//加载Apple Pay按钮
<div id="oceanpayment-applepayelement"></div>
  1. 使用初始化并渲染UI组件到容器中，初始化init();
  • 传值true提交沙盒环境；
  • 传空提交生产环境；
  • mode = quickpay为创建QuickPay ID模式。
//初始化Oceanpayment
<script>
   $(function() {
        //传true提交沙盒环境，传空提交生产环境。
        onePageApplePay.init(true, {
            terminal: '', /*Oceanpayment终端号*/
            mode: "quickpay",
            cssUrl: '',/*传入线上css样式文件地址，可以控制按钮大小*/
            transactionInfo: {
                //*传入订单实际的金额，币种，国家
                orderCurrency:ORDER_CURRENCY,/*交易币种*/
                orderAmount:ORDER_AMOUNT,/*交易金额*/
                billCountry:BILLING_COUNTRY,/*账单国家*/
                orderNumber:ORDER_NUMBER,/*订单号*/
                billAddress:BILLING_ADDRESS /*账单地址*/
            },
            buttonStyle: {
                buttonstyle:'', /*按钮颜色*/
                type:'' /*按钮类型*/
            }
        });
  });
</script>
  1. 创建QuickPay ID
  • 调用创建QuickPay ID方法需要做防重复提交处理；
  • 使用方法transformToJson(formData){}将提交的必填参数转为Json格式；
  • 再调用onePageApplePay.checkout()提交必要参数给Oceanpayment支付网关。
//提交参数
<script>
//Oceanpayment创建方法
  function opApplepay() {
    //获取form 表单元素
    var register = $("#payForm");
    //Jquery的serialize()方法
    var formData = register.serializeArray();
    //提交参数信息给Oceanpayment支付网关
    onePageApplePay.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传值一定要和当前页面的地址和完整路径完全一致，才能调用oceanpaymentApplePayCallBack()方法接收支付返回信息。

var oceanpaymentApplePayCallBack = function(data){}
  1. 当卡信息校验失败时，data.msg会返回报错信息，例如：
{"code":-1, "msg":"xxx"}
  1. 接收绑卡返回：
  • 当data.msg返回为空时，表示卡信息校验通过；
  • 当data.code = 2，表示Apple Pay按钮加载成功。
var oceanpaymentApplePayCallBack = function(data){	
   if (data.code == 2) {
      //唤起按钮，调用创建QuickPay ID
      opApplepay();
   }else{
      /*处理返回结果*/
      //console.log(data);
   }
}
  1. 当data.code = 3，表示用户关闭了Apple Pay支付弹窗，数据返回格式：
{"code":3,"msg":"","method":"ApplePay"}
  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>

签名​

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

API参考​

👉即刻探索我们的。