Stripe 를 통해 Apple pay 세팅 - 애플페이 탭 노출 안됨, 테스트 키로 결제시 session 생성 불가 에러

 

세팅한 내용

 

[스트라이프 대시보드]

1. card 활성화

2. Apple pay 활성화

3. Payment domain 등록 

- 로컬 호스트 같은건 안됨, https 로 제공하는 도메인이어야 함,

- dev 서버가 https 로 돌고있어서, dev 도메인을 등록하였음

- verify 를 받기 위해선 아래 프론트에서 추가 작업이 필요함

 

 

[프론트 작업]

1. 스트라이프가 제공하는 도메인 인증용 파일을 다운로드 (참고)

2. Next.js 기준 /public/.well-known/apple-developer-merchantid-domain-association  파일 생성

3. 다운받은 도메인 인증용 파일 내용 붙여넣기

4. 미들웨어 설정에서 .well-known 으로 시작하는 라우팅은 미들웨어 로직 타지 않도록 설정

- middleware.ts

export const config = {
  // Matcher ignoring `/_next/` and `/api/`
  matcher: [
    "/", // Required when i18n is enabled, otherwise middleware won't be executed on index route
    "/((?!api/|google/|_next/|_static/|auth|_vercel|.well-known|fonts|icons|images/|[\\w-]+\\.\\w+).*)",
  ],
};

 

5. local-domain.com/.well-known/apple-developer-merchantid-domain-association 링크로 접근했을때, 해당 파일이 다운로드 됨

6. 다운로드 되지 않고, plain/text 로 제공하기 위해서 next.config.js 세팅

const nextConfig = {
  async headers() {
    return [
      {
        source: "/.well-known/apple-developer-merchantid-domain-association",
        headers: [
          {
            key: "Content-Type",
            value: "text/plain",
          },
        ],
      },
    ];
  },
  ...
}

 

 

7. dev 서버 배포

8. https://dev-mydomain.com/.well-known/apple-developer-merchantid-domain-association 로 접근시 텍스트 제공

 

 

[백엔드 설정]

* 사실 이 세팅을 왜 해줘야하는지 모르겠음..

* 백엔드에서 테스트를 직접 충분히 해볼 수 없어서 그냥 세팅 되어있는 대로 기재한다

 

1. intent 를 생성하는 로직에서 domain 을 등록 (참고)

// 백엔드 코드 로직
createPaymentIntent

1. customer create
2. setDomainName('https://dev-mydomain.com').build()
3. domain dreate
4. domain retrieve
5. domain setEnabled(true).build()
6. domain update

 

 

 

[기대값]

- 스트라이프가 알아서 판단해서 유저가 apple pay 사용 가능한 상태면 apple pay 를 노출 시켜준다고 한다.

- <PaymentElement> 내부 apple pay 탭 노출 됨

 

 

[문제상황]

1. apple pay 노출 안됨 

2. 1번을 해결하여 결제로 넘어갔을때 apple session 생성에서 에러 발생

{
  "error": {
    "message": "Could not create Apple Pay session. Please make sure you have registered this Stripe account. For more information, see https://stripe.com/docs/apple-pay#web.",
    "type": "invalid_request_error"
  }
}

 

 

[구글링...]

1. safari 개인정보보호 모드에서는 노출되고, 일반 모드에서는 애플페이 탭이 노출 안되었음.

- 비슷한 내용들의 질문글들이 있음.

- 사파리 세팅 값을 변경하니 (Check Apple Pay 를 disable 처리) 일반 모드에서도 애플페이 탭이 노출되었다

- 근데 애플페이 세팅이 잘 되어있는 사람한테도 Check Apple Pay 켜져있으면 애플페이 탭이 안 보이는게 이상하네(?)

 

https://github.com/woocommerce/woocommerce-gateway-stripe/issues/1548

Safari "Allow websites to check for Apple Pay" setting have to be disabled in order Apple Pay button appears. · Issue #1548 ·

 

https://wordpress.org/support/topic/apple-pay-not-displaying-when-safari-set-to-show/

Apple Pay not displaying when Safari set to show

 

https://support.apple.com/en-al/guide/safari/ibrw1075/mac

Change Advanced settings in Safari on Mac

 

[테스트 했던 세팅값들]

사파리 설정 켜짐 + 테스트 카드 애플페이 등록 : 일반 X, 시크릿 O

사파리 설정 켜짐 + 애플페이 없음 : 일반 X, 시크릿 O

사파리 설정 꺼짐 + 애플페이 없음 : 일반 O

 

 

2. apple session 생성에서 에러

사파리 세팅을 변경한 뒤 애플페이 탭이 잘 노출되고, 애플페이를 선택해서 결제로 넘어가면 session 을 생성하는 부분에서 에러가 발생한다.

 

URL: https://api.stripe.com/v1/apple_pay/session

status : 400

{
  "error": {
    "message": "Could not create Apple Pay session. Please make sure you have registered this Stripe account. For more information, see https://stripe.com/docs/apple-pay#web.",
    "type": "invalid_request_error"
  }
}

 

도메인도 등록하고 다 했는데, 왜 register 하라는 건가.. 도메인 관련된 에러가 맞는가..

비슷한 에러가 스택오버 플로우에 있는데, 명쾌한 답은 없고, 테스트 키라서 그런가 해서 라이브 키로 테스트 해보았다.

https://stackoverflow.com/questions/70809397/stripe-connect-enable-apple-pay

Stripe Connect – enable Apple Pay?

 

라이브 키로 바꿔서 테스트 하니까.. 잘 됨

 

(머지?)

 

 

[(번외) 애플페이 테스트]

애플 테스트 카드 추가 방법

https://developer.apple.com/apple-pay/sandbox-testing/

Sandbox Testing - Apple Pay

 

1. 애플 개발자 센터에서 샌드박스 테스팅 계정 추가

2. 맥북 애플 id 테스트 계정으로 변경

3. 지갑에서 테스트 카드 등록

4. https dev 서버에서 스트라이프 라이브 키로 바꾸고 테스트 카드로 결제 진행하면, live 모드에서 왜 테스트 카드 쓰냐고 에러남