Guidance on fullscreen web paywalls.

Hey ​@chris-kasdn2137 ,

I had previously built an example project to test the SDK, so I made a few updates and published it on GitHub in case it helps.

You can try it out here:
https://github.com/AbdallahElhanafy/revenuecat-js-sdk-example

Let me know if this is helpful!

Hey ​@chris-kasdn2137, 

Thank you for reaching out!

Would you mind sharing a link to your Web Paywall so I can test it and share it internally with the Engineering team for further troubleshooting?

Thanks,

Here is a staging site: https://swellscope-marketing-site-konwu.ondigitalocean.app/lifetime-access

The issues are all around the experience on safari mobile.

The example ​@Crudyg123 posted is a good summary of the various behaviours that have to be considered: https://github.com/AbdallahElhanafy/revenuecat-js-sdk-example

Hey ​@chris-kasdn2137, 

Thank you for your response. And thank you ​@Crudyg123 for posting your sample project, I’ll make sure to share this internally with the Engineering team.

Regarding the full-screen/inset issue, the team added a way to opt in to a consistent safe-area bleed behavior in the SDK, which can be configured by adding viewport-fit=cover to your viewport meta tag and one CSS rule on any element backing the safe-area canvas (typically html or body):

html { background: var(--rc-purchases-ui-bg-color, Canvas); }

For the height/spacing, I see that the Footer is higher than what’s displayed in the Paywall Editor, which may be due to the Mobile canvas in the Paywall Editor accounting for the safe areas of mobile applications. This is a known limitation that the team is working to address. Reducing the Footer Padding may help the actual Paywall look more aligned with what you have in the Paywall Editor. 

Finally, for the keyboard, I was able to reproduce this when trying to enter the Promo Code in the checkout screen. Please let me know if that’s not what you were referring to. 

Thank you for reporting all this. I will share this internally with the team for them to review.