I had a few issues following the official Cloudflare docs to get ssl set up, so I'll note the changes I made here.
Offical tutorial can be found here: https://support.cloudflare.com/hc/en-us/articles/205893698-Configure-Cloudflare-and-Heroku-over-HTTPS
First change we make to the official tutorial.
When creating our CNAMEs for our sub and domain names in cloudflare, point to the Heroku App name and not the DNS target provided by Heroku in Step 1 (if you're following the tutorial)
It should look similar to the below
Ensure the nameservers are pointing to cloudflare and the CNAME works correctly.
If you can connect to the webpage with HTTP, it's time to set up HTTPS
Ok, now lets activate SSL following Step 4a - Enable SSL
However instead of choosing Flexible , select Full which Encrypts end-to-end, using a self signed certificate on the server.
Ensure you haven't configured an SSL Certificate on the heroku server, this isn't required. Choosing Full will self sign a certificate on the server for us.
Assuming the Certificate Status is Active, this change should be instantaneous.
Don't do Step 4b - Force all traffic over HTTPS unless our configuration in step 4a is working correctly.