반응 네이티브 앱에 Stripe Payment를 추가하는 방법
등록
First, you have to create your account on the Stripe 대시보드.테스트 모드의 스트라이프 대시보드는 다음과 같습니다.
설치
For server-side installation, you can refer to this linkreact-native 측의 경우 터미널에서 이 명령을 실행하십시오.
yarn add @stripe/stripe-react-native
필요한 기본 종속성을 설치하려면
ios 폴더에서 이 명령을 실행합니다. Android는 추가 단계가 필요하지 않습니다.pod install
구성
Now wrap your <App/> in <StripeProvider> tag and pass your account publishable key to it. You can find this key in the Home tab on the Stripe dashboard.
import { StripeProvider } from '@stripe/stripe-react-native';
function App() {
return (
<StripeProvider
publishableKey="pk_test_TYooMQauvdEDq54NiTphI7jx"
urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
merchantIdentifier="merchant.com.{{YOUR_APP_NAME}}" // required for Apple Pay
>
// Your app code here
</StripeProvider>
);
}
카드 구성 요소
Stripe has multiple elements 중에서 선택하세요. 카드 요소를 선택합니다. 카드 세부 정보를 안전하게 수집하는 빌트인 UI 구성 요소입니다.import { CardField, useStripe } from '@stripe/stripe-react-native';
function PaymentScreen() {
// ...
return (
<View>
<CardField
postalCodeEnabled={false}
placeholder={{
number: '4242 4242 4242 4242',
}}
onCardChange={(cardDetails) => {
console.log('cardDetails', cardDetails);
}}
/>
</View>
);
}
onCardChange 콜백은 카드에 대한 민감하지 않은 정보를 반환합니다. 이 정보를 사용하여 결제 버튼을 활성화/비활성화하거나 오류 메시지를 표시할 수 있습니다.
결제 인덴트 생성
After this, we create a payment intent to collect payment from the user.But to create a Payment Intent we need an API because the server-side is saved as opposed to the client. Please follow these steps 결제 의도 API를 생성합니다.
이제 이 API에서 클라이언트 암호를 가져옵니다.
function PaymentScreen() {
const fetchPaymentIntentClientSecret = async () => {
const response = await fetch(`${API_URL}/create-payment-intent`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
currency: 'usd',
}),
});
const {clientSecret} = await response.json();
return clientSecret;
};
const handlePayPress = async () => {
if (!card) {
return;
}
// Fetch the intent client secret from the backend.
const clientSecret = await fetchPaymentIntentClientSecret();
};
return (
<View>
<CardField
onCardChange={(cardDetails) => console.log('cardDetails', cardDetails)}
/>
<Button onPress={handlePayPress} title="Pay" disabled={loading} />
</View>
);
}
지불 제출
Next, we'll send the client secret and user details to the confirmPayment method, which you can access with the useConfirmPayment hook.
const {confirmPayment, loading} = useConfirmPayment();
const handlePayPress = async () => {
// Gather the customer's billing information (for example, email)
const billingDetails: BillingDetails = {
email: '[email protected]',
};
// Fetch the intent client secret from the backend
const clientSecret = await fetchPaymentIntentClientSecret();
// Confirm the payment with the card details
const {paymentIntent, error} = await confirmPayment(clientSecret, {
type: 'Card',
billingDetails,
});
if (error) {
console.log('Payment confirmation error', error);
} else if (paymentIntent) {
console.log('Success from promise', paymentIntent);
}
};
After that, you can check the statuses of payments on the Stripe dashboard.
테스트 카드
There is a list 다양한 브랜드의 테스트 카드로 결제를 테스트할 수 있습니다.읽어 주셔서 감사합니다!
부담없이 접속하세요
Reference
이 문제에 관하여(반응 네이티브 앱에 Stripe Payment를 추가하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aneeqakhan/how-to-add-stripe-payment-in-react-native-app-24o8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
