Failed Payment UI

Article author
Duncan Hamra
This article will show you a few different ways to prompt members to update their billing when a payment fails.

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. 

light

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. 

Screen

 

Was this article helpful?

Comments

5 comments

  • Comment author
    William de Broucker

    Hello !

    It seems like the attribute data-ms-content = "!has-failed-payment" only works for connected users

    1
  • Comment author
    Duncan Hamra

    William de Broucker when you say connected users, do you mean a member that has a paid plan? I'll need to do some testing around this 🤔

    To confirm, "!has-failed-payments" should only be visible when someone does NOT have a failed payment. 

    0
  • Comment author
    William de Broucker

    Hello, 

    the attribute !has-failed-payments does work if someone is connected and does NOT have a failed payment. 

    However, I would prefer for it to the attribute to works for : 

    - People not connected (because the do not have a failed payment)

    and

    - People connected that do NOT have a failed payment. 

    Do you think it is doable ? 

    thanks

    0
  • Comment author
    Duncan Hamra

    Hmmm... I wonder if you can achieve the same effect with some other combination of attributes 🤔 What is the purpose/goal of the UI with the attribute? That might help me think up a solution

    0
  • Comment author
    William de Broucker

    Yes I can achieve it with the same some combinations, but that forces me to have a lot of duplicate divs in Webflow

    The purpose is that I still give access for a few days to the premium content for people with a failed payment (I also display a failed payment banner)

    0

Please sign in to leave a comment.