How to close paywall on web sdk?

Hey ​@yernar,

Thank you for reaching out. I’ll be happy to help!

On the Web, this is expected, as Web Paywalls can be closed by using the browser’s own navigation to go back. In the case that the Paywall is displayed on the Web directly from the app via a Web Purchase Link, closing the browser that displays the Paywall should be enough. 

I hope this helps!

Hi ​@alejandra-wetsch I’m also experiencing this.  In our web app, hitting back will navigate them out of our application altogether (it’s a single-page app), and closing the browser is also another friction point for our users.  RevenueCat should support some kind of close button.  Or if there is a real workaround that does not increase friction, please share.  Thank you.

Hey ​@harleyjj-foriio, 

Thank you for following up!

I’m sorry this is a friction point for your users! I’ll share this internally with the Engineering team to see what can be done to mitigate this. I’ll let you know as soon as I have more information!

This is a very important issue/bug with your RevenueCat Web paywall. Many people have single page App’s and navigating back takes them out of the Web App. If a user opens the paywall and then decides they want to close it to view more of the App subscribing page before actually subscribing, the only way out is reloading the App to close the Paywall. In addition, ,it does not even show on the web because style="visibility: hidden; . See below:

I have integrated a way for a user to use the ESC button to close the Paywall (not easy and not user friendly!!) but surely someone can fix this easily on your end. It really is bad UI to not have a close button!

---------------------------------------------
<button role="button" class="stack svelte-10tzzo3” style="visibility: hidden; display: flex; position: relative; width: fit-content; height: fit-content; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0px; margin: 0px; padding: 0px; background: none; border: none; border-radius: 0px; box-shadow: none;"><!----><!----> <!----><!----><!----><span style="display: block; position: relative; width: fit-content; height: fit-content; background: none;" class=""><!----><span class="" style="display: block; width: fit-content; height: fit-content; margin: 0px; padding: 0px; color: rgb(0, 0, 0); text-align: start; font-weight: 500; font-size: 24px; font-family: sans-serif;"><!----><!---->Close</span><!----></span><!----> <!----></button>

Hey ​@michael-sozanski, ​@harleyjj-foriio, ​@yernar, 

I appreciate your patience here!

The team has included a close button in the purchase-js SDK, allowing the back button to be displayed in paywalls on the web.

This feature is available in version 1.21.0 and later of the SDK.

I hope this helps!