Add deferred purchase option app components

In this tutorial, you'll learn how to do the following tasks:

• Define constants in a file
• Create app components
• Add app components and GraphQL mutations to the app page
• Update the homepage to display deferred purchase options
• Test your app

• Complete the Getting started tutorial to set up the foundation of your app.
• Familiarize yourself with purchase options and deferred purchase options.

Create a file that defines constants. The constants are used across your app components.

In your project directory, in the web/frontend folder, create variables.js.

Create the following app components:

• Name
• Deposit selection
• Remaining balance charge
• Fulfillment selection and Inventory reserve
• Product selection

Create a component that enables merchants to set the deferred purchase option name. The name component includes the following Polaris components:

• Card
• TextField

In the web/frontend/components folder, create PurchaseOptionName.jsx.

Create a component that enables merchants to set the deposit amount charged at checkout. The deposit selection component uses the constants defined in web/frontend/variables.js and includes the following Polaris components:

• Card
• Select

In the web/frontend/components folder, create DepositSelection.jsx.

Create a component that enables merchants to select the remaining balance charge date. The remaining balance charge component uses the constants defined in web/frontend/variables.js and includes the following Polaris components:

• Card
• DatePicker

In the web/frontend/components folder, create RemainingBalanceCharge.jsx.

Create components that enable merchants to select when to fulfill the order and when to update the inventory. The fulfillment selection and inventory reserve components use the constants defined in web/frontend/variables.js and include the following Polaris components:

• Card
• Stack
• RadioButton

1. In the web/frontend/components folder, create FulfillmentSelection.jsx.

2. In the web/frontend/components folder, create InventoryReserve.jsx.

Create a component that enables merchants to select products that will have the deferred purchase option. The product selection component includes the ResourcePicker React component.

In the web/frontend/components folder, create ProductsSelection.jsx.

When you click Select products, the product list is displayed.

You've created all required app components. Now you're ready to add them to the app page and add GraphQL Admin API mutations to create deferred purchase options.

Learn more about GraphQL Admin API mutations for deferred purchase options.

In the web/frontend/pages folder, update CreatePurchaseOptionsPage.jsx with the following code:

Update the homepage to display deferred purchase options. You can use the sellingPlanGroups query to retrieve the information about the deferred purchase options.

In the web/frontend/pages folder, update index.jsx with the following code:

Create a deferred purchase option in your app to test if the app works as expected.

1. On the homepage, click Create a deferred purchase options.
2. In the Deferred purchase option section, set the name for the deferred purchase option.
3. In the Deposit section, from the dropdown list, select the deposit amount.
4. In the Remaining balance charge date section, select the date.
5. In the Fulfillment section, select when to fulfill the order.
6. In the Inventory section, select when to update the inventory.
7. Click Select products, and add products that will have the deferred purchase option.
8. Click Create.

A toast message ("Deferred purchase option created!") appears, and the app redirects you to the homepage. The homepage displays the deferred purchase option that you created.

• Learn more about creating and managing deferred purchase options.
• Learn more about delivery profiles to define shipping rates and delivery destinations for orders with purchase options.