How to fix a Firebase Cloud Functions Bad Request in React-Native? - firebase

Question

I'm fairly new to Firebase cloud functions and I've been trying to integrate Stripe into my RN project using FB but keep getting a bad request response. I'll see a few things when I try to run this:
Request is missing body.
Invalid request, unable to process.
Bad Request (400).
Does anyone know where I should go from here?
In my index.js file:
exports.payWithStripe = functions.https.onCall(async (data, response) => {
try {
const paymentIntent = await stripe.paymentIntents.create({
data: {
amount: 100,
currency: "usd",
payment_method_types: ["card"]
}
});
const clientSecret = paymentIntent.client_secret;
response.json({
clientSecret: clientSecret,
})
} catch (e) {
console.log(e.message);
response.json({ error: e.message });
}
})
On the app side:
const fetchPaymentIntentClientSecret = async () => {
const response = await fetch(`${FUNCTION_URL}/create-payment-intent`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
const { clientSecret, error } = await response.json();
return { clientSecret, error };
}

Answer 1

Your Cloud Function is a Callable Cloud Function, as we can see from the code: functions.https.onCall(). As explained in the doc "HTTPS callable functions are similar but not identical to HTTP functions"
You should call it from your app by using the specific methods of the JS SDK, as explained here.
It is possible to call it via fetch (or any other library used to make XMLHttpRequests from the browser) but then you need to follow the Protocol specification for https.onCall which is not straightforward. So it is highly recommended to use the SDK.