---
gid: d5e6f7a8-9b0c-1d2e-3f4a-5b6c7d8e9f0a
title: Build a discount extension
description: Learn how to develop a scaffolded POS UI extension into a simple discount extension.
---

import POSUIRequirements from 'app/views/partials/apps/pos/ui-extensions/requirements.mdx'

<Picker name="extension">
  <PickerOption name="react" />
  <PickerOption name="javascript" />
</Picker>

<Overview>
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 create a smart grid tile that's enabled after a cart reaches a specified value. Tapping the tile will open a modal displaying buttons for available discounts. Pressing a button will apply a discount to the cart and present a success notification.

![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:

- Subscribe to cart changes.
- Enable or disable the tile based on cart contents.
- Add buttons to the modal that apply a discount and show a toast when tapped.
- Deploy your extension to Shopify, create a version, and publish.

</Overview>

<Requirements>
	<POSUIRequirements />
	<Requirement 
		href="/docs/apps/build/scaffold-app" 
		label="Scaffold an app"
	>
		Scaffold an app using Shopify CLI. This tutorial is compatible with the 
		[extension-only template](/docs/apps/structure/app-extensions/extension-only-apps).
	</Requirement>
	<Requirement 
		href="/docs/api/pos-ui-extensions/unstable/getting-started" 
		label="Generate a POS UI Extension"
	>
		Generate a POS UI Extension using the Shopify CLI.
	</Requirement>
</Requirements>

<StepSection>


<Step>

### Subscribe to cart changes
You previously created an app and generated a POS UI extension using Shopify CLI. You now need to subscribe to cart changes to get the contents of a cart. By subscribing to cart changes, you'll be able to control whether the smart grid tile is enabled after a cart reaches a specified value.

  <Substep>
   In the tile code, subscribe to cart changes and mutate the state based on the updated cart.
    <CodeRef
      extension="react"
      href="https://github.com/Shopify/ui-extensions/blob/unstable/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/discount-example/tile.tsx"
      tag="tile.subscribe" />

    <CodeRef
      extension="javascript"
      href="https://github.com/Shopify/ui-extensions/blob/unstable/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/discount-example/tile.ts"
      tag="tile.subscribe" />
  </Substep>

</Step>

<Step>


### Enable or disable the tile based on cart contents

With the cart contents in place, you can now enable or disable the tile based on cart contents. You can enable or disable the tile based on cart contents by accessing its `subscribable` property.

  <Substep>
   In the tile code, initialize the state based on the initial value of the `subscribable` property.
  <CodeRef
    extension="react"
    href="https://github.com/Shopify/ui-extensions/blob/unstable/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/discount-example/tile.tsx"
    tag="tile.enable" />

  <CodeRef
    extension="react"
    href="https://github.com/Shopify/ui-extensions/blob/unstable/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/discount-example/tile.ts"
    tag="tile.enable" />

  </Substep>

</Step>

<Step>


### Add Buttons

With the cart contents in place, you can now add buttons to the modal that apply a discount and display a toast when tapped. You can add buttons to the modal that trigger some action on press.

  <Substep>
    Create the buttons on the modal. Note that most components belong in a `ScrollView`.

    <CodeRef
      extension="react"
      href="https://github.com/Shopify/ui-extensions/blob/unstable/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/discount-example/modal.tsx" />

    <CodeRef
      extension="javascript"
      href="https://github.com/Shopify/ui-extensions/blob/unstable/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/discount-example/modal.ts" />
  </Substep>

</Step>

<Step>

### Define a function to trigger an action
To trigger an action when the button is pressed, you need to define an `onPress` function. In the context of this tutorial, you'll apply the discount and show the toast.
  <Substep>
    Define an `onPress` function to apply the discount and show the toast.

    <CodeRef
      href="https://github.com/Shopify/ui-extensions/blob/unstable/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/discount-example/modal.tsx"
      tag="modal.define-onpress" />

    <CodeRef
      extension="javascript"
      href="https://github.com/Shopify/ui-extensions/blob/unstable/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/discount-example/modal.ts"
      tag="modal.define-onpress" />
  </Substep>

</Step>

<Step>

### Add a description for your extension

In POS, the description is used to help merchants discover and add your extension. This description is used as the label for your extension in POS.

<Substep>
Your extension's description will be visible to the merchant when they discover and add it to their POS.

![Extension description](/assets/apps/pos/ui-ext-description.png)

When you generate a POS UI Extension from Shopify CLI, the extension description defaults to the name of the extension. You can update the description in the generated `toml` file (`shopify.extension.toml`).

<CodeRef
  href="https://github.com/Shopify/ui-extensions/blob/unstable/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/discount-example/shopify.extension.toml" />

<Notice type="note" title="Note">
`name` is an internal value that is visible in the Partner Dashboard as the title of an extension on the page that displays the extensions list.
</Notice>

</Substep>

</Step>

<Step>
    ### Test the extension

    To test the extension, you'll need to run your app locally and test the extension in the POS.
    <Substep>
    1. Navigate to your app directory and start your development server.

    1. Press `p` to open the developer console.

    1. In the developer console, click on the view mobile button or scan the provided QR code to preview your extension.


  </Substep>

  </Step>

<Step>

### Deploy and release

Congratulations! You've created a POS UI extension that applies discounts to items in the cart. Now you can deploy and release your extension.
<Substep>
  Refer to [Deploy app extensions](https://shopify.dev/docs/apps/deployment/app-versions) for more information.
</Substep>

</Step>
</StepSection>