Oceanpayment Developer

概述

通过通过Oceanpayment JS SDK将支付表单直接嵌入到您的checkout页面中。用户无需跳转即可完成支付，完美保持品牌一致性。

嵌入式(Embedded)

嵌入式支付让客户在您的网站内完成付款，无需跳转到第三方页面。减少支付过程中的流失，显著提高转化率。

📈

提高转化率

减少页面跳转带来的用户流失，支付成功率提升高达30%

🎨

品牌一致性

完全自定义支付表单样式，与您的网站设计完美融合

🚀

流畅体验

无中断的支付流程，提供类似原生应用的流畅体验

开始集成

最受欢迎的支付解决方案

开始之前

注意

嵌入式集成方案只支持信用卡，GooglePay，ApplePay支付方式。

流程图

工作原理

Credit Card
GooglePay
ApplePay

在页面中引入Oceanpayment的JS SDK：

//加载Oceanpayment Js文件
<script src="https://secure.oceanpayment.com/pages/js/oceanpayment.js"></script>
//加载Jquery
<script src="https://secure.oceanpayment.com/pub/js/jquery/jq.js"></script>

在页面上创建一个<div>容器：

//加载Oceanpayment支付页面
<div id="oceanpayment-element"></div>

使用初始化并渲染支付UI组件到容器中，初始化init();

传值true提交沙盒环境；
传空提交生产环境。

<script>
  $(function() {
    //传true提交沙盒环境，传空提交生产环境
    Oceanpayment.init(true,'','');
  });
</script>

提交支付

调用支付方法，支付时需要做防重复提交处理；
使用方法transformToJson(formData){}将提交的必填参数转为Json格式；
再调用checkout()提交必要参数给Oceanpayment支付网关。

//提交参数
<script>
  //支付方法
  function pay() {
    //获取form表单元素
    var register = $("#payForm");
    //Jquery的serialize()方法
    var formData = register.serializeArray();
    //提交参数信息给Oceanpayment支付网关
    Oceanpayment.checkout(transformToJson(formData));
  }
  
  //输出Json数据
  function transformToJson(formData){
    var obj={}
    for (var i in formData) {
      obj[formData[i].name]=formData[i]['value'];
    }
    return obj;
  }
</script>

在页面中引入Oceanpayment的JS SDK：

//加载Oceanpayment Js文件
<script src="https://secure.oceanpayment.com/pages/js/oceanpayment-googlepay.js"></script>
//加载Jquery
<script src="https://secure.oceanpayment.com/pub/js/jquery/jq.js"></script>

在页面上创建一个<div>容器：

//加载GooglePay支付按钮
<div id="oceanpayment-googlepayelement"></div>

使用初始化并渲染支付UI组件到容器中，初始化init();

传值true提交沙盒环境；
传空提交生产环境。

//初始化Oceanpayment
<script>
   $(function() {
        //传true提交沙盒环境，传空提交生产环境。
        onePageGooglePay.init(true, {
            cssUrl: '',/*传入线上css样式文件地址，可以控制按钮大小*/
            transactionInfo: {
                //*传入订单实际的金额，币种，国家
                orderCurrency:ORDER_CURRENCY,/*交易币种*/
                orderAmount:ORDER_AMOUNT,/*交易金额*/
                billCountry:BILLING_COUNTRY,/*账单国家*/
            },
            buttonStyle: {
                buttonColor:'',/*按钮颜色*/
                buttonType:'',/*按钮类型*/
                buttonRadius:'',/*圆角*/
                buttonSizeMode:'',/*尺寸样式*/
                buttonLocale:''/*按钮语言*/
            }
        });
  });
</script>

提交支付

调用支付方法，支付时需要做防重复提交处理；
使用方法transformToJson(formData){}将提交的必填参数转为Json格式；
再调用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>

开始之前

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

在页面中引入Oceanpayment的JS SDK：

//加载Oceanpayment Js文件
<script src="https://secure.oceanpayment.com/pages/js/oceanpayment-applepay.js"></script>
//加载Jquery
<script src="https://secure.oceanpayment.com/pub/js/jquery/jq.js"></script>

在页面上创建一个<div>容器：

//加载ApplePay支付按钮
<div id="oceanpayment-applepayelement"></div>

使用初始化并渲染支付UI组件到容器中，初始化init();

传值true提交沙盒环境；
传空提交生产环境。

//初始化Oceanpayment
<script>
   $(function() {
        //传true提交沙盒环境，传空提交生产环境。
        onePageApplePay.init(true, {
            terminal: '', /*Oceanpayment终端号*/
            cssUrl: '',/*传入线上css样式文件地址，可以控制按钮大小*/
            transactionInfo: {
                //*传入订单实际的金额，币种，国家
                orderCurrency:ORDER_CURRENCY,/*交易币种*/
                orderAmount:ORDER_AMOUNT,/*交易金额*/
                billCountry:BILLING_COUNTRY,/*账单国家*/
                orderNumber:ORDER_NUMBER,/*订单号*/
                billAddress:BILLING_ADDRESS /*账单地址*/
            },
            buttonStyle: {
                buttonstyle:'', /*按钮颜色*/
                type:'' /*按钮类型*/
            }
        });
  });
</script>

提交支付

调用支付方法，支付时需要做防重复提交处理；
使用方法transformToJson(formData){}将提交的必填参数转为Json格式；
再调用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>

处理返回

前端监听支付结果事件，后端通过异步通知确认最终结果。

注意

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

Credit Card
GooglePay
ApplePay

var oceanpaymentCallBack = function(data){}

当卡信息校验失败时，data.msg会返回报错信息，例如：

