Failed Payment UI

How it works

Elements with data-ms-content="has-failed-payment" will be visible for members with failed payments.

You can help your members to update their payment info ASAP by placing a customer portal attribute data-ms-action="customer-portal" on or inside of your failed payment UI. When clicked, it will launch the Customer Portal. 

Side note: Elements with the inverse, data-ms-content="!has-failed-payment" will be visible for members who do NOT have any failed payments.

Display a Banner

We recommend adding a noticeable banner to the top your "members-only" pages. Click here to copy and paste a banner component with all of the necessary attributes.  

Pro tip - We've added an optional attribute of data-ms-bind:style="display:flex" so that you can hide the element when you're done designing it. If the member has a failed payment, Memberstack will set the element to display flex. 

Update Your "Access Denied" Page

If you're using Memberstack's Gated Content functionality - then your members will be redirected to the "Access Denied" page when they have a failed payment & they try to access gated content. 

We highly recommend adding a banner (or an entire section) which is visible to member's with a failed payment. Click here to copy and paste a full-page component. 

Pro tip - We've added an optional attribute of data-ms-bind:style="display:block" so that you can hide the element when you're done designing it. If the member has a failed payment, Memberstack will set the element to display block.