Stipe, React Native, [Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "Error"]
Stipe, React Native, [Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "Error"]
我正在使用 Expo、Firebase Cloud Function 和 Stripe 开发应用程序,出于某种原因,我第一次导航到屏幕时 CardPayment
代码 returns 错误:[Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "Error"]
,但如果我刷新屏幕,代码运行完美。任何人都知道为什么以及如何解决它?我尝试了很多东西,甚至使用了 axios,但似乎没有任何效果。
后端
exports.addCardForExistingCustomer = functions.https.onRequest(async (req, res) => {
const ephemeralKey = await stripe.ephemeralKeys.create(
{customer: `${req.query.customer}`},
{apiVersion: '2020-08-27'}
);
const setupIntent = await stripe.setupIntents.create({
customer: `${req.query.customer}`
});
const paymentMethods = await stripe.paymentMethods.list({
customer: `${req.query.customer}`,
type: 'card',
});
res.json({
setupIntent: setupIntent.client_secret,
ephemeralKey: ephemeralKey.secret,
customer: `${req.query.customer}`,
paymentMethods: paymentMethods,
})
});
前端
export default function CardPayment() {
const { initPaymentSheet, presentPaymentSheet } = useStripe();
const [loading, setLoading] = useState(false);
const [customerId, setCustomerId] = useState('');
const fetchPaymentSheetParams = async () => {
const response = await fetch(`https://<<path>>.cloudfunctions.net/addCardForExistingCustomer?customer=${customerId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
const { setupIntent, ephemeralKey, customer } = await response.json();
return {
setupIntent,
ephemeralKey,
customer,
};
};
const initializePaymentSheet = async () => {
const {
setupIntent,
ephemeralKey,
customer,
} = await fetchPaymentSheetParams();
console.log(setupIntent)
const { error } = await initPaymentSheet({
customerId: customer,
customerEphemeralKeySecret: ephemeralKey,
setupIntentClientSecret: setupIntent,
});
if (!error) {
setLoading(true);
} else {
console.log(error)
}
};
const openPaymentSheet = async () => {
const { error } = await presentPaymentSheet();
if (!error) {
Alert.alert('Success', 'Your payment method is successfully set up for future payments!');
}
};
const fetchCustomer = async () => {
const fetchInformation = doc(db, 'clients', 'user', 'Information', auth.currentUser.uid)
await getDoc(fetchInformation)
.then((snapshot) => {
const stripeId = snapshot.data().stripeCustomerId
setCustomerId(stripeId)
initializePaymentSheet();
})
}
useEffect(() => {
fetchCustomer()
}, []);
if (loading == false) {
return (
<View>
<ActivityIndicator/>
</View>
)
} else {
return (
<View>
<CustomButton
buttonTxt={'Add Credit/Debit Card'}
txtColor={'white'}
backgroundColor={'black'}
onPress={openPaymentSheet}
/>
</View>
)
}
}
前端的 fetchCustomer
没有等待 getDoc
承诺链完成。尝试在调用 getDoc
之前放置 return
或 await
。如果使用 return
,发布的 fetchCustomer
不需要是 async
函数。
如果这解决了错误,我的猜测是某种响应缓存允许 getDoc(fetchInformation)
的 then
处理程序赢得在 promise 作业处理中设置的竞争条件(在微任务队列)当页面重新加载时。
getDoc
调用处理程序 (async (snapshot) => {...}
) 在 initializePaymentSheet();
调用之前缺少 await
运算符。如果 initializePaymentSheet
延迟,这可能会在微任务队列中再次设置不可预测的竞争条件。
我正在使用 Expo、Firebase Cloud Function 和 Stripe 开发应用程序,出于某种原因,我第一次导航到屏幕时 CardPayment
代码 returns 错误:[Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "Error"]
,但如果我刷新屏幕,代码运行完美。任何人都知道为什么以及如何解决它?我尝试了很多东西,甚至使用了 axios,但似乎没有任何效果。
后端
exports.addCardForExistingCustomer = functions.https.onRequest(async (req, res) => {
const ephemeralKey = await stripe.ephemeralKeys.create(
{customer: `${req.query.customer}`},
{apiVersion: '2020-08-27'}
);
const setupIntent = await stripe.setupIntents.create({
customer: `${req.query.customer}`
});
const paymentMethods = await stripe.paymentMethods.list({
customer: `${req.query.customer}`,
type: 'card',
});
res.json({
setupIntent: setupIntent.client_secret,
ephemeralKey: ephemeralKey.secret,
customer: `${req.query.customer}`,
paymentMethods: paymentMethods,
})
});
前端
export default function CardPayment() {
const { initPaymentSheet, presentPaymentSheet } = useStripe();
const [loading, setLoading] = useState(false);
const [customerId, setCustomerId] = useState('');
const fetchPaymentSheetParams = async () => {
const response = await fetch(`https://<<path>>.cloudfunctions.net/addCardForExistingCustomer?customer=${customerId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
const { setupIntent, ephemeralKey, customer } = await response.json();
return {
setupIntent,
ephemeralKey,
customer,
};
};
const initializePaymentSheet = async () => {
const {
setupIntent,
ephemeralKey,
customer,
} = await fetchPaymentSheetParams();
console.log(setupIntent)
const { error } = await initPaymentSheet({
customerId: customer,
customerEphemeralKeySecret: ephemeralKey,
setupIntentClientSecret: setupIntent,
});
if (!error) {
setLoading(true);
} else {
console.log(error)
}
};
const openPaymentSheet = async () => {
const { error } = await presentPaymentSheet();
if (!error) {
Alert.alert('Success', 'Your payment method is successfully set up for future payments!');
}
};
const fetchCustomer = async () => {
const fetchInformation = doc(db, 'clients', 'user', 'Information', auth.currentUser.uid)
await getDoc(fetchInformation)
.then((snapshot) => {
const stripeId = snapshot.data().stripeCustomerId
setCustomerId(stripeId)
initializePaymentSheet();
})
}
useEffect(() => {
fetchCustomer()
}, []);
if (loading == false) {
return (
<View>
<ActivityIndicator/>
</View>
)
} else {
return (
<View>
<CustomButton
buttonTxt={'Add Credit/Debit Card'}
txtColor={'white'}
backgroundColor={'black'}
onPress={openPaymentSheet}
/>
</View>
)
}
}
fetchCustomer
没有等待 getDoc
承诺链完成。尝试在调用 getDoc
之前放置 return
或 await
。如果使用 return
,发布的 fetchCustomer
不需要是 async
函数。
如果这解决了错误,我的猜测是某种响应缓存允许 getDoc(fetchInformation)
的 then
处理程序赢得在 promise 作业处理中设置的竞争条件(在微任务队列)当页面重新加载时。
getDoc
调用处理程序 (async (snapshot) => {...}
) 在 initializePaymentSheet();
调用之前缺少 await
运算符。如果 initializePaymentSheet
延迟,这可能会在微任务队列中再次设置不可预测的竞争条件。