[BUG]: onApprove sometimes is not triggered after successful order transaction

[lbuljan]

Is there an existing issue for this?

• [X] I have searched the existing issues.

🐞 Describe the Bug

This is very difficult to reproduce locally, but is happening in production quite often on one of our projects simply because of the volume of transactions being done there. Quite simply, the onApprove callback does not seem to be triggered sometimes. We definitely know it just isn't being triggered because the PayPal transaction is visible and is completed in the PayPal dashboard. The problem is that it is a ticket purchase platform of sorts and the tickets are being created in the system in the onApprove callback, so on-and-off we get reports of tickets not showing up after a transaction has completed.

Code:

async function onPurchaseSuccess(data: OnApproveData) {
    try {
      await assignTickets(tempTickets, data.paymentID);
      onSuccess();
    } catch (error) {
      toast.error(
        `Error assigning tickets. Contact support and pass on the following payment ID: ${data.paymentID}`,
        { autoClose: false },
      );
    }
  }


return (
    <PayPalScriptProvider options={payPalOptions}>
      <PayPalButtons
        style={{
          color: 'blue',
          shape: 'rect',
          tagline: false,
          layout: 'horizontal',
          label: 'checkout',
          height: 44,
        }}
        forceReRender={[total]}
        createOrder={async (_, actions) => {
          try {
            return await actions.order.create({
              purchase_units: [
                {
                  description: `${eventInfo.title} (x${tempTickets.length})`,
                  items: tempTickets.map(ticket => ({
                    name: `${ticket.name} (${ticket.email})`,
                    quantity: '1',
                    unit_amount: {
                      value: String(ticket.price),
                      currency_code: PAYPAL_CONFIG.currency,
                    },
                  })),

                  amount: {
                    value: String(total),
                    breakdown: {
                      item_total: {
                        currency_code: PAYPAL_CONFIG.currency,
                        value: total.toString(),
                      },
                    },
                  },
                },
              ],
            });
          } catch (error) {
            console.error(error);
            throw error;
          }
        }}
        onApprove={async (data, actions) => {
          try {
            await actions.order.capture();
            await onPurchaseSuccess(data);
          } catch (e) {
            onPurchaseError(e instanceof Error ? e.message : JSON.stringify(e));
          }
        }}
        onError={e =>
          onPurchaseError(e instanceof Error ? e.message : JSON.stringify(e))
        }
      />
    </PayPalScriptProvider>
  );

😕 Current Behavior

1. Create tickets through form
2. Checkout with PayPal
3. Complete transaction in PayPal window
4. onApprove callback is not triggered sometimes, but funds have been transferred. Tickets are not created in the system.

🤔 Expected Behavior

1. Create tickets through form
2. Checkout with PayPal
3. Complete transaction in PayPal window
4. onApprove callback is triggered without fault so that tickets can be created in the system.

🔬 Minimal Reproduction

No response

🌍 Environment

| Software         | Version(s) |
| ---------------- | ---------- |
| react-paypal-js  |    7.3.3   |
| Browser          |    all     |
| Operating System |    all     |

Relevant log output

No logs, nothing is triggered so nothing is captured as an error.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

➕ Anything else?

No response

[devchristina]

Hi @lbuljan

Can you please submit a ticket with the Merchant Technical Support team. They'll have access to the logs and be able to troubleshoot this issue in more detail.

Please advise when you've completed this and I will close this issue as not planned. Thanks!

[lbuljan]

Hi @devchristina,

We'll contact merchant technical support team, but please keep this issue open in the meantime, we will link directly to it in the ticket since non-technical staff are submitting it (I do not own the merchant account).

Is there any possibility that this issue is on the SDK side and upgrading to a newer version would solve the issue? I have seen some similar reports on the same version as we are, 7.3.3

[salievos]

Hello @lbuljan @devchristina, Is there any update?

[welschmoor]

Hello lbuljan,

are you 100% sure it is onApprove not running and not your code inside onApprove failing, because (1) the user lost internet connection in this exact moment, (2) your backend not being available at that time or (3) whatever you do inside onApprove simply errorred after the paypal transaction was complete?

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!