Add deferred purchase option app components

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

• 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 constants.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/purchaseOptions 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/constants.js and includes the following Polaris components:

• Card
• Select

In the web/frontend/components/purchaseOptions 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/constants.js and includes the following Polaris components:

• Card
• DatePicker

In the web/frontend/components/purchaseOptions 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/constants.js and include the following Polaris components:

• Card
• Stack
• RadioButton

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

2. In the web/frontend/components/purchaseOptions 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/purchaseOptions folder, create ProductsSelection.jsx.

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

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.

1. Install @shopify/react-form. Run the following command in the web/frontend folder:

1. Update the web/frontend/pages/purchaseOptions/new.jsx file with the following code:

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;

1. Add the GraphQL mutation for creating a deferred 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.

1. 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.

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:

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 previously created deferred purchase options.

1. Navigate to the web/index.js. Add the following GraphQL query to list the deferred purchase options, after the previous GraphQL mutation.

1. Add a new route for listing the purchase options, after the previously added route.

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

1. On the homepage, click Create 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.

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.