How to Send Custom data fields in PayPal Smart Button transaction

user_7931802 0
Viewed 3235

I am new to PayPal integrations but I have managed to use the client-side JavaScript SDK to create a button and complete a transaction. I have also added a webhook that listens for PAYMENT.CAPTURE.* events and log the return data into my transactions table in my own database. The downside is I do not have a way of tracking for which service or customer the transaction was. So I would like to know how I can add at least one custom field in the button so that it is returned back to me in the webhook POST so that I can perform some business logic for that particular customer.

My initial alternative was to POST the data return onApprove:(data, actions)=>{} but I would have not recovery option if something catastrophic happens before that is done e.g Power outage or general Client-Server connection failure.

Here is my JS basic code for now:

try{
        paypal.Buttons({

        // Set up the transaction
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: charge.amount,
                        currency_code:'USD'
                    }
                }]
            });
        },
        // Finalize the transaction
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                console.log(details);
                if(details.status == "COMPLETED"){
                  localStorage.clear();
                  window.location.href = "thank-you";
                }
                //alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }


    }).render('#paypal-button-container');
  }catch(e){
     console.error('PayPal not loaded!');
  }
paypal-rest-sdk paypal javascript
3 Answers

Switch to a proper client-server integration.

Follow the PayPal Checkout integration guide and make 2 routes on your server, one for 'Create Order' and one for 'Capture Order' (see the optional step 5 in 'Add and modify the code'). Both of these routes should return only JSON data (no HTML or text). Inside the 2nd route, when the capture API is successful you should store its resulting payment details in your database (particularly purchase_units[0].payments.captures[0].id, which is the PayPal transaction ID) and perform any necessary business logic, such as saving additional data from form inputs.

(That data can be transfered as part of the fetch capture call by adding a body key to its options parameter, which can serialize a JSON object for you. Your 2nd server route can then parse that input as JSON and verify it is ok before proceeding with the capture.)

-- Pair those 2 routes with the frontend approval flow: https://developer.paypal.com/demo/checkout/#/pattern/server

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

user_20696050

You can switch to a client-server integration (as per @Preston PHK's answer), but for that may be overkill for some applications (and not what the OP asked for).

For a simple purchase where you just need to pass some specific information, you can try leveraging the purchase_units.invoice_id field (assuming you don't need that for something else).

The caveat is that the invoice_id needs to be unique every time you use it. This means that you can't just use your customer's internal id. You would need to add something extra to ensure uniqueness.

Your createOrder call might then look something like this:

createOrder: function(data, actions) {
    return actions.order.create({
        purchase_units: [{
            invoice_id: customerId + "-" + randString,
            amount: {
                value: charge.amount,
                currency_code:'USD'
            }
        }]
    });
},

A 6 character random string of alphanumeric (upper and lower) characters gives over 56 billion possibilities, which for most purposes should provide sufficient uniqueness. If you want to be even safer, make it longer. I'm not sure of the exact limit on invoice_id but I think it's at least 40 characters.

When you process the transaction (from a webhook) on your server, you just throw away the extra characters.

$custId = substr($invoice_id, 0, -7);
user_5196540

You can add 'custom_id' field in creareOrder function like that :

    createOrder: function(data, actions) {
        return actions.order.create({
          purchase_units: [{
            custom_id: customValue,
            amount: {
              value: price
            }
          }]
        });
      },
user_165792360
Related