After payment received, do some processing and show a new button

Ask the community
, ,
1

Question:
Hi -
After a payment is processed, I want to generate a custom URL for the user to go to next. After payment, I generate a custom URL but how can I have a button appear on the page with the correct onclick URL information?

Thanks much for any advice! Love Wix!

Product:
Velo front-end and back-end

What are you trying to achieve:

  • I use a Wix form to set up the payment details.
  • User does the payment.
  • After payment, I receive a call back that allows me to generate the custom URL.
  • I reveal a button on the page that, when clicked, takes the user to the custom URL.

What have you already tried:
I’ve tried using onPaymentUpdate() - but this is a backend function. I don’t find any way to pass the information to the front end code so I can show the button with the custom URL. And I see discussion that this can’t be done in Wix.

Alternatively, I’ve tried to do this all in Velo using wixPayFrontend.startPayment(). After payment, I can call the backend to create the custom URL, return that URL to the front-end, and show the button. However, for this to work I can’t use the Wix payment form - so it’s much less maintainable by the team. And I’d have to figure out all the parameters to startPayment() to match what I’ve already done in the form.

Additional information:

2

If you can share your code of how you handle the payment system I may help you with this one.

And about this: “And I see discussion that this can’t be done in Wix.” that’s wrong because there is an API wix-realtime for this that you can send data from backend to frontend in real time.

Let me know if you already found a solution.

3

Fabulous! I’m happy to be wrong. (I saw two references in the forums that said you couldn’t do backend to frontend but I noticed they were both a few years old.)

Here’s some code. Take it as pseudo-code since I have it commented out the moment.

At the end you’ll see newURL. That’s what I want to be accessible from the front-end, so I can show a button after payment - that when clicked, goes to that URL.

Many thanks for the help!

export async function wixPay_onPaymentUpdate(event) {
let paymentId = event.payment.id;
let email = event.userInfo.email;
let apiUrl = “https://…t”;

let newTransactionStatus = event.status;
const key = await getSecret(“xxxKey”);

if (newTransactionStatus == ‘Successful’) {
let jsonBody = {
licenseKey: key,
email: email,
paymentId: paymentId
}
console.log("data " + JSON.stringify(jsonBody,null,‘\t’));

const fetchOptions = {
method: ‘post’,
headers: ‘application/json’,
body: JSON.stringify(jsonBody)
};
fetch(apiUrl, fetchOptions)
.then( (httpResponse) => {
let stat = httpResponse.ok;
if (stat == true) {
let url = httpResponse.url;
let response = httpResponse.json();

    let message = response['message'];
    let baseURL = message.substr(message.indexOf("https:"));
    let newURL = baseURL + "/u/" + obj['user']['uid'];
    console.log("newURL " + newURL);

  } else {
    // show error message
  }
});

}
}

4

So here is what you need to do step by step:

You already have the main function in the backend events.js file so everything is ready to transfer newUrl but I assume that you don’t want to send wrong url to wrong user. In this case you will need a filter.

In Wix Realtime you can filter in few ways.

  1. You can use realtime permissions method in realtime-permissions.js file in your backend.
  2. You can use resourceId to publish data with a filter. (publish)
  3. You can filter by userId. In this case user needs to be logged into system, so if users can make payment as a guest this is not a good idea.

924×735 39.8 KB

After you choose how you will filter the data that you will send to frontend here is how you will send it.

I suggest you to use an id that belongs to payment and use that payment id as resourceId so you will only send data to that payment.

First you need to setup backend.

In the backend (just after that newUrl console.log) use publish to publish a new message to frontend in realtime.

import { publish } from 'wix-realtime-backend';
const channel = {name: "channelName", resourceId: "paymentUniqueId"};
const message = { newUrl };

await publish(channel, message); //no await required btw

So in this way you are sending the newUrl to a defined channel with defined resourceId and name.

In the frontend of your page.

import { subscribe } from 'wix-realtime-frontend';
const channel = {name: "channelName", resourceId: "paymentUniqueId"};

//Start listening events coming from backend
subscribe(channel, (message, channel) => {
  let payload = message.payload; //data you sent from backend
  const { newUrl } = payload;
  
  //do whatever you want with the newUrl
})

And this should do the work you need. (I think)

Wix Realtime Backend
Wix Realtime Frontend

If this helps don’t forget to mark this answer as a solution so others can benefit from it.