Wix payments result status doesn't return to frontend sometimes

Ask the community
, ,
1

Have successfully implemented wix payment flow from the frontend to backend. Based on the result status, if successful, I enter the details into a wix database created.

If failed/cancelled etc, it shows me the status.

Now, sometimes when the user starts to make the payment. It enters the backend but no result is given back to the frontend. The user has also paid the amount and it reflects in the payments dashboard but since there is no input given to the frontend, it screws up my flow.

The payment status doesn’t show up in my logs as well. Its connected to google operations so I have 30 day history of the logs.

Just thinking aloud.

  • Is there a certain timeout in which the user is to be paying?
  • Or does it happen if the user tries to make a failed payment and retries again?

Please do give your suggestions as its frustrating.

Code is below:


export function makeFinalPayment(finalCertificatePriceValue, firstName, lastName, email, phoneNumber, countryCode) {
    makePayment(finalCertificatePriceValue, { firstName, lastName, email, phoneNumber, countryCode })
        .then((payment) => {
            wixPay.startPayment(payment.id)
                .then((result) => {
                    console.log(`payment result returned`)
                    console.log(result);

                    if (result.status === "Successful") {
                        console.log("result successfull mode");
                        let resultstatus = result.status;
                        let transactionid = result.transactionId;
                        console.log(resultstatus);
                        console.log(transactionid);
                        paymentMsgBox("Thanks for your payment. \n Please wait ....", largerTimeOutValue);

                        console.log("payment successful");

                        insertMedicalData();

                    } else if (result.status === "Failed") {

                        $w('#cancelPayBtn').enable();
                        paymentMsgBox("Oops. Your payment failed. Please try again?", largerTimeOutValue);

                        let resultstatus = result.status;
                        let transactionid = result.transactionId;

                        console.log("payment failed");
                        //insertMedicalData();

                    } else if (result.status === "Pending") {

                        let resultstatus = result.status;
                        let transactionid = result.transactionId;
                        console.log("payment pending");
                        $w('#cancelPayBtn').enable();
                        paymentMsgBox("Oops. Your payment is left pending. Please try again?", largerTimeOutValue);

                        //insertMedicalData();

                    } else if (result.status === "Cancelled") {
                        // handle user closing payment panel
                        let resultstatus = result.status;
                        console.log(resultstatus);
                        let transactionid = result.transactionId;

                        $w('#cancelPayBtn').enable();
                        paymentMsgBox("Oops. Your payment was cancelled. Please try again?", largerTimeOutValue);

                        console.log("payment cancelled");
                        //insertMedicalData();
                    } 
                })

        });
}

import wixPayBackend from ‘wix-pay-backend’;

export function makePayment(priceValue, userInfo) {
console.log(“entered payment backend”); // this shows up in the logs. but sometimes the result is not pushed to the frontend

console.log(userInfo, priceValue);

return wixPayBackend.createPayment({
    items: [{
        name: "Medical Certificate",
        price: priceValue
    }],
    amount: priceValue,
    userInfo
});

}

2

Don’t rely on frontend. If the user leave the site due to the payment gateway redirect, or the user didn’t close the thank you note (ps, you can hide it using options, check the API docs), you might miss the data. Use the backend event is the safe method.

3

But how would you do everything on the backend? The payment starts from the front end. and needs to return a result to the frontend to process further.

This is a custom process so it wouldn’t involve the thank you page.

It would be similar to the code in their help docs.

import {createMyPayment} from 'backend/pay';
import wixPayFrontend from 'wix-pay-frontend';

export function myButton_click(event, $w) {
  createMyPayment()
    .then( (payment) => {
      wixPayFrontend.startPayment(payment.id)
        .then( (result) => {
          if (result.status === "Successful") {
            // handle payment success
          } else if (result.status === "Failed") {
            // handle payment failure
          } else if (result.status === "Pending") {
            // handle payment pending
          } else if (result.status === "Cancelled") {
            // handle user closing payment panel
          }
        } );
    } );
}

How do I ensure that the payment starts and ends in the backend only?

TIA!

4

On the backend, you should listen to the onPaymentUpdated event and store the result to a DB or somewhere. The front end is for display purpose (for sensitive content, check with your backend DB every few seconds until the result is found)

You can’t rely on front end as user can close the browser and you can’t stop them from doing that.

5

I also want to know how to monitor the payment status change on the backend after triggering wixPayFrontend.startPayment(payment.id) on the frontend