Upload JSON file "apple-app-site-association"

[Bootstrapper]

Hey guys, I am using Cloudflare to handle my DNS and I have managed to create a reverse-proxy using Cloudflare Workers. In my scenario, I needed to create https://mydomain/.well-known/apple-developer-merchantid-domain-association to start accepting Apple Pay in my app. As you know, Webflow doesn’t support the creation of .well-known folder or redirects.

P/S: I am not a techie and I got these steps to work by putting together resources I found about setting up a reverse proxy using Cloudflare Workers to serve the file under a specific route. I’m afraid I won’t be of much help (I’ll try!) if you have any technical questions or different setup/use cases than my steps below.

Here are my steps:

1. Configure your DNS provider and Webflow to use Cloudflare to manage your DNS: Connecting a custom domain | Cloudflare | Webflow University

2. Host your the file you want to serve under the .well-known folder where you can get a publicly accessible link. In my case, I’m a Xano user hence I uploaded my file there and copied the public url to for the file.

3. Go to Cloudflare > Workers. Setup your workers subdomain - this is where your workers live and accessible. You will be able to connect custom routes to your worker later.
   

   

4. Click on ‘Create a service’

5. Give your service a name or use the default random name the system generates for you. For me, I name mine stripe-apple-pay.

6. Select ‘HTTP Handler’ as your starter
   

   

7. In the next screen, click on ‘Quick edit’
   

   

8. In the Quick Edit screen, replace the boilerplate code with the following code (Remember to replace your destinationURL placeholder with your file’s public url):

addEventListener("fetch", (event) => {
  event.respondWith(
    handleRequest(event.request).catch(
      (err) => new Response(err.stack, { status: 500 })
    )
  );
});

const base = "<your site's base URL>"
const destinationURL = "<public link to the file's URL>";
const statusCode = 301;

async function handleRequest(request) {
  const requestUrl = new URL(request.url);
  const { pathname, search } = requestUrl;
  // if request is for the resource to be reverse proxied
  if (requestUrl == "<URL of the requested resource eg. https://mydomain.com/.well-known/apple-developer-merchantid-domain-association>") {
    return fetch(destinationURL);
  } else {   // if request for other than the reverse proxied resource, reconstruct URL and redirect to the intended destination
    const redirectUrl = base + pathname + search;
    return Response.redirect(redirectUrl, statusCode);
  }
}

addEventListener('fetch', async event => {
  event.respondWith(handleRequest(event.request));
});

9. Save and Deploy

10. Go back to the previous screen and go to Triggers > Add Custom Domain. This adds a custom domain for your worker. I already have a CNAME pointing www to Webflow so in this step, I used the domain name without ‘www’ so it’s just domain-name.tld. After you have added the domain, you will need to wait a while for Cloudflare to activate the certificate.
    

    

11. Still under ‘Triggers’, go to ‘Routes’ section > ‘Add route’.

12. The ‘Route’ is whatever the url that we need to access the worker from. In my case, it’s https://mydomain/.well-known/apple-developer-merchantid-domain-association.

13. If your certificate for the custom domain is already active, you should be able to choose your custom domain under ‘Zone’.

14. Wait a few minutes for the configuration to propagate. Now go back to Quick Edits and send a GET request to your route. If everything is configured properly, you should get a Status 200 response with the file’s raw resource below the headers in the response.

15. In my case, I need to go back to Stripe to enter my domain name for them to test the url
    

    

16. Stripe detected the file at the url they are expecting hence approved my domain for Apple Pay.