Adding a custom field in Paypal checkout

Question

We are using Paypal checkout for our web app. We have the client lib where we are setting up the payment. In the back end, we are trying to capture the processed details via webhook. We tested this on a sandbox account. The webhook is sending all the details as expected except the custom field. We need the custom field in order to associate a payment with a certain service.

In our web app, we have the following:

  paypalConfig = {
    env: 'sandbox',
    style: {
          size: 'responsive',
          color: 'white',
          shape: 'rect',
          label: 'pay',
          layout: 'horizontal',
          tagline: 'false'
    },
    client: {
      sandbox: 'SANDBOX_ID',
    },
    commit: false,
    payment: (data, actions) => {
      console.log("data is", data, actions);
      return actions.order.create({
        payment: {
          transactions: [
            { amount: { total: this.finalAmount * 100, currency: 'USD' }, job_id: this.jobId }
          ]
        }
      });
    },
    onApprove: (data, actions) => {
          return actions.order.capture().then((details) => {
            // This function shows a transaction success message to your buyer.
            // alert('Transaction completed by ' + details.payer.name.given_name);
            this.openModel('modal1');
      }).catch(err => {console.log("Error in authorize in paypal", err); this.openModel('modal2');})
    }
  }

As you can see, the payment handler is adding a job_id property for the transaction object. In the back end, we are listening for the following events:

Checkout order completed, Payment capture completed, Payment sale completed

We only need to listen for an event (like Payment Received) that tells us when the transaction goes through. I wasn't sure so I added all events that seemed relevant because there wasn't any event named Payment Received.

Can this be done as we are trying here? We don't get the custom job_id field in the webhook.

Answer 1

First of all you appear to be using old PayPal checkout.js , switch to the newest sdk.js

Second of all you are using a client-side only integration, switch to a proper client-server pattern. Here is the front-end: https://developer.paypal.com/demo/checkout/#/pattern/server

You will need two corresponding routes on your server, 'Set Up Transaction' and 'Capture Transaction', documented here: https://developer.paypal.com/docs/checkout/reference/server-integration/

With the above solution, you have an immediate, synchronous API response on payment capture. There is no need for an additional asynchronous notification from webhooks, so those will essentially become superfluous to you.

---

Once all the above is working and creating successful transactions for you, there's one more thing to consider: propagating failures. That is, what happens in the case of an unhappy path, if the buyer's funding source fails to capture, e.g. their card is declined? There is a guide for how to send that error back to the UI, so they can add or choose a different card. Anyway, this is just the final detail to worry about.