PayPal JavaScript SDK client side does not post to

问题:

How i should post orderID to server using paypal SDK? The example code does not work neither on localhost nor on remote host. Post is empty after i submit PayPal button.

According, 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(); 
}

client side code :

<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>

In clinet side console i can log orderID, but i do not understand how to pass it to the server side. How fetch function works? shall i use other type of function? How to make this in correct way?

回答1:

The problem seems is that my serer side does nor deal with JSON requests, nor generate JSON responses. The official documentation provides example with fetch.

There are two solutions - make proper back-end for fetch or use different approach like this:

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();

//TO BE PASSED TO VIEW TO THE FORM, TO BE FETCHED IN CLIENT SIDE }