foreign-sapphire

Setting Up Apple Pay Domain Verification Route in TanStack Start

I'm using TanStack Start, hosted on a VPS with Docker, and I'm trying to set up a route for Apple Pay verification on my staging URL (staging.xxx.ie).
I initially tried placing apple-developer-merchantid-domain-association.tsx inside a .well-known folder but then opted to use createRoute inside __root.tsx.
Current Code:
I created this route inside the __root.tsx:

const appleMerchantId = process.env.APPLE_MERCHANT_ID!;

export const appleRoute = createRoute({
  getParentRoute: () => Route,
  path: "/.well-known/apple-developer-merchantid-domain-association",
  component: () => appleMerchantId,
});

const appleMerchantId = process.env.APPLE_MERCHANT_ID!;

export const appleRoute = createRoute({
  getParentRoute: () => Route,
  path: "/.well-known/apple-developer-merchantid-domain-association",
  component: () => appleMerchantId,
});

This should return the Apple Merchant ID for verification, but when I try to access the URL, I get a "page not found" error.
(see image attached) Question:
Is this the correct way to expose the apple-developer-merchantid-domain-association file for Apple Pay domain verification? Or is there a better approach?

5 Replies

vicious-gold•7mo ago

that's static data, right?

foreign-sapphireOP•7mo ago

vicious-gold•7mo ago

so can't you configure your server to serve the .well-known dir?

foreign-sapphireOP•7mo ago

I trying to do it within tanstack start as a route oh I get what ur saying now. You are saying make it outside the main project

vicious-gold•7mo ago

yes

Gaming

Programming

Setting Up Apple Pay Domain Verification Route in TanStack Start

Did you find this page helpful?