跳到主要内容

概述​

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

请求示例​

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Oceanpayment Debit/Credit Card|One-Page Checkout</title>
  </head>
  <body>
    <!--表单提交 -->
    <form id="payForm">  
                
      <label>帐户号：</label>
      <input class="form-control" type="text" id="account" name="account" value='由Oceanpayment技术支持提供'/>
      
      <label>终端号:</label>
      <input class="form-control" type="text" id="terminal" name="terminal" value='由Oceanpayment技术支持提供'/>
         
      <label>signValue</label>
      <input class="form-control" type="text" id="signValue" name="signValue" value=""/>
      <label>key</label>
      <input class="form-control" type="text" id="key" name="key" value='由Oceanpayment技术支持提供'/>
 
      <label>网站订单号：</label>
      <input class="form-control" type="text" id="order_number" name="order_number" value=""/>
       
      <label>交易币种:</label>
      <input class="form-control" type="text" id="order_currency" name="order_currency" value="USD"/>
         
      <label>交易金额:</label>  
      <input class="form-control" type="text" id="order_amount" name="order_amount"value="0.01"/>
         
      <label>返回地址:</label>
      <input class="form-control" type="text" id="backUrl" name="backUrl" value="">
          
      <label>支付方式:</label>
      <input class="form-control" type="text" id="methods" name="methods" value="Credit Card"/>
      
      <label>消费者名:</label>
      <input class="form-control" type="text" id="billing_lastName" name="billing_lastName" value="test"/>
       
      <label>消费者姓:</label>
      <input class="form-control" type="text" id="billing_firstName" name="billing_firstName" value="test"/>
                                          
      <label>消费者邮箱:</label>
      <input class="form-control" type="text" id="billing_email" name="billing_email" value="20200312@ebanx.com"/>
                                    
      <label>消费者国家::</label>
      <input class="form-control" type="text" id="billing_country" name="billing_country" value="CN"/>
                                         
      <label>消费者州/省:</label>
      <input class="form-control" type="text" id="billing_state" name="billing_state" value="GD"/>
                                                                      
      <label>消费者城市:</label>
      <input class="form-control" type="text" id="billing_city" name="billing_city" value="sz"/>
                                                                     
      <label>消费者地址:</label>
      <input class="form-control" type="text" id="billing_address" name="billing_address" value="test"/>
                                         
      <label>消费者邮编:</label>
      <input class="form-control" type="text" id="billing_zip" name="billing_zip" value="100000"/>
                                 
      <label>消费者IP:</label>
      <input class="form-control" type="text" id="billing_ip" name="billing_ip" value="127.0.0.1"/>
                                     
      <label>产品名称:</label>
      <input class="form-control" type="text" id="productName" name="productName" value="NOKIA N78"/>
                                   
      <label>数量:</label>
      <input class="form-control" type="text" id="productNum" name="productNum" value="2"/>
                                   
      <label>SKU:</label>
      <input class="form-control" type="text" id="productSku" name="productSku" value="SKU026123"/>

      <label>单价:</label>
      <input class="form-control" type="text" id="productPrice" name="productPrice" value="500"/>
      
      <!--加载Oceanpayment支付页面Div-->
      <div id="oceanpayment-element"></div>        
      <div class="row">
        <div class="col-md-7">
            <div class="form-group">
                <button id="payNow" type="button" class="btn btn-success footable-show" onclick="pay();">Pay Now</button>
            </div>
        </div>
      </div>   
    </form>
  </body>
</html>

<!-- sha256 Js加密参考，建议使用后端sha256加密，加密结构不能暴露在前端 -->
<script src="https://developers.oceanpayment.com/assets/img/payment/sha256.js"></script>
<script src="https://secure.oceanpayment.com/pub/js/jquery/jq.js"></script>
<!-- 加载oceanpayment JS -->
<script src="https://secure.oceanpayment.com/pages/js/oceanpayment.js"></script>

<script>

  //初始化
 $(function() {
      //传true提交沙盒环境，传空提交生产环境。
      Oceanpayment.init(true,'','');
  });

  //签名示例，为了加密的安全性，必须在后端进行加密！！！
  var signValue = sha256_digest($('#account').val()+$('#terminal').val()+$('#order_number').val()
                  +$('#order_currency').val()+$('#order_amount').val()+$('#billing_firstName').val()
                  +$('#billing_lastName').val()+$('#billing_email').val()+'SecureCode->由Oceanpayment技术支持提供');
  $("#signValue").val(signValue);
    
  //获取当前页面的backUrl
  var url = window.parent.location.href;
  $("#backUrl").val(url);

  //支付返回，backUrl返回地址一定要是当前页面的##同源地址，地址路径完全一致##，才能调用oceanpaymentCallBack方法。
  var oceanpaymentCallBack = function(data){	
      if(data.msg){
        //处理卡信息错误
        console.log(data.msg);
      }else{
        //处理下单返回
        //没有报错时，接收backUrl返回，解析返回xml
        //判断以下两个场景：
        //如果xml->pay_url字段为空，则xml就是返回的交易结果。此时也会触发noticeUrl异步通知。
        //如果xml->pay_url字段不为空，则需要重定向打开pay_url完成3D校验，此时支付返回结果会再次发送至backUrl，默认用$_POST接收返回。
        //也会触发noticeUrl异步通知
        console.log(data);
      }	
  }

  //调用支付
  function pay() {
    var register = $("#payForm");
    //Jquery的serialize()方法
    var formData = register.serializeArray();    
    Oceanpayment.checkout(transformToJson(formData));

  }

  //整理提交数据的json
  function transformToJson(formData){
    var obj={}
    for (var i in formData) {
        obj[formData[i].name]=formData[i]['value'];
    }
    return obj;
  }

  //订单号随机生成示例
  var order_number = 'JSCSE-'+Math.floor(Math.random()*Math.pow(10,10));
  $("#order_number").val(order_number);
  
</script>

处理返回​

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

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

var oceanpaymentCallBack = function(data){}
  1. 当卡信息校验失败时，data.msg会返回报错信息，例如：
//卡号输入错误
{"code":-1, "msg":"Your credit card number is incorrect."}
  1. 当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);
    }	
}
  1. 返回示例：
<?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}
  1. 查看付款状态说明，您也需要通过noticeUrl获取交易的异步通知。

签名​

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