javascript - How to capture and securely verify payment completion from Paypal's buttons?

Question

Following the code from https://www.paypal.com/buttons, I follow the "Smart Buttons" link, generate and copy the code, so I add the following to our payments page (with our actual clientID instead of the XXXXXX....):

<div id="smart-button-container">
  <div style="text-align: center;">
    <div id="paypal-button-container"></div>
  </div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=XXXXXXXXXXXXXXXXX&currency=USD" data-sdk-integration-source="button-factory"></script>
<script>
  function initPayPalButton() {
    paypal.Buttons({
      style: {
        shape: 'rect',
        color: 'gold',
        layout: 'vertical',
        label: 'paypal',
    },

    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{"description":"Subscription to our service","amount":{"currency_code":"USD","value":10}}]
      });
    },

    onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        alert('Transaction completed by ' + details.payer.name.given_name + '!');
      });
    },

    onError: function(err) {
      console.log(err);
    }
    }).render('#paypal-button-container');
  }
initPayPalButton();
</script>

Question: how do I actually record (on the server-side) that the payment was completed? I seem to be missing some pieces of the puzzle — the only option I see to do it based on the above code is to call a server-side script from the onApprove code; but I don't see how that could be done securely: the user could simply not do any payment and call that same script passing the same parameters.

I see on related questions that webhooks seems to be the answer; however, what I find here is all server-side, which does not make any sense to me (I expect that as part of the JavaScript, I would give Paypal the URL on my server that I want them to call when the payment is completed). Any tips or pointers will be appreciated.

question from:https://stackoverflow.com/questions/65660934/how-to-capture-and-securely-verify-payment-completion-from-paypals-buttons

Answer 1

how do I actually record (on the server-side) that the payment was completed?

Use a server-side integration.

Create two routes, one for 'Create an order' and one for 'Capture order', as documented here: https://developer.paypal.com/docs/business/checkout/server-side-api-calls/#server-side-api-calls

The front-end approval code to pair with your two routes is https://developer.paypal.com/demo/checkout/#/pattern/server