Failed to author payment extension remix code

Shopify Apps

Topic summary

A developer is encountering an authentication exception when building a Shopify credit card payment extension using the Remix template and CLI. The error occurs at authenticate.admin(request) in the auth route.

Setup approach:

  • Created payment app via npm init @shopify/app@latest
  • Cloned a Docker branch from GitHub repository
  • Built and ran the app inside Docker container
  • Manually synced client_id from shopify.app.toml to Docker environment
  • Attempted installation to development store

Key issues:

  • .env file not consistently generated
  • Cannot locate SHOPIFY_API_SECRET value
  • OAuth redirect flow triggers exception during authentication
  • Console logs show “Shop hasn’t installed app yet” message followed by error

Outstanding questions:

  1. How to properly use the Remix credit card payments template
  2. Whether configuration steps can be skipped for quick testing
  3. Confusion about basic app settings in shopify.app.toml
  4. Partner Dashboard link access issues (possible permission problem)
  5. Whether using encryption_certificate_fingerprint = "Test Certificate" is appropriate for development

Status: Unresolved. Developer has repeated tests without success and seeks clarification on proper setup workflow.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I am following steps in Build a credit card payments extensions with Shopify CLI
And I got exception from authenticate.admin(request) . I could not figure out which step, I missed.
(https://github.com/Jeff01997/shopify-payment-app/blob/main/app/routes/auth.%24.jsx#L5)
Below is the detail steps:

1 Create a payments app

$ npm init @Shopify_77 [email removed]
and create payment extensions with pnpm (the extension was synced into git in next step)

2 Clone docker branch

$ git clone https://github.com/Jeff01997/shopify-payment-app.git

3 Build docker image

$ docker build -t shopify.pay .

4 Start docker container from docker image and run sh

$ docker run -ti shopify.pay sh

5 Sync app id from step 1 to shopify.app.toml inside docker

Find “client_id =” in shopify.app.toml (step 1) and fill it to
shopify.app.toml (inside docker)

6 Start app from docker

$ npm run dev
install the app to my development store

Resturn:
catch a exceptio

1 Like
2

I repeat my test but it did not fix my issue,
And the .env not always be general, I have no idea of it.
for SHOPIFY_API_SECRET, I could not found it.
in shopify.app.toml

client_id = “c0d…”

.env

SHOPIFY_API_KEY=c0d…

SHOPIFY_CC2_ID=3fec…%

*********partial console log pasted here ******

17:13:02 │ remix │ GET /?embedded=1&hmac=82405f70a… - - 7.244 ms
17:13:02 │ remix │ [shopify-app/INFO] Shop hasn’t installed app yet, redirecting to OAuth | {shop: myteststore…com}
17:13:02 │ remix │ GET /app?embedded=1&hmac=82405f70<myteststore…com>&timestamp=1744276382 302 - - 11.484 ms
17:13:02 │ remix │ auth load- Request received: Request {
17:13:02 │ remix │ size: 0,
17:13:02 │ remix │ follow: 20,
17:13:02 │ remix │ [Symbol(Request internals)]: {
17:13:02 │ remix │ method: ‘GET’,
17:13:02 │ remix │ redirect: ‘follow’,
17:13:02 │ remix │ headers: {

17:13:02 │ remix │ ‘cf-worker’: ‘trycloudflare.com’,
17:13:02 │ remix │ connection: ‘close’,
17:13:02 │ remix │ host: ‘…trycloudflare.com’,
17:13:02 │ remix │
17:13:02 │ remix │ ‘user-agent’: ‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Safari/605.1.15’,
17:13:02 │ remix │ ‘x-forwarded-for’: ‘220.133.81.12’,
17:13:02 │ remix │ ‘x-forwarded-proto’: ‘https’
17:13:02 │ remix │ },

17:13:02 │ remix │ pathname: ‘/auth/exit-iframe’,
17:13:02 │ remix │ search: '?embedded=1&hmac=82405f70
17:13:02 │ remix │ searchParams: URLSearchParams {
17:13:02 │ remix │ ‘embedded’ => ‘1’,
17:13:02 │ remix │ ‘hmac’ => ‘82405f7’,
17:13:02 │ remix │ ‘host’ => ‘YWR’,
17:13:02 │ remix │ ‘id_token’ => ‘eyJhbGc’,
17:13:02 │ remix │
17:13:02 │ remix │ ‘exitIframe’ => ‘/auth?shop=myteststore…com&host=YWR’ },
17:13:02 │ remix │ hash: ‘’
17:13:02 │ remix │ },
17:13:02 │ remix │ signal: AbortSignal { aborted: false }
17:13:02 │ remix │ }
17:13:02 │ remix │ }
17:13:02 │ remix │ GET /auth/exit-iframe?embedded=1&hmac=8240200 - - 5.682 ms
//above seems to be auth reques
//and below is the exception
17:13:02 │ remix │ Error in auth.$ loader Response {
17:13:02 │ remix │ size: 0,

3

Still blocking
And I would like double confirm the steps

Q1

https://shopify.dev/docs/apps/build/payments/credit-card/use-the-cli?framework=remix#what-you’ll-learn

It did not mention how to “**using the Remix template for credit card payments apps” in the steps below**

Q2

https://shopify.dev/docs/apps/build/payments/credit-card/use-the-cli?framework=remix#configure-your-payments-extension

I skipped this step,what should I do for a quick test?

Q3

https://shopify.dev/docs/apps/build/payments/credit-card/use-the-cli?framework=remix#configure-basic-app-settings

I get lost.

In shopify.app.toml**, → what does the dictionary to find it, I am assume it to be the clone of**

https://github.com/Shopify/example-app–credit-card-payments-app-template–remix , isn’t it?

Q3-1

… in the Partner Dashboard, I could not open the link, is it due to permission?

Q4

https://shopify.dev/docs/apps/build/payments/credit-card/use-the-cli?framework=remix#start-your-development-server

I jump to https://github.com/Shopify/example-app–credit-card-payments-app-template–remix and sync shopify.app.toml and extend from above step, is it correct?

Q5

I put encryption_certificate_fingerprint = “Test Certificate”

In extensions/credit-card/shopify.extension.toml to prevent error, is it correct?