[英]How do you implement payments in React Native 0.70?
How do you implement payments in React Native 0.70.你如何在 React Native 0.70 中实现支付。 I worked with earlier React Native versions using react-native-credit-card-input and react-native-credit-card-input-plus that are now breaking.
我使用 react-native-credit-card-input 和 react-native-credit-card-input-plus 与早期的 React Native 版本一起工作,它们现在正在崩溃。
Now it very easy to implement the payment methods in react-native because stripe provide official doc .现在 react-native 中的支付方式很容易实现,因为 stripe 提供了官方文档。
They provide a built-in UI for checkout and Card Tokenisation , Here you can Follow Official Doc他们提供了一个用于结帐和卡令牌化的内置 UI,在这里你可以关注官方文档
1) Setup 1) 设置
install stripe official react-native sdk安装 stripe 官方 react-native sdk
yarn add @stripe/stripe-react-native
To initialise Stripe in your React Native app, either wrap your payment screen with the StripeProvider component, or use the initStripe initialisation method.要在您的 React Native 应用程序中初始化 Stripe,请使用 StripeProvider 组件包装您的支付屏幕,或使用 initStripe 初始化方法。
<StripeProvider publishableKey={PUBLISHABLE_KEY}>
<Navigation />
</StripeProvider>
How to get PUBLISHABLE_KEY如何获得 PUBLISHABLE_KEY
Now in your component现在在你的组件中
Either use the Stripe UI or create your own custom UI for getting card details.使用 Stripe UI 或创建您自己的自定义 UI 来获取卡片详细信息。 In this answer, I'm using rn-credit-card for getting a card, which gives me customization options.
在这个答案中,我使用rn-credit-card来获取一张卡,这为我提供了自定义选项。
2) Get Card details, create Card Token and save for future use 2) 获取卡的详细信息,创建卡令牌并保存以备将来使用
import CreditCardForm, { FormModel } from "rn-credit-card";
const handleConfirm = (model: FormModel) => {
axios
.post(
"https://api.stripe.com/v1/tokens",
{
"card[name]": model.holderName,
"card[number]": model.cardNumber,
"card[exp_month]": model.expiration.split("/")[0],
"card[exp_year]": model.expiration.split("/")[1],
"card[cvc]": model.cvv,
},
{
headers: {
Accept: "application/json",
"Content-Type": "application/x-www-form-urlencoded",
Authorization: `Bearer ${STRIPE_KEY}`,
},
}
)
.then((res) => {
if (res?.data?.id) {
//res?.data?.id It will return the payment method ID sent to your backend
// You can also save it for future use by saving it in the database.
console.log(res?.data?.id)
}
})
.catch((err) => {
Alert.alert("Stripe Error", err.message);
});
}; };
For setting defaultValues用于设置默认值
const formMethods = useForm<FormModel>({
mode: "onBlur",
defaultValues: {
holderName: "",
cardNumber: "",
expiration: "",
cvv: "",
},
});
const { handleSubmit, formState } = formMethods;
Form to get card details获取卡片详细信息的表格
<CreditCardForm
LottieView={LottieView}
horizontalStart={false}
overrides={{
labelText: {
marginTop: 16,
},
}}
/>
{formState.isValid && (
<Button
style={styles.button}
title={'CONFIRM PAYMENT'}
onPress={handleSubmit(handleConfirm)}
/>
)}
Now When you pay or checkout simple do the following step现在,当您付款或结帐时,只需执行以下步骤
3) Checkout or Payment Time 3)结帐或付款时间
import { useStripe } from "@stripe/stripe-react-native";
const { confirmPayment } = useStripe();
const handlePay = async () => {
setStripeLoading(true);
try {
//Step 1
const response = await createPaymentIntent({
variables: {
paymentMethodId: paymentMethodId, // That you stored on the backend
reserveId: id, // In our case reserveId is required
amountToDeduct: 23,
},
});
if (response) {
//Step 2 by getting clientSecret
const { clientSecret } = response?.createPaymentIntent;
//sending clientSecret to deduct amount
const { error, paymentIntent } = await confirmPayment(clientSecret);
if (error) {
setStripeLoading(false);
Alert.alert(`Error code: ${error.code}`, error.message);
}
if (paymentIntent) {
setStripeLoading(false);
// Show Success Alert
}
}
} catch (error) {
setStripeLoading(false);
} finally {
setStripeLoading(false);
}
};
Tada you done多田你完成了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.