条纹支付集成React Native.调用presentPaymentSheet函数会导致应用程序崩溃

Question

我正在使用React Native和Django作为后端构建一个电子商务应用程序。支付集成是与Stripe建立的。以下代码行来自Django视图，其目的是创建客户、临时密钥和支付意图，并返回完成事务所需的特定值…

@api_view(['POST'])
@authentication_classes([TokenAuthentication])
@permission_classes([IsAuthenticated])
def payment_sheet(request, *args, **kwargs):
data = request.data
subtotal = data['subtotal']
customer = stripe.Customer.create()
ephemeralKey = stripe.EphemeralKey.create(
customer=customer['id'],
stripe_version='2020-08-27'
)
paymentIntent = stripe.PaymentIntent.create(
amount=int(subtotal),
currency='eur',
customer=customer['id'],
)
return JsonResponse({
'paymentIntent': paymentIntent.client_secret,
'ephemeralKey': ephemeralKey.secret,
'customer': customer.id
})

我的屏幕是在StripeProvider作为文档指南。

const MainFlow = ({ }) => {
return (
<ShoppingProvider>
<StripeProvider
publishableKey="pk_test_Dt4ZBItXSZT1EzmOd8yCxonL"
>
<OrderItemProvider>
<MainFlowStack.Navigator>
<MainFlowStack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
<MainFlowStack.Screen name="Cart" component={CartScreen} options={{ headerShown: false }} />
<MainFlowStack.Screen name="Favourite" component={FavouriteScreen} options={{ headerShown: false }} />
<MainFlowStack.Screen name="Search" component={SearchScreen} options={{ headerShown: false }} />
<MainFlowStack.Screen name="Detail" component={DetailScreen} options={{ headerShown: false }} />
<MainFlowStack.Screen name="Checkout" component={CheckoutScreen} options={{ headerShown: false }} />
</MainFlowStack.Navigator>
</OrderItemProvider>
</StripeProvider>
</ShoppingProvider>
)

另一方面，这里是我的结帐屏幕从我的React Native项目的代码。

const CheckoutScreen = ({ route }) => {
const { token } = useUserInfo()
const { initPaymentSheet, presentPaymentSheet } = useStripe();
const [clientSecret, setClientSecret] = useState('')
const [loading, setLoading] = useState(false);
const subtotal = route.params.subtotal
const fetchPaymentSheetData = (token, subtotal) => {
const total = (subtotal * 100).toString()
const data = { "subtotal": total }
return fetch(`${API}/api/payment/payment-sheet/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Token ${token}`
},
body: JSON.stringify(data)
})
.then((res) => {
return res.json()
})
.catch((err) => console.log(err))
}
const initializePaymentSheet = (token, subtotal) => {
fetchPaymentSheetData(token, subtotal)
.then((res) => {
setClientSecret(res.paymentIntent)
initPaymentSheet({
customerId: res.customer,
customerEphemeralKeySecret: res.ephemeralKey,
paymentIntentClientSecret: res.paymentIntent,
})
.then((res) => {
console.log(res)
setLoading(true)
})
.catch((err) => console.log(err))
})
.catch((err) => console.log(err))
// const { error } = await initPaymentSheet({
//     customerId: paymentInfo.customer,
//     customerEphemeralKeySecret: paymentInfo.ephemeralKey,
//     paymentIntentClientSecret: paymentInfo.paymentIntent,
// })
// if (!error) {
//     setLoading(true)
// }
}
const openPaymentSheet = async () => {
const { error } = await presentPaymentSheet({ clientSecret });
if (error) {
Alert.alert(`Error code: ${error.code}`, error.message);
} else {
Alert.alert('Success', 'Your order is confirmed!');
}
};
useEffect(() => {
initializePaymentSheet(token, subtotal)
}, [])
return (
<View style={style.root}>
<Navbar />
<Text>{subtotal}</Text>
<Button
variant="primary"
disabled={!loading}
title="Checkout"
onPress={openPaymentSheet}
/>
</View>
);

}

initPaymentSheet承诺没有被拒绝，'Checkout'按钮现在可用。问题来了，当按钮被按下，因此在'openPaymentSheet'函数中，presentPaymentSheet被调用…这将导致应用程序崩溃。谁能指出一个错误或告诉为什么这个错误发生?

Thanks in advance

Answer 1

我陷入了同样的问题，对我来说，这个问题是通过在initPaymentSheet时提供一些额外的信息来解决的。

const {error} = await initPaymentSheet({
customerEphemeralKeySecret: ephemeralKey,
setupIntentClientSecret: setupIntent,
customerId: customer,
customFlow: false,
merchantDisplayName: 'Test Inc.',
style: 'alwaysDark',
});

包版本:

"@stripe/stripe-react-native": "^0.13.1",
"react-native": "^0.68.2",

我遵循下面的文档来实现条纹

https://stripe.com/docs/payments/save-and-reuse