你如何在 React Native 0.70 中实现支付？

Question

你如何在 React Native 0.70 中实现支付。 我使用 react-native-credit-card-input 和 react-native-credit-card-input-plus 与早期的 React Native 版本一起工作，它们现在正在崩溃。

Answer 1

现在 react-native 中的支付方式很容易实现，因为 stripe 提供了官方文档。

他们提供了一个用于结帐和卡令牌化的内置 UI，在这里你可以关注官方文档

1) 设置

安装 stripe 官方 react-native sdk

yarn add @stripe/stripe-react-native

要在您的 React Native 应用程序中初始化 Stripe，请使用 StripeProvider 组件包装您的支付屏幕，或使用 initStripe 初始化方法。

<StripeProvider publishableKey={PUBLISHABLE_KEY}>
    <Navigation />
 </StripeProvider>

如何获得 PUBLISHABLE_KEY

现在在你的组件中

使用 Stripe UI 或创建您自己的自定义 UI 来获取卡片详细信息。 在这个答案中，我使用rn-credit-card来获取一张卡，这为我提供了自定义选项。

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);
  });

};

用于设置默认值

const formMethods = useForm<FormModel>({
mode: "onBlur",
defaultValues: {
  holderName: "",
  cardNumber: "",
  expiration: "",
  cvv: "",
},
 });
const { handleSubmit, formState } = formMethods;

获取卡片详细信息的表格

<CreditCardForm
        LottieView={LottieView}
        horizontalStart={false}
        overrides={{
          labelText: {
            marginTop: 16,
          },
        }}
      />
    {formState.isValid && (
      <Button
        style={styles.button}
        title={'CONFIRM PAYMENT'}
        onPress={handleSubmit(handleConfirm)}
      />
    )}

现在，当您付款或结帐时，只需执行以下步骤

3）结帐或付款时间

1. 通过将 paymentMethods Id 与其他参数（如 reservationId 等）一起传递来创建 PaymentIntent
2. 后端将向您返回 clientSecret 以及计算出的账单
3. 将 clientSecret 发送到 stripe

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);
}
};

多田你完成了