[FIXED] Why paymentID is null after PayPal transaction?

Issue

I'm using PayPal in sandbox mode and @paypal/react-paypal-js in my React application and I'm using .NET 5 as my REST API. Here is my payload when I want to create an order:

{
  "totalAmount": 102,
  "tax": 0,
  "fee": 2,
  "paymentMethod": 1,
  "items": [
    {
      "amount": 100,
      "reciver": "vala",
      "phone": "0912351231",
      "email": "vala@gmail.com",
      "sender": "ali",
      "count": 1
    }
  ]
}

And here is part of my react code that call PayPal API:

<BoxPayment isRtl={isRtl}>
    <Text as="h3">{translations.buyPage.paymentMethodTitle}</Text>
    <Text as="p">{translations.buyPage.paymentMethodSubTitle}</Text>
    <div style={{ 'paddingTop': '.5rem' }}>
        <PayPalScriptProvider options={initialOptions}>
        <PayPalButtons createOrder={(data, actions) => createOrder(data, actions)}
            onApprove={(data, actions: any) => {
            console.log('data', data);
            console.log('actions', actions);
            return actions.order.capture().then((details: any) => {
                console.log('details', details);
                const name = details.payer.name.given_name;
            });
            }} />
        </PayPalScriptProvider>
    </div>
</BoxPayment>

But after successful payment here's what I receive when I console.log data object:

{
    "orderID": "48G91901G2470590C",
    "payerID": "NBPJH63GK5H5Q",
    "paymentID": null,
    "billingToken": null,
    "facilitatorAccessToken": "A11VAJ-tUcUqKkJgAhnyfVGVYg6Z57SvqHfspQqB8vtUDjDzBMIBlvO6rDvwdIjW7aJwvQQYeMAGyWitChtVZ8LyBzCw"
}

What I am missing?

Solution

Within onApprove, the order hasn't been captured when you are printing that data. Capture the order first. When an order is captured, its transaction ID will be in the response's purchase_units[0].payments.captures[0]

---

If you need to do anything important with that ID, such as store it in a database, used a server-side integration (not actions.order.capture nor actions.order.create, client-side code is not for database operations). See the optional step #5 in the 'Add and modify the code' section of the guide for Integrate Checkout, and be sure to use the client-side error handling code in its linked demo pattern example.

Answered By - Preston PHX

Answer Checked By - Terry (PHPFixing Volunteer)