Editor X and Wix Pay

Ask the community
,
1

Hi,

I made an event landing page that after filling a form they must pay 30 ILS
when the payment Successful I make insert into a 2 wixData the user info.
but sometimes everything working well and sometimes the payment successful but don’t insert it into the databases.

the page https://www.lp.reidman.co.il/psychotherapy-event

the code

import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
import wixPay from 'wix-pay';
import { psycEvent } from 'backend/payments';
import wixData from 'wix-data';

const {
    source: Source,
} = wixLocation.query;
let url = wixLocation.url;

$w.onReady(() => {
});

export function submit_click(event, $w) {
 if ($w('#firstName').valid && $w('#lastName').valid && $w('#email').valid && $w('#phone').valid && $w('#idNumber').valid && $w('#campus').valid) {
        $w('#erorMesg').collapse();

 const paymentUserInfo = {
            firstName: $w('#firstName').value,
            lastName: $w('#lastName').value,
            phone: $w('#phone').value,
            email: $w('#email').value,
            countryCode: 'IL'
        }
 const paymentOptions = {
            userInfo: paymentUserInfo
        }

        psycEvent()
            .then((payment) => {
                wixPay.startPayment(payment.id, paymentOptions)
                    .then((result) => {
 if (result.status === "Successful") {
 let toInsert = {
 "firstName": $w('#firstName').value,
 "lastName": $w('#lastName').value,
 "email": $w('#email').value,
 "phone": $w('#phone').value,
 "idNumber": $w('#idNumber').value,
 "price": "30",
 "campus": $w('#campus').value,
 "formName": "אירוע פסיכותרפיה"
                            };
                            wixData.insert("Payments", toInsert)
                                .then((results) => {
 let item = results; //see item below
                                })
                                .catch((err) => {
 let errorMsg = err;
                                });

 let toInsertEvent = {
 "name": $w('#firstName').value,
 "email": $w('#email').value,
 "phne": $w('#phone').value,
 "campus": $w('#campus').value,
 "source": wixLocation.query["utm_source"],
 "interest": "פסיכותרפיה הוליסטית",
 "date": "04/03/2021",
 "time": "18:00",
 "eventName": "בין בדידות וזוגיות בעת הזאת",
 "url": url
                            };
                            wixData.insert("EventLead", toInsertEvent)
                                .then((results) => {
 let item = results; //see item below
                                })
                                .catch((err) => {
 let errorMsg = err;
                                });
                            wixWindow.trackEvent("Lead");
                            wixLocation.to("/event-thankyou");
                        }
 // else if (result.status === "Pending") {
 //   wixWindow.openLightbox("Pending Box");
 // }
                    });
            });
    } else {
        $w('#firstName, #lastName, #email, #phone, #idNumber, #campus').required = true;
        $w('#erorMesg').expand();
    }
}

payment successful on isracard

1167×104 7.14 KB

lest one on the databases

1346×318 21.5 KB

1745×280 21.8 KB

2

Hey Yair.
Your code runs on the front-end side. What happens is that after the payment succeeds, the user closes the site/redirect to another page/network fail before the code runs.
What you need to do is to move the function to the backend.
Use onPaymentUpdate() event on event.js and run the functionality there.
If you need data from the frontend, insert the data to a collection before the payment and update the collection (or another collection) after payment succeed

1 Like
3

Hey @binyaminm thanks for your answer,
I need data from the frontend but if I insert data to the collection before the succeed message the insert action to the collection starts a webhook trigger.
In the events.js onPaymentUpdate() I can’t get the form field data that the user input.

import wixCrm from 'wix-crm-backend';
import { fetch } from 'wix-fetch';


function sendDataEvent (item, webhook) {
    fetch(webhook, {
 "method": "post",
 "headers": {
 "Content-Type": "application/json"
            },
 "body": JSON.stringify(item)
        })
        .then((httpResponse) => {
 if (httpResponse.ok) {
 return httpResponse.json();
            } else {
 return Promise.reject("Fetch did not succeed");
            }
        })
        .then((json) => console.log(json))
        .catch(err => console.log(err));
}

export function EventLead_afterInsert(item, context) {
    webhook = "https://hook.integromat.com/................/"
    sendDataEvent(item, webhook);
 return item
}
export function Payments_afterInsert(item, context) {
    webhook = "https://hook.integromat.com/................/",
    sendDataEvent(item, webhook);
 return item
}
4

@avigados Use another collection as a temporary collection to store the data.
You can use payment.Id as ‘_id’ of the temporary item, then use ‘wixData.get’ with the same id and insert it with the additional data to the main collection after the payment succeeds.