React Native 使用 stripe支付

集成项目

        首先安装 `@stripe/stripe-react-native`模块，详细配置请见官网。

 初始化

// initPayemntScreens.tsx

// 初始化支付
useEffect(() => {
    async function initialize() {
      if (payKey) {
        await initStripe({
          publishableKey: payKey,
          merchantIdentifier: 'merchant.stripe.react.native',
          urlScheme: 'wechat_pay',
          setUrlSchemeOnAndroid: true,
        })
      }
    }
    initialize();
}, [payKey])

return (
    <SafeAreaView style={styles.paymentContainer}>
      <View style={styles.paymentTopContainer}>
        <Text style={styles.orderPrice}>{I18n.t('total_order_price')}</Text>
        <Text style={styles.orderPriceNum}>RMB￥{orderOrgData.roomTotal}</Text>
      </View>
      {children}
    </SafeAreaView>
)

使用

// 省略非关键代码
import {
  CardField,
  CardFieldInput,
  useConfirmPayment,
  PaymentMethodCreateParams,
} from '@stripe/stripe-react-native'
import PayMentScreens from './paymentScreen'

const PayementScreen = () => {

  const billingDetails: PaymentMethodCreateParams.BillingDetails = {
        email: orderOrgData.email,
        // phone: '+48888000888',
        // addressCity: 'Houston',
        // addressCountry: 'US',
        // addressLine1: '1459  Circle Drive',
        // addressLine2: 'Texas',
        // addressPostalCode: '77063',
  }

   
 // 支付方法
  const handlePayPress = async () => {
    // 支付意向 clientSecret
    const { error, paymentIntent } = await confirmPayment(clientSecret, {
      type: 'Card',
      billingDetails,
      setupFutureUsage: 'OffSession'
    })
    if (error) {
      console.log('支付失败 ErrorCode', error.code, error.message)
    } else if (paymentIntent) {
      console.log('支付成功', paymentIntent.currency, paymentIntent)
      //NavigatorUtils.navigation(props.navigation, 'guestInformation')
    }
  }

  return(
    <PayMentScreens>
      <CardField
        postalCodeEnabled={false}
        autofocus
        placeholder={{
          number: '4242 4242 4242 4242',
          postalCode: '12345',
          cvc: 'CVC',
          expiration: 'MM|YY',
        }}
        cardStyle={inputStyles}
        style={{
          width: width,
          height: px2dp(30),
          marginVertical: px2dp(15),
        }}
        onCardChange={(cardDetails: any) => {
          console.log('==>>', cardDetails)
          setCard(cardDetails);
        }}
        onFocus={(focusedField) => {
          console.log('focusField', focusedField);
        }}
      />
      <TouchableOpacity onPress={handlePayPress} activeOpacity={1} style={styles.paymentBtn}>
        <Text style={styles.paymentBtnText}>{I18n.t('confirm_payment')}</Text>
        <Image style={styles.seleIcon} source={require('../../assets/arrow.png')} />
      </TouchableOpacity>
    </PayMentScreens>
  )

}

文档详情