支付宝外卡收单使用手册(一) COPYandPAY

最新推荐文章于 2024-03-25 11:44:19 发布

TobbyKwok

最新推荐文章于 2024-03-25 11:44:19 发布

阅读量3.7k

点赞数 1

文章标签：支付宝外卡支付宝外卡信用卡外币支付

支付专栏收录该内容

1 篇文章 0 订阅

订阅专栏

https://alipay-seller.docs.oppwa.com/tutorials/integration-guide

COPYandPAY

3步集成:

步骤1: 准备结账

首先, 执行服务端到服务端的POST请求以便为收银准备必要的数据, 其中包括订单类型, 数量以及币种. 请求成功后会返回一个json字符串, 其中的id值会在第二步创建支付表单时用到.

代码如下:

PHP

   function request() { 
  
      $url = " 
  https://test.oppwa.com/v1/checkouts"; 
  
      $data = "authentication.userId=8a8294174e2eee69014e3e729fb31cba" . 
  
           "&authentication.password=xM3WgEhBRC" . 
  
           "&authentication.entityId=8a8294174e2eee69014e3e729fa21cb6" . 
  
           "&amount=92.00" . 
  
           "&currency=EUR" . 
  
           "&paymentType=PA"; 
  
      $ch = curl_init(); 
  
      curl_setopt($ch, CURLOPT_URL, $url); 
  
      curl_setopt($ch, CURLOPT_POST, 1); 
  
      curl_setopt($ch, CURLOPT_POSTFIELDS, $data); 
  
      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); 
  
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
  
      $responseData = curl_exec($ch); 
  
      if(curl_errno($ch)) { 
  
           return curl_error($ch); 
  
      } 
  
      curl_close($ch); 
  
      return $responseData; 
  
 } 
  
 $responseData = request();

