Redirect after payment with pricing plans

Ask the community
,
1

After a successful payment, I want to redirect the customer to a specific site. At the moment there is just a very awful success message. This destroyed the customer journey completely. Is there any possibility to solve this issue?

1 Like
2

Hello Tobias,

In order to redirect customers to any site after a successful purchase you can:

  1. Create a custom package picker connected to Paid Plans database (more details on how to do it - https://support.wix.com/en/article/velo-tutorial-using-the-paid-plans-api-for-pricing-plan-ordering-and-payment );
  2. When package picker is ready add the following code to the relevant page (the code is connecting the button which activates plan purchase to the redirection action):
import paidPlans from 'wix-paid-plans';
import wixLocation from 'wix-location';

$w.onReady(function () {
    	// "#select" here represents the id of the purchase button
		$w("#select").onClick( (event) => {

            // get plan id from the click event
			const planId = event.context.itemId;

            // purchase a plan
			paidPlans.purchasePlan(planId).then(purchaseResponse => {
				// on successful response go to site's "ABOUT" (or any other web page)
				wixLocation.to('/about')
			}).catch((err) => {
				console.log('purchase failed: ' + err);
			})			
		});
});

Let me know if you have more questions.

3

This is great but if a user closes out of the purchase lightbox the page still re-directs

4

Also, is there any way to more closely resemble the default app and have it go to the checkout page?

5

@iampaulmatheson
Hello. Under the hood, purchasePlan method calls wix-pay’s startPayment() as one of the steps and in a case when the payment process is interrupted (user closes out of the purchase lightbox) you’ll get a purchase response with the status “ Cancelled ”. So adding a check for the status would solve it:

            paidPlans.purchasePlan(planId).then(purchaseResponse => {
                const paymentStatus = purchaseResponse.wixPayStatus;
                // check whether payment was not cancelled 
                if(paymentStatus != 'Cancelled') {
                    // on successful response go to site's "ABOUT"
                    wixLocation.to('/about')    ;
                }
            }).catch((err) => {
                console.log('purchase failed: ' + err);
            })
6

And regarding "any way to more closely resemble the default app and have it go to the checkout page? " - unfortunately, using Velo there’s no way to do it. It is only possible to have payment info in the modal.