# How can you provide mandatory fields to CashierPaymentsWidget?

## MandatoryFields as a property

```
<CashierPaymentsWidget
  ...
  mandatoryFields={{firstName: 'John'}}
/>
```

Widget will render `PaymentDetails` only with a difference at MandatoryFields.
MandatoryFields that were already passed to component would be hidden inside `PaymentDetails`.

## Getting a list of MandatoryFields after component render

You can receive a list of MandatoryFields in a way like this:
```
CashierPaymentsWidget
    .whenComponentInited()
    .getAllMandatoryFields()
    .then(mandatoryFields => console.log(mandatoryFields));
```

The response will be something like:
```
["firstName","lastName"]
```

After receiving a list of mandatory fields you can render them by yourself.

## Receiving a list of MandatoryFields independently from CashierPaymentsWidget initialization

You can do it in two ways:

### Getting payment methods by country
```
CashierPaymentsWidget
    .fetchPaymentMethods('USA')
    .then(paymentMethods => console.log(paymentMethods));
```

or directly by SDK:
```
CashierPaymentsSDK
    .fetchPaymentMethods(host = '', settingsRequestUrl = '', countryCode3 = 'USA')
    .then(paymentMethods => console.log(paymentMethods));
```

The response will be something like:
```
{
    paymentMethods: [{
        paymentMethod: 'creditCard',
        name: 'Credit Card',
        icon: 'https://www.wix.com/_partials/third-party/cashier-settings/methods-new/method-icon-cc-new.svg',
        mandatoryFields: [{
            fieldName: 'firstName',
            ...
        }]
    }]
}
```

After that you should collect MandatoryFields by all payment methods by yourself.

### Getting mandatory fields byb country
```
CashierPaymentsWidget
    .fetchMandatoryFields('USA')
    .then(mandatoryFields => console.log(mandatoryFields));
```

The response will be something like:
```
['firstName', 'lastName', 'address']
```


## Dynamic update of MandatoryFields

If you want to pass filled MandatoryFields to CashierPaymentsWidget you can do it in two different ways.

#### Way 1 - Updating widget props

In case where you will update widget's props:
```
<CashierPaymentsWidget
  ...
  mandatoryFields={{firstName: 'John', lastName: 'Smith'}}
/>
```
widget will re-render its content and will exclude provided MandatoryFields from its rendering.

#### Way 2 - Calling `setMandatoryFields` method

In another way you can call:
```
CashierPaymentWidget.setMandatoryFields({
    firstName: 'John',
    lastName: 'Smith'
});
```

and `PaymentDetails` will update MandatoryFields in a real-time without `CashierPaymentsWidget` re-rendering.