import React , { useState } from 'react' ; import { Alert } from 'react-native' ; import { useStripe , PaymentSheet , PaymentSheetError , } from '@stripe/stripe-react-native' ; import Button from '../components/Button' ; import PaymentScreen from '../components/PaymentScreen' ; import { API_URL } from '../Config' ; export default function PaymentsUICompleteScreen ( ) { const { initPaymentSheet , presentPaymentSheet } = useStripe ( ) ; const [ paymentSheetEnabled , setPaymentSheetEnabled ] = useState ( false ) ; const [ loading , setLoadng ] = useState ( false ) ; const [ clientSecret , setClientSecret ] = useState < string > ( ) ; const fetchPaymentSheetParams = async ( ) => { const response = await fetch ( `${ API_URL }/payment-sheet` , { method : 'POST' , headers : { 'Content-Type' : 'application/json' , } , } ) ; const { paymentIntent , ephemeralKey , customer } = await response . json ( ) ; setClientSecret ( paymentIntent ) ; return { paymentIntent , ephemeralKey , customer , } ; } ; const openPaymentSheet = async ( ) => { if ( ! clientSecret ) { return ; } setLoadng ( true ) ; const { error } = await presentPaymentSheet ( ) ; if ( ! error ) { Alert . alert ( 'Success' , 'The payment was confirmed successfully' ) ; } else if ( error . code === PaymentSheetError . Failed ) { Alert . alert ( `PaymentSheet present failed with error code: ${ error . code }` , error . message ) ; } else if ( error . code === PaymentSheetError . Canceled ) { Alert . alert ( `PaymentSheet present was canceled with code: ${ error . code }` , error . message ) ; } setPaymentSheetEnabled ( false ) ; setLoadng ( false ) ; } ; const initialisePaymentSheet = async ( ) => { const { paymentIntent , ephemeralKey , customer } = await fetchPaymentSheetParams ( ) ; const address = { city : 'San Francisco' , country : 'AT' , line1 : '510 Townsend St.' , line2 : '123 Street' , postalCode : '94102' , state : 'California' , } ; const billingDetails = { name : 'Jane Doe' , email : 'foo@bar.com' , phone : '555-555-555' , address : address , } ; const { error } = await initPaymentSheet ( { customerId : customer , customerEphemeralKeySecret : ephemeralKey , paymentIntentClientSecret : paymentIntent , customFlow : false , merchantDisplayName : 'Example Inc.' , applePay : true , merchantCountryCode : 'US' , style : 'automatic' , googlePay : true , testEnv : true , primaryButtonColor : '#635BFF' , returnURL : 'stripe-example://stripe-redirect' , defaultBillingDetails : billingDetails , allowsDelayedPaymentMethods : true , } ) ; if ( ! error ) { setPaymentSheetEnabled ( true ) ; } else if ( error . code === PaymentSheetError . Failed ) { Alert . alert ( `PaymentSheet init failed with error code: ${ error . code }` , error . message ) ; } else if ( error . code === PaymentSheetError . Canceled ) { Alert . alert ( `PaymentSheet init was canceled with code: ${ error . code }` , error . message ) ; } } ; return ( < PaymentScreen onInit = { initialisePaymentSheet } > < Button variant = "primary" loading = { loading } disabled = { ! paymentSheetEnabled } title = "Checkout" onPress = { openPaymentSheet } / > < /PaymentScreen>); }