The `MethodCard` enables users to toggle between discount methods to select code or automatic discount, and provides inputs to enter or generate a `discountCode` and `discountTitle`. ## Example code ```jsx?title:'MyApp.jsx' import React, { useState } from "react"; import { MethodCard, DiscountClass, DiscountMethod, } from "@shopify/discount-app-components"; function MyApp() { const [discountMethod, setDiscountMethod] = useState( DiscountMethod.Automatic ); const [discountTitle, setDiscountTitle] = useState(""); const [discountCode, setDiscountCode] = useState(""); return ( ); } ``` ## Properties |Name|Type|Description|Required| |---|---|---|---| |title|`string`|Title of the discount type|Yes| |discountClass|`DiscountClass`|The class of the current discount (`product`, `order` or `shipping`).|Yes| |discountMethod|`Field`|The discount method (either `code` or `automatic`). Used to control whether a text input or a code generator is shown.|Yes| |discountMethodHidden|`boolean`|Whether the discount method picker is hidden.|No| |discountTitle|`Field`|The discount title.|Yes| |discountCode|`Field`|The discount code generated.|Yes| |defaultDiscountCodeLength|`number`|The length of discount code to generate. Defaults to 12.|No| ## DiscountClass |Name|Value|Description| |---|---|---| |Product|`PRODUCT`|The discount applies to specific products or product variants.| |Order|`ORDER`|The discount applies to the entire order.| |Shipping|`SHIPPING`|The discount applies to shipping rates.| ## DiscountMethod |Name|Value|Description| |---|---|---| |Code|`CODE`|Discount code| |Automatic|`AUTOMATIC`|Automatic discount|