- 스트라이프가 알아서 판단해서 유저가 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"
}
}
{
"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 하라는 건가.. 도메인 관련된 에러가 맞는가..
비슷한 에러가 스택오버 플로우에 있는데, 명쾌한 답은 없고, 테스트 키라서 그런가 해서 라이브 키로 테스트 해보았다.
/**
* For a detailed explanation regarding each configuration property, visit:
* https://jestjs.io/docs/configuration
*/
import type { Config } from "jest";
import nextJest from "next/jest.js";
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: "./",
});
const config: Config = {
// Automatically clear mock calls, instances, contexts and results before every test
clearMocks: true,
// An array of file extensions your modules use
moduleFileExtensions: ["js", "mjs", "cjs", "jsx", "ts", "tsx", "json", "node"],
// A preset that is used as a base for Jest's configuration
preset: "ts-jest",
// The test environment that will be used for testing
testEnvironment: "jsdom",
};
export default createJestConfig(config);
import { cleanup, fireEvent, render } from "@testing-library/react";
import CheckboxWithLabel from "@/components/ui/CheckboxWithLabel";
// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
// unmount and cleanup DOM after the test is finished.
afterEach(cleanup);
it("CheckboxWithLabel changes the text after click", () => {
const { queryByLabelText, getByLabelText } = render(<CheckboxWithLabel labelOn="On" labelOff="Off" />);
expect(queryByLabelText(/off/i)).toBeTruthy();
fireEvent.click(getByLabelText(/off/i));
expect(queryByLabelText(/on/i)).toBeTruthy();
});
근데, 코드상에 차이점이 없어서 뭐지 삽질하면서 서버를 내렸다 올렸다, 브라우저를 리프레쉬했다 이랬다 저랬다 하는데, 이번에는 http 브라우저세션이 fast refresh 안됨
행동패턴을 살펴보니, 처음 서버를 올리고 건드린 브라우저에서는 fast refresh 가 되고, 다른건 안됨
=> Next.js 는 최초 사용되는 웹소켓 서버와 바인딩 함
Single WebSocket Connection for HMR:
Next.js uses WebSocket connections for HMR to update the browser with changes in real-time.
Typically, the WebSocket server binds to a single address and port, usually the same as your HTTP server (e.g., http://localhost:3000).
When you run npm run dev, Next.js binds its WebSocket server for HMR to the address used first. If you refresh http://localhost:3000 first, the HMR WebSocket connection will be bound to the HTTP server.
Conversely, if you refresh https://localhost:3001 first after starting the server, the HMR WebSocket connection will be bound to the HTTPS server.
Access to fetch at 'https://accounts.kakao.com/login?continue=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A3000%252Flogin%26through_account%3Dtrue%26client_id%3Dff30835bba2350bfe5fcf200c1eb4891' (redirected from 'https://kauth.kakao.com/oauth/authorize?client_id=ff30835bba2350bfe5fcf200c1eb4891&redirect_uri=http://localhost:3000/login&response_type=code') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
로그인 요청 보낼 때 fetch 나 axios, ajax 비동기 요청함수로 보내면 CORS 에러난다
<a>, <Link> 로 리다이렉트 시켜야함
코드 요청부터 백엔드에서 다 한다고 해도, 백엔드로 요청하는 것부터 리다이렉트로 요청해야함
첫 시작은 url 로 get 요청
"use client";
import Link from "../../../node_modules/next/link";
export default function KakaoLoginButton() {
return (
<Link
href={"http://localhost:5500/members/signin/kakao"}
style={{ color: "black", backgroundColor: "yellow", padding: "10px" }}
>
카카오 로그인
</Link>
);
}
