<BillingDetails />

A component for updating account details, billing address and payment methods for an account.

The billing details component

The above component is created using the props below

<BillingDetails
    isCardEnabled={true} // Setting to 'false' will remove the card styling
    shadow={'shadow-md'}
    className={undefined}
    hidePaymentMethodForm={false} // Setting to 'true' will hide the right side
    hideBillingDetailsForm={false} // Setting to 'true' will hide the left side
    countryListFilter={undefined}
/>

className

You can apply any tailwind css styling to the billing details component.

countryListFilter

You can filter out certain countries using this prop. The below code will filter out the United States and Canada. Any country can be filtered out by using their standard two letter abbreviation.

const countriesToFilter = ["US", "CA"];

return (
  <BillingDetails
    countryListFilter={(country) =>
      !removedCountries.includes(country.value)
    }
  />
)