내 전자상거래 웹사이트 애플리케이션에 Stripe 관련 문제가 있습니다.

Question

카드 정보를 가져오고 나중에 청구할 수 있도록 Stripe에 저장하기 위한 맞춤 구성 요소를 만들어야 합니다.

v3:1 포착되지 않음(약속 있음) IntegrationError: 지정된 요소에서 데이터를 검색할 수 없습니다.
사용하려는 요소가 여전히 마운트되어 있는지 확인하세요.
    ni에서(v3:1:319630)
    e._handleMessage(v3:1:324970)
    e._handleMessage(v3:1:146061)
    v3:1:322539

이 오류가 발생했습니다. 구성 요소가 마운트되었는지 확인했지만 이것이 Stripe의 작동 방식이기 때문에 항상 마운트됩니다. 모든 Stripe 구성 요소는 우리 응용 프로그램에 대해 서로 다른 설정에 있습니다. 추가 부하를 가져오지만, 그것은 또 다른 주제입니다.

이 오류를 제거해야 합니다.

stripe.checkout.sessions.create를 사용하는 경로가 있지만 내가 원하는 동작이 아닌 다른 탭으로 사용자를 리디렉션합니다. 동일한 앱에서 팝업을 선호하고 거기에서 카드 데이터를 가져와 저장합니다.

인덱스의 스트라이프 참조 전달(전역 액세스용)

"@stripe/react-stripe-js"에서 {Elements} 가져오기;;
"@stripe/stripe-js"에서 {loadStripe} 가져오기;;
const StripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);

...기타

const root = ReactDOM.createRoot(document.getElementById('root'));
루트.렌더(
    <React.StrictMode>
        <브라우저라우터>
            <공급업체 스토어={스토어}>
                <요소 스트라이프={stripePromise}>
                    <테마 제공자>
                        <앱/>
                    </테마 제공자>
                </요소>
            </공급자>
        </브라우저라우터>
    </React.StrictMode>
);

Stripe CardInput Wrapper(문서와 동일) 참고: 구성 요소를 중첩하기 전에 빈 프로젝트에서 이 코드를 시도했는데 완벽하게 작동했습니다.

'react'에서 React, {useState}를 가져옵니다.
'@stripe/react-stripe-js'에서 {CardElement}를 가져옵니다.
"@mui/material/styles"에서 {styled} 가져오기;
"@mui/material"에서 {Box, Stack, Typography}를 가져옵니다;;
"../../ezComponents/EzLoadingBtn/EzLoadingBtn"에서 EzLoadingBtn을 가져옵니다;;

const CARD_ELEMENT_OPTIONS = {
    스타일: {
        기본: {
            '색상': '#32325d',
            'fontFamily': '"Helvetica Neue", Helvetica, 산세리프',
            'fontSmoothing': '앤티앨리어싱됨',
            '글꼴 크기': '16px',
            '::자리 표시자': {
                색상: '#aab7c4',
            },
        },
        유효하지 않은: {
            색상: '#fa755a',
            아이콘색상: '#fa755a',
        },
    },
};

const RootStyle = styled(Stack)(({테마}) => ({
    너비: '400px',
    패딩: '50px 30px 30px 30px'
}))

기본 함수 내보내기 CardInput({onSubmit}) {
    const [loading, setLoading] = useState(false);
    반품 (
        <루트스타일>
            <상자 구성요소='form' onSubmit={onSubmit}>
                <Stack flexDirection='row' justifyContent='space-between' sx={{marginBottom: '25px'}}>
                    <타이포그래피 변형='span'>카드
                </스택>
                <CardElement 옵션={CARD_ELEMENT_OPTIONS}/>
                <EzLoadingBtn
                    sx={{marginTop: '25px'}}
                    color=“상속”
                    크기='대형'
                    유형='제출'
                    변형='개요'
                    로드={로드 중}
                >
                    카드 저장
                </EzLoadingBtn>
            </박스>
        </루트스타일>
    );
}

Answer 1

완료 - 문제는 제가 전체 앱을 "래핑"하는 것을 생각했었다는 것입니다

으아악

충분하지만 그렇지 않습니다. 핵심은 전체 애플리케이션을 요소로 래핑할 필요가 없고 특정 스트라이프 구성 요소(CardElement, PaymentElement 등)를 사용하는 하위 구성 요소만 래핑할 필요가 있다는 것입니다.

으아악

그러면 준비가 완료되었습니다.