import React , { useState } from 'react' ; import { Alert , Image , StyleSheet , Text , View } from 'react-native' ; import { useStripe , PaymentSheet } from '@stripe/stripe-react-native' ; import { colors } from '../colors' ; import Button from '../components/Button' ; import PaymentScreen from '../components/PaymentScreen' ; import { API_URL } from '../Config' ; export default function PaymentsUICustomScreen ( ) { const { initPaymentSheet , presentPaymentSheet , confirmPaymentSheetPayment } = useStripe ( ) ; const [ paymentSheetEnabled , setPaymentSheetEnabled ] = useState ( false ) ; const [ loading , setLoading ] = useState ( false ) ; const [ paymentMethod , setPaymentMethod ] = useState < { image : string ; label : string ; } | null > ( null ) ; 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 ( ) ; return { paymentIntent , ephemeralKey , customer , } ; } ; const initialisePaymentSheet = async ( ) => { setLoading ( true ) ; try { 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 , paymentOption } = await initPaymentSheet ( { customerId : customer , customerEphemeralKeySecret : ephemeralKey , paymentIntentClientSecret : paymentIntent , customFlow : true , merchantDisplayName : 'Example Inc.' , applePay : true , merchantCountryCode : 'US' , style : 'automatic' , googlePay : true , testEnv : true , primaryButtonColor : '#635BFF' , returnURL : 'stripe-example://stripe-redirect' , defaultBillingDetails : billingDetails , } ) ; if ( ! error ) { setPaymentSheetEnabled ( true ) ; } else { Alert . alert ( `Error code: ${ error . code }` , error . message ) ; } if ( paymentOption ) { setPaymentMethod ( paymentOption ) ; } } catch ( error ) { console . log ( 'error' , error ) ; } finally { setLoading ( false ) ; } } ; const choosePaymentOption = async ( ) => { const { error , paymentOption } = await presentPaymentSheet ( ) ; if ( error ) { Alert . alert ( `Error code: ${ error . code }` , error . message ) ; } else if ( paymentOption ) { setPaymentMethod ( { label : paymentOption . label , image : paymentOption . image , } ) ; } else { setPaymentMethod ( null ) ; } } ; const onPressBuy = async ( ) => { setLoading ( true ) ; const { error } = await confirmPaymentSheetPayment ( ) ; if ( error ) { Alert . alert ( `Error code: ${ error . code }` , error . message ) ; } else { Alert . alert ( 'Success' , 'The payment was confirmed successfully!' ) ; setPaymentSheetEnabled ( false ) ; } setLoading ( false ) ; } ; return ( < PaymentScreen onInit = { initialisePaymentSheet } > < View > < Button variant = "primary" loading = { loading } title = { paymentMethod ? ( < View style = { styles . row } > < Image source = { { uri : `data:image/png;base64,${ paymentMethod . image } `,
            }} style={styles.image}/>
                <Text style={styles.text}>{paymentMethod.label}</Text>
              </View>) : ('Choose payment method')} disabled={!paymentSheetEnabled} onPress={choosePaymentOption}/>
      </View>

      <View style={styles.section}>
        <Button variant="primary" loading={loading} disabled={!paymentMethod || !paymentSheetEnabled} title="Buy" onPress={onPressBuy}/>
      </View>
    </PaymentScreen>);
}
const styles = StyleSheet.create({
    flex: {
        flex: 1,
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    section: {
        marginTop: 40,
    },
    title: {
        fontSize: 18,
        marginBottom: 20,
        fontWeight: 'bold',
    },
    paymentMethodTitle: {
        color: colors.slate,
        fontWeight: 'bold',
    },
    image: {
        width: 26,
        height: 20,
    },
    text: {
        color: colors.white,
        fontSize: 16,
        fontWeight: '600',
        marginLeft: 12,
    },
});
