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:

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 in navigateToPricingPage().

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.

Copy
Did this help?

getPricingPageOptions( )

Returns the options set for the current Plans & Pricing page.

The getPricingPageOptions() function retrieves the options set for the Plans & Pricing Page in navigateToPricingPage(). The returned PricingPageOptions object also includes any options set for the Checkout and Thank You pages.

Call this function in the page code of a default or custom Plans & Pricing page. If you need to pass the returned pricing page options to navigateToCheckout() at a later point, store the options object globally so you can access it later.

Note:

  • To work with the Pricing Plans API, you need to publish your site.
Method Declaration
Copy
Request
This method does not take any parameters
Returns
Return Type:Promise<PricingPageOptions>
JavaScript
Did this help?

navigateToCheckout( )

Directs site visitor to the Checkout page in the plan purchase flow.

The navigateToCheckout() function redirects the site visitor to the Checkout page from any other page on your site. It also provides options to customize the Checkout and Thank You pages that come later in the plan purchase flow.

Note that the use of navigateToCheckout() will differ slightly depending on whether you use the default Plans & Pricing page or a custom one:

  • If you choose to use the default Plans & Pricing page, you will not be able to call navigateToCheckout() from there, but you may still call it from any other page in your site.
  • If you are using a custom Plans & Pricing page, you can call navigateToCheckout() on the plans page as well as anywhere else on your site.

Notes:

  • Setting the minStartDate and maxStartDate parameters will have no effect unless you've allowed customers to set the plan start date.
  • To work with the Pricing Plans API, you need to publish your site.
Method Declaration
Copy
Method Parameters
optionsCheckoutOptionsRequired

Options to customize the Checkout page and subsequent flow.

Set a button on your site to navigate to the Checkout Page
JavaScript
Did this help?

navigateToPricingPage( )

Directs site visitor to the Pricing & Plans page in the plan purchase flow.

The navigateToPricingPage() function directs the site visitor to the active Plans & Pricing page from any other page on your site. It also provides options to customize the Checkout and Thank You pages that come later in the plan purchase flow. This allows you to customize each of the pages in the flow with a single function call.

Notes:

  • Setting the minStartDate and maxStartDate parameters will have no effect unless you've allowed customers to set the plan start date.
  • To work with the Pricing Plans API, you need to publish your site.
Method Declaration
Copy
function navigateToPricingPage(options: PricingPageOptions): void;
Method Parameters
optionsPricingPageOptionsRequired

Options to customize the Plans & Pricing page and subsequent flow.

Set a button on your site to navigate to the Plans & Pricing Page
JavaScript
import { customPurchaseFlow } from "wix-pricing-plans-frontend";

/* Sample pricingPageOpts value:
{
  planIds: ['fedb93e3-623a-487b-a47d-499f48ee3c7d', '4c68d55d-e8fa-4008-af40-35cca6d39741'],
  checkout: {
    thankYouPage: {
      content: 'Thank you for your purchase!',
    },
  },
}*/

$w.onReady(() => {
  $w("#button").onClick(() => {
    customPurchaseFlow.navigateToPricingPage(pricingPageOpts);
  });
});
Did this help?