该步骤中可用于发送的全部参数列表, 请见API参考手册( https://alipay-seller.docs.oppwa.com/parameters).

步骤2: 创建支付表单

您只需添加以下HTML/JS内容并填充以下变量到您的页面, 即可创建支付表单.

(1) 步骤1返回的支付id.

(2) shopperResultUrl: 当支付完成后, 用户将被重定向的目的地页面.

   <html> 
  
 <head> 
  
 <style> 
  
    .cnpBillingCheckoutWrapper {position:relative;} 
  
    .cnpBillingCheckoutHeader {width:100%;border-bottom: 1px solid #c0c0c0;margin-bottom:10px;} 
  
    .cnpBillingCheckoutLeft {width:240px;margin-left: 5px;margin-bottom: 10px;border: 1px solid #c0c0c0;display:inline-block;vertical-align: top;padding:10px;} 
  
    .cnpBillingCheckoutRight {width:50%;margin-left: 5px;border: 1px solid #c0c0c0;display:inline-block;vertical-align: top;padding:10px;} 
  
    .cnpBillingCheckoutOrange {font-size:110%;color: rgb(255, 60, 22);font-weight:bold;} 
  
    div.wpwl-wrapper, div.wpwl-label, div.wpwl-sup-wrapper { width: 100% } 
  
    div.wpwl-group-expiry, div.wpwl-group-brand { width: 30%; float:left } 
  
    div.wpwl-group-cvv { width: 68%; float:left; margin-left:2% } 
  
    div.wpwl-group-cardHolder, div.wpwl-sup-wrapper-street1, div.wpwl-group-expiry { clear:both } 
  
    div.wpwl-sup-wrapper-street1 { padding-top: 1px } 
  
    div.wpwl-wrapper-brand { width: auto } 
  
    div.wpwl-sup-wrapper-state, div.wpwl-sup-wrapper-city { width:32%;float:left;margin-right:2% } 
  
    div.wpwl-sup-wrapper-postcode { width:32%;float:left } 
  
    div.wpwl-sup-wrapper-country { width: 66% } 
  
    div.wpwl-wrapper-brand, div.wpwl-label-brand, div.wpwl-brand { display: none;} 
  
    div.wpwl-group-cardNumber { width:70%; float:left; font-size: 20px; } 
  
    div.wpwl-group-brand { width:30%; float:left; margin-top:28px } 
  
    div.wpwl-brand-card { width: 60px } 
  
    div.wpwl-brand-custom { margin: 0px auto; background-image: url(" 
  https://oppwa.com/v1/paymentWidgets/img/brand.png") } 
  
 </style> 
  
 <script src=" 
  https://code.jquery.com/jquery.js" type="text/javascript"></script>  
  
 <script type="text/javascript">  
  
    var wpwlOptions = { 
  
      style: "plain", 
  
      billingAddress: { 
  
        country: "US", 
  
        state: "NY", 
  
        city: "New York", 
  
        street1: "111 6th Avenu", 
  
        street2: "", 
  
        postcode: "12312" 
  
      }, 
  
      forceCardHolderEqualsBillingName: true, 
  
      showCVVHint: true, 
  
      brandDetection: true, 
  
      onReady: function(){  
  
        $(".wpwl-group-expiry").after( $(".wpwl-group-cvv").detach()); 
  
        $(".wpwl-group-cardNumber").after( $(".wpwl-group-brand").detach() ); 
  
        var visa = $(".wpwl-brand:first").clone().removeAttr("class").attr("class", "wpwl-brand-card wpwl-brand-custom wpwl-brand-VISA") 
  
        var master = $(visa).clone().removeClass("wpwl-brand-VISA").addClass("wpwl-brand-MASTER"); 
  
        $(".wpwl-brand:first").after( $(master)).after( $(visa)); 
  
      }, 
  
      onChangeBrand: function(e){ 
  
        $(".wpwl-brand-custom").css("opacity", "0.3"); 
  
        $(".wpwl-brand-" + e).css("opacity", "1");  
  
      } 
  
    } 
  
 </script> 
  
   <script src=" 
  https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={checkoutId}"></script> 
  
 </head> 
  
 <body> 
  
 <div class="cnpBillingCheckoutWrapper"> 
  
   <div class="cnpBillingCheckoutHeader"><img src=" 
  https://alipay-seller.docs.oppwa.com/sites/all/themes/bootstrap_theme/images/poweredByAlipay.png" /></div> 
  
   <div class="cnpBillingCheckoutLeft"> 
  
     <div class="panel panel-default"> 
  
     <div class="panel-heading"> 
  
       <h3 class="panel-title cnpBillingCheckoutPanelTitle">Order total: US €99.00</h3> 
  
     </div> 
  
     <div class="panel-body"> 
  
       <p><strong>Order info</strong></p> 
  
       <p><strong>Order NO: 30038818375462</strong><br /> 
  
       Keter Rattan Cool Barh AliExpress AliExpress KR..</p> 
  
       <p style="text-align:right"><strong>US $95.00</strong></p> 
  
       <p><strong>Order NO: 30038818375462</strong><br /> 
  
       Keter Rattan Cool Barh AliExpress..</p> 
  
       <p style="text-align:right"><strong>US $4.99</strong></p> 
  
     </div> 
  
     <hr /> 
  
     <div class="panel-body"> 
  
       <img src=" 
  https://alipay-seller.docs.oppwa.com/sites/all/themes/bootstrap_theme/images/schemeLogos.png" /> 
  
     </div> 
  
     </div> 
  
   </div> 
  
   <div class="cnpBillingCheckoutRight"> 
  
     <p>Payment Total: <span class="cnpBillingCheckoutOrange">US $99.00</span></p> 
  
     <hr /> 
  
   <form action="{shopperResultUrl}" class="paymentWidgets"></form> 
  
   </div> 
  
 </div> 
  
 </body> 
  
 </html>

查看定制指引( https://alipay-seller.docs.oppwa.com/tutorials/integration-guide/customisation)可帮助您定制您的支付表单.

步骤3: 取得支付状态

支付请求一旦被处理, 用户将被定向到shopperResultUrl指定的地址中, 并附有一个GET参数resourcePath. 想取得支付状态, 您需要发起一个GET请求到baseUrl+resourcePath, 并包含您的验证参数.

resourcePath样例:

 
  resourcePath 
  = 
  /v1/ 
  checkouts 
  /{ 
  checkoutId 
  }/ 
  payment 
 

PHP代码:

   function request() { 
  
      $url = " 
  https://test.oppwa.com/v1/checkouts/{id}/payment"; 
  
      $url .= "?authentication.userId=8a8294174e2eee69014e3e729fb31cba"; 
  
      $url .= "&authentication.password=xM3WgEhBRC"; 
  
      $url .= "&authentication.entityId=8a8294174e2eee69014e3e729fa21cb6"; 
  
      $ch = curl_init(); 
  
      curl_setopt($ch, CURLOPT_URL, $url); 
  
      curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET'); 
  
      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); 
  
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
  
      $responseData = curl_exec($ch); 
  
      if(curl_errno($ch)) { 
  
           return curl_error($ch); 
  
      } 
  
      curl_close($ch); 
  
      return $responseData; 
  
 } 
  
 $responseData = request();

建议您核对返回内容中的以下字段是否与预期一致.

(1) ID(s)

(2) Amount

(3) Currency

(4) Brand

(5) Type

定制 COPYandPAY

您可使用以下选项来定制COPYandPAY的样式.

https://alipay-seller.docs.oppwa.com/tutorials/integration-guide/customisation

默认样式:

您可在支付组件加载前设置wpwlOption对象的style值来变更支付表单的样式.

JS代码:

 
  <script> 
  
  var 
   wpwlOptions  
  = 
    
  { 
  
          style 
  : 
    
  "card" 
  
  } 
  
  </script> 
  
  <script 
    
  async 
    
  src 
  = 
  "https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={checkoutId}" 
  ></script>

语言:

在支付组件加载前设置wpwlOption对象的locale值.

TobbyKwok

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
支付宝外卡收单使用手册(一) COPYandPAY

https://alipay-seller.docs.oppwa.com/tutorials/integration-guideCOPYandPAY3步集成:步骤1: 准备结账首先, 执行服务端到服务端的POST请求以便为收银准备必要的数据, 其中包括订单类型, 数量以及币种. 请求成功后会返回一个json字符串, 其中的id值会在第二步创建支付表单时用到.
复制链接

扫一扫