# Build a discount extension Learn how to develop a scaffolded POS UI extension into a simple discount extension. ## Intro This tutorial shows you how to use the `pos.home.tile.render` and `pos.home.modal.render` [extension targets](https://shopify.dev/docs/api/pos-ui-extensions/targets) to build a simple POS UI extension that quickly applies discounts to items in the cart. You'll develop the scaffolded extension into a smart grid tile that becomes enabled when the cart reaches a total value. When tapped, the tile opens a modal that presents buttons representing available discounts. When tapped, these buttons apply a discount to the cart and present a toast for notification of success. ![POS UI Extensions Discount Example App](/assets/api/pos/pos-ui-extensions-discount-example.gif) ## What you'll learn In this tutorial, you'll learn how to do the following tasks: - Enable or disable the tile based on cart contents. - Add buttons to the modal that apply a discount and show a toast when tapped. - Give your extension a useful description. - Deploy your extension to Shopify, create a version, and publish. ## Requirements - You've completed the [Getting started with POS UI extensions](https://shopify.dev/docs/api/pos-ui-extensions/getting-started) guide. ## Sample code The sample code imports some extension components to build the UI. The tile contains the logic to control its enablement based on the cart subtotal. The modal contains the logic to apply discounts based on button tap. You can copy and paste the following code into your index file. You can also update your extension's configuration file following the `shopify.extension.toml` example. The rest of the tutorial walks through this sample code step-by-step. ```tsx import React, { useState } from 'react'; import { Tile, useApi, reactExtension } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); const shouldEnable = (subtotal: string): boolean => { return Number(subtotal) > 100 } // You can use the initial cart value to set up state const [enabled, setEnabled] = useState(shouldEnable(api.cart.subscribable.initial.subtotal)); // You can subscribe to changes in the cart to mutate state api.cart.subscribable.subscribe((cart) => { setEnabled(shouldEnable(cart.subtotal)); }); return ( ); }; export default reactExtension('pos.home.tile.render', () => { return }) ``` ```tsx import React from 'react'; import { CartDiscountType } from '@shopify/ui-extensions/point-of-sale' import { ScrollView, Button, Navigator, Screen, useApi, reactExtension } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridModal = () => { const api = useApi<'pos.home.modal.render'>(); const onButtonPress = (type: CartDiscountType, title: string, amount: string) => { // You can apply a discount through the cart API api.cart.applyCartDiscount(type, title, amount); // You can show a toast to notify the user of something api.toast.show('Discount applied'); } return (