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.

The navigation links displayed in the account component.

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.

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;
}