//卡号输入错误
{"code":-1, "msg":"Your credit card number is incorrect."}

当data.msg返回为空时，表示卡信息校验通过。在else中接收支付返回，判断以下两个场景：

如果xml->pay_url字段为空，无3D验证环节，则xml就是返回的支付结果。此时也会触发noticeUrl异步通知。
如果xml->pay_url字段不为空，有3D验证环节，需要重定向打开pay_url完成3D校验，此时支付返回结果会再次发送至backUrl，默认用$_POST接收返回。此时也会触发noticeUrl异步通知。

var oceanpaymentCallBack = function(data){	
    if(data.msg){
       //处理卡信息错误
       console.log(data.msg);
    }else{
       //处理下单返回
       //没有报错时，接收backUrl返回，解析返回xml
       console.log(data);
    }	
}

var oceanpaymentGooglePayCallBack = function(data){}

当data.code == 2，表示GooglePay按钮加载成功。在else中接收支付返回，判断以下两个场景：

如果xml->pay_url字段为空，则xml就是返回的支付结果。此时也会触发noticeUrl异步通知。
如果xml->pay_url字段不为空，则需要重定向打开pay_url完成3D校验，此时支付返回结果会再次发送至backUrl，默认用$_POST接收返回。此时也会触发noticeUrl异步通知。

var oceanpaymentGooglePayCallBack = function(data){	
   if (data.code == 2) {
      //唤起按钮，调用支付
      opGooglepay();
   }else{
      /*处理下单返回*/
      //console.log(data);
   }
}

当data.code == 3，表示用户关闭了GooglePay支付弹窗，数据返回格式：

{"code":3,"msg":"","method":"GooglePay"}

var oceanpaymentApplePayCallBack = function(data){}

当data.code == 2，表示ApplePay按钮加载成功。在else中接收支付返回，判断以下两个场景：

如果xml->pay_url字段为空，则xml就是返回的支付结果。此时也会触发noticeUrl异步通知。
如果xml->pay_url字段不为空，则需要重定向打开pay_url完成3D校验，此时支付返回结果会再次发送至backUrl，默认用$_POST接收返回。此时也会触发noticeUrl异步通知。

var oceanpaymentApplePayCallBack = function(data){	
   if (data.code == 2) {
      //唤起按钮，调用支付
      opApplepay();
   }else{
      /*处理下单返回*/
      //console.log(data);
   }
}

当data.code == 3，表示用户关闭了ApplePay支付弹窗，数据返回格式：

{"code":3,"msg":"","method":"GooglePay"}

返回示例：

3D场景
非3D场景

<?xml version="1.0" encoding="UTF-8"?>
<response>
    <notice_type>transaction</notice_type>
    <push_dateTime>2025-09-03 10:21:14</push_dateTime>
    <account>995149</account>
    <terminal>99514901</terminal>
    <signValue>924347D8E9C9BAC2EC91449C70540FF49E0DD5711F03E8A871DCA34CED023AB6</signValue>
    <methods>Credit Card</methods>
    <order_number>JSCSE-3128790866</order_number>
    <card_country>PL</card_country>
    <order_currency>USD</order_currency>
    <order_amount>0.01</order_amount>
    <order_notes></order_notes>
    <card_number>411111***1111</card_number>
    <card_type>Visa</card_type>
    <payment_country></payment_country>
    <payment_id>250902111334242179639</payment_id>
    <payment_authType>2</payment_authType>
    <payment_status>-1</payment_status>
    <payment_details>80093:3D Authorized Service not completed</payment_details>
    <payment_solutions></payment_solutions>
    <payment_risk></payment_risk>
    <payment_amount></payment_amount>
    <payment_exchangeRate></payment_exchangeRate>
    <auth_reason></auth_reason>
    <auth_code></auth_code>
    <pay_userId></pay_userId>
    <pay_url>https://secure.oceanpayment.com:443/gateway/direct/redirect?pay_id=af5e28ee57061f4fd1dd307a7bc56c7289d9041d0b5494195d91b7c5166b6e30</pay_url>
</response>

商户将用户重定向到pay_url ：

HTTP/1.2 301 Moved Permanently
Location: {pay_url}

<?xml version="1.0" encoding="UTF-8"?>
<response>
    <notice_type>transaction</notice_type>
    <push_dateTime>2025-09-03 10:21:14</push_dateTime>
    <account>995149</account>
    <terminal>99514901</terminal>
    <signValue>6E48108837603DF6758BD6CE81C9F8AEE6FDC40D14D056C41EBCC1B28B1F2A0D</signValue>
    <methods>Credit Card</methods>
    <order_number>JSCSE-3128790866</order_number>
    <card_country>PL</card_country>
    <order_currency>USD</order_currency>
    <order_amount>0.01</order_amount>
    <order_notes></order_notes>
    <card_number>411111***1111</card_number>
    <card_type>Visa</card_type>
    <payment_country>-</payment_country>
    <payment_id>250903102114589130422</payment_id>
    <payment_authType>0</payment_authType>
    <payment_status>1</payment_status>
    <payment_details>80000:Transaction Approved</payment_details>
    <payment_solutions>None required.</payment_solutions>
    <payment_risk></payment_risk>
    <payment_amount></payment_amount>
    <payment_exchangeRate></payment_exchangeRate>
    <auth_code></auth_code>
    <pay_userId></pay_userId>
</response>

查看付款状态说明，您也需要通过noticeUrl获取交易的异步通知。

签名

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

API参考

👉即刻探索我们的。

概述​

嵌入式(Embedded)

开始之前​

流程图​

工作原理​

处理返回​

签名​

API参考​

概述

开始之前

流程图

工作原理

处理返回

签名

API参考