React Native Stripe Firebase - Test token working but test card undefined

Question

I am trying to send my charges to stripe through firebase cloud functions, when I send a test token such as "tok_mastercard" everything works fine. Once I substitute for my token created by tipsi stripe firebase shows all information sent as undefined. I have console logged my token in cloud functions and everything looks fine.

I feel like I am missing something obvious. Thanks in advance for any help.

FIREBASE CLOUD FUNCTION

const functions = require("firebase-functions");
const stripe = require("stripe")(MY SECRET KEY);

exports.payWithStripe = functions.https.onRequest(async (request, response) => {
  stripe.charges
    .create({
      amount: request.body.amount,
      currency: request.body.currency,
      source: request.body.token,
    })
    .then((charge) => response.send(charge))
    .catch((err) => {
      console.log(err);
    });
});

CONSOLE LOGGED TOKEN

{"card": {"addressCity": "Macon", "addressCountry": "Estonia", "addressLine1": "Canary Place", "addressLine2": "3", "addressState": "", "addressZip": "31217", "brand": "Visa", "cardId": "card_1HdFN7C7qEwniOSJWxN2Tbs6", "country": "US", "expMonth": 1, "expYear": 2022, "funding": "credit", "isApplePayCard": false, "last4": "4242", "name": "Enappd Store"}, "created": 1602940977, "livemode": false, "tokenId": "tok_1HdFN7C7qEwniOSJc1nUQcqH"}

GENERATE TOKEN WITH TIPSI STRIPE

  stripe.setOptions({
    publishableKey:"MY TEST KEY",});

  const [token, setToken] = useState(null);


  const handleCardPayPress = async () => {
    try {
      setLoading(true);
      setToken(null);
      const token = await stripe.paymentRequestWithCardForm({
        smsAutofillDisabled: true,
        requiredBillingAddressFields: "full",
        prefilledInformation: {
          billingAddress: {
            name: "Enappd Store",
            line1: "Canary Place",
            line2: "3",
            city: "Macon",
            state: "",
            country: "Estonia",
            postalCode: "31217",
            email: "admin@enappd.com",
          },
        },
      });
      setToken(token);
      console.log(token);
      setLoading(false);
      Alert.alert("Your card information has been entered!");
    } catch (error) {
      console.log(error);
      setLoading(false);
    }
  };

HANDLE CHECKOUT

    fetch("MY CLOUD FUNCTIONS URL", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        amount: cartTotalAmount,
        currency: "usd",
        token: token,
      }),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
      })
      .catch((error) => {
        console.error(error);
      });

FIREBASE LOG

9:43:09.377 AM
payWithStripe
statusCode: 400,
9:43:09.377 AM
payWithStripe
charge: undefined,
9:43:09.377 AM
payWithStripe
decline_code: undefined,
9:43:09.377 AM
payWithStripe
payment_intent: undefined,
9:43:09.377 AM
payWithStripe
payment_method: undefined,
9:43:09.377 AM
payWithStripe
setup_intent: undefined,
9:43:09.377 AM
payWithStripe
source: undefined }
9:44:08.752 AM
payWithStripe
Function execution took 60008 ms, finished with status: 'timeout'

Answer 1

The solution was to change:

setToken(token)

to

setToken(token.tokenId)