Add deferred purchase option app components
Previously, you set up the foundation of your app. You're now ready to add app components that can help merchants create and view their deferred purchase options.
On the app page, you want to add functionality that enables mechant to do the following tasks:
- Set the deferred purchase option name
- Configure the delivery, inventory, and billing policies for the deferred purchase option
- Select products that will have the deferred purchase option
On the app's homepage, you want to view a list of created deferred purchase options.
You'll use Polaris and App Bridge React to build the user interface. You'll use GraphQL Admin API mutations and queries to create and retrieve deferred purchase options.
At the end of this tutorial, you'll have a functioning app. This app will be simple, but you’ll learn where to find resources to build more complex features on your own.
What you'll learn
Anchor link to section titled "What you'll learn"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
Requirements
Anchor link to section titled "Requirements"- Complete the Getting started tutorial to set up the foundation of your app.
- Familiarize yourself with purchase options and deferred purchase options.
Step 1: Define constants in a file
Anchor link to section titled "Step 1: Define constants in a file"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
.
Step 2: Create app components
Anchor link to section titled "Step 2: Create app components"Create the following app components:
- Name
- Deposit selection
- Remaining balance charge
- Fulfillment selection and Inventory reserve
- Product selection
Create the name component
Anchor link to section titled "Create the name component"Create a component that enables merchants to set the deferred purchase option name. The name component includes the following Polaris components:
In the web/frontend/components
folder, create PurchaseOptionName.jsx
.
Create the deposit selection component
Anchor link to section titled "Create the deposit selection component"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:
In the web/frontend/components
folder, create DepositSelection.jsx
.
Create the remaining balance charge component
Anchor link to section titled "Create the remaining balance charge component"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:
In the web/frontend/components
folder, create RemainingBalanceCharge.jsx
.
Create the fulfillment selection and inventory reserve components
Anchor link to section titled "Create the fulfillment selection and inventory reserve components"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:
In the
web/frontend/components
folder, createFulfillmentSelection.jsx
.In the
web/frontend/components
folder, createInventoryReserve.jsx
.
Create the product selection component
Anchor link to section titled "Create the product selection component"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.

Step 3: Add app components and GraphQL Admin API mutations
Anchor link to section titled "Step 3: Add app components and GraphQL Admin API mutations"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:
Step 4: Display deferred purchase options
Anchor link to section titled "Step 4: Display deferred purchase options"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:
Step 5: Test your app
Anchor link to section titled "Step 5: Test your app"Create a deferred purchase option in your app to test if the app works as expected.
- On the homepage, click Create a deferred purchase options.
- In the Deferred purchase option section, set the name for the deferred purchase option.
- In the Deposit section, from the dropdown list, select the deposit amount.
- In the Remaining balance charge date section, select the date.
- In the Fulfillment section, select when to fulfill the order.
- In the Inventory section, select when to update the inventory.
- Click Select products, and add products that will have the deferred purchase option.
- 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.