SEPA ダイレクトデビットによる支払いを受け付ける

import React, { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      // Your app code here
    </StripeProvider>
  );
}

const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email,
      currency: 'eur',
      payment_method_types: ['sepa_debit'],
    }),
  });
  const {clientSecret, error} = await response.json();

  return {clientSecret, error};
};

export default function SepaPaymentScreen() {
  const [email, setEmail] = useState('');
  const [iban, setIban] = useState('');

  return (
    <Screen>
      <TextInput
        placeholder="E-mail"
        keyboardType="email-address"
        onChange={(value) => setEmail(value.nativeEvent.text)}
        style={styles.input}
      />
      <TextInput
        placeholder="Iban"
        onChange={(value) => setIban(value.nativeEvent.text.toLowerCase())}
        style={styles.input}
      />
      <Button
        variant="primary"
        onPress={handlePayPress}
        title="Save IBAN"
        loading={loading}
      />
    </Screen>
  );
}

export default function SepaPaymentScreen() {
  const [iban, setIban] = useState('');
  const {confirmPayment, loading} = useConfirmPayment();

  const handlePayPress = async () => {
    const {
      clientSecret,
      error: clientSecretError,
    } = await fetchPaymentIntentClientSecret();

    if (clientSecretError) {
      Alert.alert(`Error`, clientSecretError);
      return;
    }

    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      name: 'Jenny Rosen',
      email: 'jenny.rosen@example.com',
    };

    const {error, paymentIntent} = await confirmPayment(clientSecret, {
      paymentMethodType: 'SepaDebit',
      paymentMethodData: {
        billingDetails,
        iban,
      },
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (paymentIntent) {
      if (paymentIntent.status === PaymentIntents.Status.Processing) {
        Alert.alert(
          'Processing',
          `The debit has been successfully submitted and is now processing.`,
        );
      } else if (paymentIntent.status === PaymentIntents.Status.Succeeded) {
        Alert.alert(
          'Success',
          `The payment was confirmed successfully! currency: ${paymentIntent.currency}`,
        );
      } else {
        Alert.alert('Payment status:', paymentIntent.status);
      }
    }
  };

  return <Screen>{/* ... */}</Screen>;
}