How can I add Term and conditions to check out process when customer purchases Paid Plan?

Ask the community
,
1

This is the code that I have now:

wixPaidPlans.purchasePlan(test_planId, {“termsAndConditionsLink”: “https://www.linkandconditions.com”})
.then((myPurchase) => {
let myOrderId = myPurchase.orderId;
let myWixPayOrderId = myPurchase.wixPayOrderId;
let myWixPayStatus = myPurchase.wixPayStatus;

When I test - there is no checkbox for Terms and conditions

706×786 20.9 KB

2

https://support.wix.com/en/article/request-adding-a-terms-and-conditions-checkbox-in-paid-plans

You are trying to use functions from Wix Pay API.
https://support.wix.com/en/article/corvid-tutorial-processing-payments

wixPay.startPayment(payment.id, {
"showThankYouPage": false,
"termsAndConditionsLink": "https://mysite.com/terms"

Start a payment on button click with a terms and conditions link

/**************************
 * backend code - pay.jsw *
 **************************/

import wixPay from 'wix-pay-backend';

export function createMyPayment() {
  return wixPay.createPayment({
    items: [{
      name: "Product Name",
      price: 9.99
    }],
    amount: 9.99
  });
}

/********************
 * client-side code *
 ********************/

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

export function myButton_click(event, $w) {
  createMyPayment()
    .then( (payment) => {
      wixPay.startPayment(payment.id, {
        "termsAndConditionsLink": "https://mysite.com/terms"
      } );
  } );
}

With Wix Paid Plans API.
https://www.wix.com/corvid/reference/wix-paid-plans.html
https://www.wix.com/corvid/reference/wix-paid-plans-backend.html

3

You can do this with a simple trick:

  1. Add a Checkbox (Element ID: #checkbox1 ) at the bottom of the Paid Plans Page.
  2. Add a box (Element ID: #box1 ) above the Paid Plans Button
  3. Add an arrow icon and an anchor near the Checkbox to highlight the checkbox when people clicked the button.

Add the following code in the Pain Plans Page. Here is the code:
export function box1_click(event) {
$w( “#anchor1” ).scrollTo(); // to scroll down to the checkbox
$w( “#vectorImage1” ).show();
}

export function checkbox1_click(event) {
$w( “#vectorImage1” ).hide();
$w( “#box1” ).hide();
$w( “#anchor2” ).scrollTo(); // to move back to the top again
$w( “#checkbox1” ).disable(); // So people cannot able to uncheck it in the checkout page
}

Check my client’s website to see how it works: https://www.trydreambodynow.com/plans-pricing