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|