Introduction
Use the Custom Purchase Flow API to customize the pages in the plan purchase flow on your site. This API provides functionality for directing users to the Plans & Pricing and Checkout pages outside of the default flow. It also allows you to customize the content displayed on the Plan & Pricing, Checkout, and Thank You pages.
Set up pricing plans
To use APIs to customize the plan purchase flow, first set up pricing plans on your site:
Accept payments as described in About Accepting Payments.
Offer membership plans as described in About Pricing Plans. When setting up your site to accept pricing plans, define the plans you want to offer using the Dashboard or using the Pricing Plan APIs.
Direct users to pages in the purchase flow
The Custom Purchase Flow API lets you direct customers to either of two pages in the plan purchase flow:
- The Plans & Pricing page: You can navigate from anywhere in your site to the Plans & Pricing page.
- The Checkout page: If your site uses a custom Plans & Pricing page, you can navigate to checkout from anywhere in your site, including the Plans & Pricing page. If your site uses the default Plans & Pricing page, visitors will still be directed from Plans & Pricing to the Checkout page without any function call on your part. However, you may also direct users to checkout from any other page in your site.
Customize the content of the Plans & Pricing and Checkout pages
You can use the navigateToPricingPage()
and navigateToCheckout()
functions to customize
pages in the plan purchase flow:
- Customizing the Plans & Pricing page: You can set page content such as the title and subtitle of the Plans & Pricing page by passing
options to
navigateToPricingPage()
. In the same function you can also pass options to customize the content on the Checkout and Thank You pages. - Customizing the Checkout page: In the
navigateToCheckout()
function, you can pass options to customize the content displayed on the Checkout and Thank You pages. - Retrieving the Pricing Page options: You can call
getPricingPageOptions()
on the Plans & Pricing page to retrieve the Pricing page options you set innavigateToPricingPage()
.
Customize the pricing plan purchase flow
You can now add custom pages to the pricing plan flow, as well as build a custom Plans & Pricing page.
If you add pages between Plans & Pricing and Checkout, you will need to store the options set in navigateToPricingPage()
globally, for example using the Wix Storage API,
and access them before you call navigateToCheckout()
.
If you are navigating directly from the Plans & Pricing page to Checkout, you can
call getPricingPageOptions()
and pass the retrieved options directly to navigateToCheckout()
.
Importing the APIs
To use the CustomPurchaseFlow API, import customPurchaseFlow
from the wix-pricing-plans-frontend
module.
javascript | Copy Codeimport { customPurchaseFlow } from 'wix-pricing-plans-frontend';
Was this helpful?