내 전자상거래 웹사이트 애플리케이션에 Stripe 관련 문제가 있습니다.
<p>카드 정보를 가져오고 나중에 청구할 수 있도록 Stripe에 저장하기 위한 맞춤 구성 요소를 만들어야 합니다. </p>
<pre class="brush:php;toolbar:false;">v3:1 포착되지 않음(약속 있음) IntegrationError: 지정된 요소에서 데이터를 검색할 수 없습니다.
사용하려는 요소가 여전히 마운트되어 있는지 확인하세요.
ni에서(v3:1:319630)
e._handleMessage(v3:1:324970)
e._handleMessage(v3:1:146061)
v3:1:322539</pre>
<p>이 오류가 발생했습니다. 구성 요소가 마운트되었는지 확인했지만 이것이 Stripe의 작동 방식이기 때문에 항상 마운트됩니다. 모든 Stripe 구성 요소는 우리 응용 프로그램에 대해 서로 다른 설정에 있습니다. 추가 부하를 가져오지만, 그것은 또 다른 주제입니다. </p>
<p>이 오류를 제거해야 합니다. </p>
<p>stripe.checkout.sessions.create를 사용하는 경로가 있지만 내가 원하는 동작이 아닌 다른 탭으로 사용자를 리디렉션합니다. 동일한 앱에서 팝업을 선호하고 거기에서 카드 데이터를 가져와 저장합니다. </p>
<p>인덱스의 스트라이프 참조 전달(전역 액세스용)</p>
<pre class="brush:php;toolbar:false;">"@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>
);</pre>
<p>Stripe CardInput Wrapper(문서와 동일)
참고: 구성 요소를 중첩하기 전에 빈 프로젝트에서 이 코드를 시도했는데 완벽하게 작동했습니다.</p>
<pre class="brush:php;toolbar:false;">'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>
</박스>
</루트스타일>
);
}</pre></p>
