PayPal JavaScript SDK 客户端不发布到服务器

Posted 2023-02-22

【中文标题】PayPal JavaScript SDK 客户端不发布到服务器

【英文标题】：PayPal JavaScript SDK client side does not post to server

【发布时间】：2019-07-29 15:45:44

【问题描述】：

我应该如何使用 paypal SDK 将 orderID 发布到服务器？示例代码在 localhost 和远程主机上都不起作用。我提交 PayPal 按钮后，帖子为空。

据此， https://developer.paypal.com/docs/checkout/integrate/#6-verify-the-transaction

PayBundle\Resources\actions\ppal\ppalAction_brt_stkovr.php

<?php

use PayBundle\actions\Order;  

echo "<br><br> POST ="; print_r($_POST);  
file_put_contents( PHP_EOL . PHP_EOL . __DIR__ .'/out.php', json_encode( $_POST ) .' from '.__FILE__, FILE_APPEND );

include_once ( PATH_ACTIONS_PAY . '/ppal/__init.php' );
include_once ( PATH_ACTIONS_PAY . '/ppal/__payAInit.php' );

require_once PATH_VENDOR . '/braintree/braintree_php/lib/Braintree.php';

use Sample\PayPalClient; 
use PayPalCheckoutSdk\Orders\OrdersGetRequest;

Braintree_Configuration::environment( 'sandbox' );
Braintree_Configuration::merchantId( 'x' );
Braintree_Configuration::publicKey( 'y' );
Braintree_Configuration::privateKey( 'z' );


if( isset($_POST['payPp'] ) )   

    include_once ( PATH_ACTIONS_PAY . '/ppal/pay/'.$this->vdArr['lang'].'/__Bk.php' ); 
    echo "<br> from ppalAction orderID = "; print_r($this->vdArr['orderID']);

    if ( !count(debug_backtrace()) ) 
        $ppalOrder = new GetOrder();
        $ppalOrder->getOrder( $this->vdArr['orderID'], true);
     // if ( !count(debug_backtrace())  

 // if( isset($_POST['paypalA'] ) ) 

else 
    $this->vdArr['tokenPpal'] = Braintree_ClientToken::generate(); 

客户端代码：

<script type='text/javascript'  >

window.onload = function() 

    paypal.Buttons(

        createOrder: function(data, actions) 
          return actions.order.create(
            purchase_units: [
              amount: 
                value: '0.01'
              
            ]
          );  
        ,

        onApprove: function( data, actions ) 
            return actions.order.capture().then( function(details) 
                //alert('Transaction completed by ' + details.payer.name.given_name);
                // Call your server to save the transaction
                //console.log('Transaction completed' ); alert(details); 
                console.log( 'data.orderID = ' + data.orderID ); 
                document.getElementById('orderID').value = data.orderID;
                console.log('data'); console.log(data); 
                console.log('Transaction completed by ' + details.payer.name.given_name );
                //return fetch('/paypal-transaction-complete', 
                return fetch( 'https://typejoy.biz/pay/ppal_1025/EN/pay', 
                    method: 'POST',
                    body: JSON.stringify(
                        orderID: data.orderID,
                        payPp: 1
                    )
                ); // return fetch( 'https://typejoy.biz/pay/ppal_1025/EN/pay
            ); // return actions.order.capture().then( function(details
         // onApprove: function(data, actions

      ).render('#payPp');  

 // window.onload = function() 
</script>

在 clinet 端控制台中，我可以记录 orderID，但我不明白如何将其传递到服务器端。获取功能如何工作？我应该使用其他类型的功能吗？如何以正确的方式做到这一点？

【参考方案1】：

问题似乎是我的服务器端既不处理 JSON 请求，也不生成 JSON 响应。官方文档提供了fetch 的示例。

有两种解决方案 - 为 fetch 制作适当的后端或使用不同的方法，如下所示：

paypal.Buttons(

createOrder: function( data, actions ) 
  return actions.order.create(
    purchase_units: [
      amount: 
        value: '0.01'
      
    ]
  );  
,

onApprove: function( data, actions ) 
    return actions.order.capture().then( function(details) 
        //alert('Transaction completed by ' + details.payer.name.given_name);
        // Call your server to save the transaction
        //console.log('Transaction completed' ); alert(details); 
        console.log( 'data.orderID = ' + data.orderID ); 
        document.getElementById('orderID').value = data.orderID;
        console.log('data'); console.log(data); 
        console.log('Transaction completed by ' + details.payer.name.given_name );

        var form = document.getElementById('ppalForm'); // $("#paymentForm"); 
        var btn = document.createElement("input");
        btn.type = "submit";
        btn.id = "submitPp";
        btn.value= 1;
        form.appendChild(btn); // container.appendChild(input);
        //form.append("<input hidden id='payPp' name='payPp' value='1' />");
        console.log('form ='); console.log(form); 
        form.submit();

     ); // return actions.order.capture().then( function(details
 // onApprove: function(data, actions

).render('#payPp');

main_view.php

<form  id='ppalForm' method='POST' action='<?php echo $payPpFrmAction; ?>' >
<div id='payPp' >
//.. here goes form fields

</form>

action.php

use PayBundle\actions\Order;  

if( isset($_POST['payPp'] ) ) 

    //if ( !count(debug_backtrace()) ) 
        $ppalOrder = new GetOrder();
        $ppalOrder->getOrder( $this->vdArr['orderID'], true);
    // // if ( !count(debug_backtrace())  

 else 
  $tokenPpal = Braintree_ClientToken::generate();

//传递给查看表单，在客户端获取

【参考方案2】：

.fetch 方法返回一个承诺。

你得到“什么都没有”，因为它是一个异步方法，你需要以不同的方式处理它。

您的服务器 POST 的响应已返回，但位置和方式不同。

有一个 PayPal 页面记录了这一点：https://developer.paypal.com/docs/checkout/reference/upgrade-integration/

但让我给你举个例子。

假设您的 POST 响应返回一个 JSON 对象：

POST https://mystore.com/api/paypal/set-express-checkout

  foo: "bar"
  bar: "baz"

您的 PayPal 自定义 Javascript 代码可能如下所示：

paypal.Buttons(
  createOrder: function() 
    var SETEC_URL = 'https://mystore.com/api/paypal/set-express-checkout';

    return fetch(SETEC_URL, 
      method: 'post',
      headers: 
        'content-type': 'application/json'
      
    ).then(function(res) 
      //basic response metadata is here
      //res.ok
      //res.redirected
      //res.status
      //res.type
      //res.statusText
      return res.json();
    ).then(function(data) 
      //your whole POST response is available as `data` attribute here
      //data.foo
      //data.bar
      return data.token;
    );
  
).render('#paypal-button-container');