diff --git a/example/src/screens/TwintPaymentScreen.tsx b/example/src/screens/TwintPaymentScreen.tsx new file mode 100644 index 0000000000..bc7fcc46a4 --- /dev/null +++ b/example/src/screens/TwintPaymentScreen.tsx @@ -0,0 +1,80 @@ +import React, { useState } from 'react'; +import { Alert, StyleSheet, TextInput } from 'react-native'; +import { useConfirmPayment } from '@stripe/stripe-react-native'; +import Button from '../components/Button'; +import PaymentScreen from '../components/PaymentScreen'; +import { API_URL } from '../Config'; +import { colors } from '../colors'; + +export default function TwintPaymentScreen() { + const [email, setEmail] = useState(''); + const { confirmPayment, loading } = useConfirmPayment(); + + const fetchPaymentIntentClientSecret = async () => { + const response = await fetch(`${API_URL}/create-payment-intent`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + email, + currency: 'chf', // TWINT is Swiss, so CHF is typical + items: ['id-1'], + payment_method_types: ['twint'], + }), + }); + const { clientSecret, error } = await response.json(); + return { clientSecret, error }; + }; + + const handlePayPress = async () => { + const { clientSecret, error: clientSecretError } = + await fetchPaymentIntentClientSecret(); + + if (clientSecretError) { + Alert.alert(`Error`, clientSecretError); + return; + } + + const { error, paymentIntent } = await confirmPayment(clientSecret, { + paymentMethodType: 'Twint', + }); + + if (error) { + Alert.alert(`Error code: ${error.code}`, error.message); + } else if (paymentIntent) { + Alert.alert( + 'Success', + `The payment was confirmed successfully! currency: ${paymentIntent.currency}` + ); + } + }; + + return ( + + setEmail(value.nativeEvent.text)} + style={styles.input} + /> +