From their account your customers can manage their subscriptions, view their orders, and update their billing and shipping details.

​
Code

<marzipan-account>
  <div slot="stripe-card-element" id="stripe-card-element"></div>
</marzipan-account>

​
Props

There are no props available for the account component.

​
Styling

The following parts are available to style the account component:
​
--button
The primary action buttons displayed in the account component. This is normally when a “submit” button is used.
​
--cancel-button
The cancel button displayed in the account component.
​
--nav-link
The navigation links displayed in the account component.
​
--active-nav-link
The navigation links displayed in the account component when they are active.
​
--form-container
The containing div around the login and register forms.
​
--form
The login and register forms
​
--h1
The h1 heading.
​
--h2
The h2 heading.
​
--label
The label.
​
--link
Links
​
--loading-spinner
The loading spinner displayed when various actions are loading.
​
--login-button
The primary action button on the login, register and verify account forms.
​
--input
The styling applied to form input fields, including the <textarea> element.
​
--marzipan-spinner
The loading spinner displayed when various actions are loading.
When targetting any of the parts, you must prepend the part name with the component name. For example, to target the loading spinner in the account component, you would use the following CSS:
marzipan-account::part(--loading-spinner) {
    @apply bg-green-500;
}