Failed to author payment extension remix code

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

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,

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?