How to add a paywall to your Oracle APEX site using MemberSpace 💵

I am exploring third party solutions for monetizing access to content hosted on Oracle APEX. First on the list was MemberSpace. These are my notes 🗒️. Check out the web site to see what you get but basically they handle payments for membership access to protected content (pages).

image

1️⃣ It works. There are three levels of protection. I tested the first two and with a little wrangling got both working. I see no reason the third (content links) would not work either. This is all documented on their site.

See their website for more information.
See their website for more information.

2️⃣ You will need to map your APEX app to a domain. If you haven't done that see my notes on that in the list of Oracle APEX articles. MemberSpace will have you set up a CNAME record for your domain like this (I use Hover). The highlighted entry must say "custom.memberspace.com" and you get to choose the hostname. I choose "members" so the custom HTML links MemberSpace generated point to members.myapexapp.com. You will need to send a screenshot like the one below to MemberSpace. Support responded within 10 minutes in my case.

image

3️⃣ Next they give you a little JavaScript to add to the headers of all of your pages. I removed the <script> tags and put this in a file called memberspace.js.

image

4️⃣ Upload the file as a Static Application File and register the file within the User Interface.

image
image

5️⃣ In MemberSpace you will add the URL to the page you want to protect and that provides level 1 protection. In this case the user briefly sees the content before being redirected to the page of your choice (usually a sign-up page and in theory only).

I ended up redirecting back to my base domain (myapexapp.com). When I tried to redirect to a specific page it mangled or injected and mangled the parameters being passed to the URL (I didn't add these) and broke the redirect.

image

6️⃣ To set up the second level of protection they tell you to add a block of HTML to the body of the page you want to protect. I found I needed to remove the <noscript> section and also place the content in the header block instead of the body to get it to work.

This is the html they initially gave me to add to the page body.

<noscript><meta http-equiv="refresh" content="0; url=https://www.memberspace.com/enable-javascript"></noscript><meta name="robots" content="noindex, nofollow"><style>#__memberspace_modal_protected_page {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:2147483646;}</style><div id="__memberspace_modal_protected_page"></div>

This is the html I got to work by adding to the header instead.

<meta name="robots" content="noindex, nofollow"><style>#__memberspace_modal_protected_page {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:2147483646;}</style><div id="__memberspace_modal_protected_page"></div>

And here it is in page designer.

image

*️⃣ You will need to connect a Stripe account if you are going to create plans which charge members. You will pay the Stripe fee on top of MemberSpace fees.