React native navigator stripe - react-native

Question

i'm trying to navigate from once a user inputs their Credit card details and presses to the pay button, it takes them to another screen within my app. I've set the navigation path to a screen called products. However my payment function takes the payment via Stripe but doesn't navigate to the next screen.what am i doing wrong?
Here is my payment function
import React, { useState } from 'react'
import { Image, Text, TextInput, TouchableOpacity, View,ImageBackground } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import styles from './styles';
import stripe from 'tipsi-stripe';
import axios from 'axios'
stripe.setOptions({
publishableKey:
'pk_test_XXXXX'
})
export default function PaymentScreen({navigation}) {
const [ccNumber, setCCNumber] = useState('')
const [expDate, setExpDate] = useState('')
const [zipCode, setZipCode] = useState('')
const [cvv, setCvv] = useState('')
const [ loading, setLoading] = useState(false)
const [token, setToken] = useState(null)
const onPaymentPress = async () => {
if ( ccNumber && expDate && zipCode && cvv == null) {
alert("All fields must be completed")
return
};
const token = await stripe.paymentRequestWithCardForm({
smsAutofillDisabled: true,
requiredBillingAddressFields: 'full',
prefilledInformation: {
billingAddress: {
name: 'Gunilla Haugeh',
line1: 'Canary Place',
line2: '3',
city: 'Macon',
state: 'Georgia',
country: 'US',
postalCode: '31217',
email: 'ghaugeh0#printfriendly.com',
},
},
})
axios({
method:'POST',
url: 'https://us-central1-lvc2-73300.cloudfunctions.net/completePaymentWithStripe',
data: {
amount: 50000,
currency:'usd',
token: token
},
})
.then(response => {
console.log(response);
loading:false
})
navigation.navigate('Products',{token})
}
here is my on press function to activate the payment
<TouchableOpacity
style={styles.button}
onPress={() => onPaymentPress()}>
<Text style={styles.buttonTitle}>Submit Payment</Text>
</TouchableOpacity>
also i'm using firebase to store the data
Here is my database firebase backend
const stripe = require('stripe')('sk_test_XXXX)
exports.completePaymentWithStripe = functions.https.onRequest(
(request,response) => {
stripe.charges.create({
amount: request.body.amount,
currency: request.body.currency,
source: request.body.token.tokenId,
})
.then(charge => {
response.send(charge)
return null
})
.catch(error => {
console.log(error)
})
}
)