集成项目
首先安装 `@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>
)
}
文档详情
更多推荐
React Native 使用 stripe支付
发布评论