现在它很容易实现的react-native支付方法，因为stripe提供官方的doc.
它们提供了用于结帐和卡令牌化的内置UI，Here you can Follow Official Doc

1）设置

安装Stripe官方React-本机SDK

yarn add @stripe/stripe-react-native

要在React Native应用中初始化Stripe，请使用StripeProvider组件 Package 支付屏幕，或使用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.通过传递带有其他参数（如reservationId等）的paymentMethods Id来创建PaymentIntent
1.后端将返回您的clientSecret和计算的账单
1.将clientSecret发送到条带

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

多田你做了🥰