import React , { useState } from 'react' ; import { GooglePayButton , useGooglePay } from '@stripe/stripe-react-native' ; import PaymentScreen from '../components/PaymentScreen' ; import { API_URL } from '../Config' ; import { Alert , StyleSheet , View } from 'react-native' ; export default function GooglePayScreen ( ) { const { initGooglePay , presentGooglePay , loading , createGooglePayPaymentMethod , } = useGooglePay ( ) ; const [ initialized , setInitialized ] = useState ( false ) ; const fetchPaymentIntentClientSecret = async ( ) => { const response = await fetch ( `${ API_URL }/create-payment-intent` , { method : 'POST' , headers : { 'Content-Type' : 'application/json' , } , body : JSON . stringify ( { currency : 'usd' , items : [ { id : 'id' } ] , force3dSecure : true , } ) , } ) ; const { clientSecret } = await response . json ( ) ; return clientSecret ; } ; const pay = async ( ) => { const clientSecret = await fetchPaymentIntentClientSecret ( ) ; const { error } = await presentGooglePay ( { clientSecret , forSetupIntent : false , } ) ; if ( error ) { Alert . alert ( error . code , error . message ) ; return ; } Alert . alert ( 'Success' , 'The payment was confirmed successfully.' ) ; setInitialized ( false ) ; } ; const createPaymentMethod = async ( ) => { const { error , paymentMethod } = await createGooglePayPaymentMethod ( { amount : 12 , currencyCode : 'USD' , } ) ; if ( error ) { Alert . alert ( error . code , error . message ) ; return ; } else if ( paymentMethod ) { Alert . alert ( 'Success' , `The payment method was created successfully. paymentMethodId: ${ paymentMethod . id }` ) ; } setInitialized ( false ) ; } ; const initialize = async ( ) => { const { error } = await initGooglePay ( { testEnv : true , merchantName : 'Test' , countryCode : 'US' , billingAddressConfig : { format : 'FULL' , isPhoneNumberRequired : true , isRequired : false , } , existingPaymentMethodRequired : false , isEmailRequired : true , } ) ; if ( error ) { Alert . alert ( error . code , error . message ) ; return ; } setInitialized ( true ) ; } ; return ( < PaymentScreen onInit = { initialize } > < GooglePayButton disabled = { ! initialized || loading } style = { styles . payButton } type = "pay" onPress = { pay } / > < View style = { styles . row } > < GooglePayButton disabled = { ! initialized || loading } style = { styles . standardButton } type = "standard" onPress = { createPaymentMethod } / > < /View> < /PaymentScreen>); } const styles = StyleSheet . create ( { row : { marginTop : 30 , } , payButton : { width : 152 , height : 40 , } , standardButton : { width : 90 , height : 40 , } , } ) ;