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:
- Add new routes to your app's server that call the Shopify Admin API
- Add UI to view the deferred purchase option
- Add UI to create a deferred purchase option
- Test your app on a development store
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
Anchor link to section titled "Step 1: Define constants"Create a file that defines constants. The constants are used across your app components.
In your project directory, in the web/frontend
folder, create constants.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/purchaseOptions/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/constants.js
and includes the following Polaris components:
In the web/frontend/components/purchaseOptions.jsx
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/constants.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/constants.js
and include the following Polaris components:
In the
web/frontend/components
folder, createFulfillmentSelection.jsx
.In the
web/frontend/purchaseOptions/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 UI for creating purchase options
Anchor link to section titled "Step 3: Add UI for creating purchase options"You have created the required components. Now you are ready to put them together to create UI so merchants can create deferred purchase options.
Learn more about GraphQL Admin API mutations for deferred purchase options.
- Install
@shopify/react-form
. Run the following command in theweb/docs/frontend
folder:
- Update the
web/frontend/pages/purchaseOptions/new.jsx
file with the following code:
Step 4: Add API endpoint to create purchase options
Anchor link to section titled "Step 4: Add API endpoint to create purchase options"Next we will define a new API endpoint that will be called in the previous step to create deferred purchase options. The API endpoint in our app will call the Shopify GraphQL Admin API. Open the app server file found in web/index.js
;
- Add the GraphQL mutation for creating a deffered purchase option to the file after
const app = express();
. This mutation will take the data from the form and call the Shopify GraphQL Admin API to create a deferred purchase option.
- Add a new route to the app server to handle the API request. This route will call the GraphQL mutation to create the deferred purchase option. Add this code after the
app.use(express.json());
line.
Step 5: Add UI for listing purchase options
Anchor link to section titled "Step 5: Add UI for listing purchase options"Next you will update the app home page UI to display the created deferred purchase options.
In the web/frontend/pages
folder, update index.jsx
with the following code:
Step 6: Add API endpoint for listing purchase options
Anchor link to section titled "Step 6: Add API endpoint for listing purchase options"Now you will add an API endpoint to the app server to retrieve the deferred purchase options. This endpoint will call the Shopify GraphQL Admin API to retrieve previsouly created deferred purchase options.
- Navigate to the
web/index.js
. Add the following GraphQL query to list the deffered purchase options, after the previous GraphQL mutation.
- Add a new route for listing the purchase options, after the previously added route.
Step 7: Test your app
Anchor link to section titled "Step 7: Test your app"Create a deferred purchase option in your app to test if the app works as expected.
- On the homepage, click Create 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.
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.