@oxy.so/services 11.2.0-oxy-one.3 → 11.2.0-oxy-one.5

package/src/ui/components/oauthNavigation.ts

@@ -13,34 +13,34 @@ import { logger, persistOAuthReturnPath } from '@oxy.so/core';
 
 /** Minimal shape of the optional `expo-web-browser` auth-session result. */
 interface WebBrowserAuthResult {
-    type?: string;
-    url?: string;
+  type?: string;
+  url?: string;
 }
 
 /** Minimal shape of the optional `expo-web-browser` native module we depend on. */
 interface WebBrowserModule {
-    openAuthSessionAsync?: (url: string, redirectUrl: string) => Promise<WebBrowserAuthResult>;
+  openAuthSessionAsync?: (url: string, redirectUrl: string) => Promise<WebBrowserAuthResult>;
 }
 
 /** Outcome of opening the authorize URL on native. */
 export interface OpenAuthorizeResult {
-    /**
-     * The deep-link URL the auth session returned to (carries `?code=…&state=…`)
-     * when `expo-web-browser` observed it, else `null`. `null` means the RP must
-     * complete the exchange from its own deep-link handler (e.g. after the
-     * `Linking.openURL` fallback, which cannot observe the return URL).
-     */
-    redirectUrl: string | null;
+  /**
+   * The deep-link URL the auth session returned to (carries `?code=…&state=…`)
+   * when `expo-web-browser` observed it, else `null`. `null` means the RP must
+   * complete the exchange from its own deep-link handler (e.g. after the
+   * `Linking.openURL` fallback, which cannot observe the return URL).
+   */
+  redirectUrl: string | null;
 }
 
 export interface OpenAuthorizeOptions {
-    /**
-     * Whether to fall back to `Linking.openURL` when an in-app auth session is
-     * unavailable. Explicit-consent callers disable this because they must
-     * observe and validate the callback before reporting success.
-     * @default true
-     */
-    allowExternalFallback?: boolean;
+  /**
+   * Whether to fall back to `Linking.openURL` when an in-app auth session is
+   * unavailable. Explicit-consent callers disable this because they must
+   * observe and validate the callback before reporting success.
+   * @default true
+   */
+  allowExternalFallback?: boolean;
 }
 
 /**
@@ -56,10 +56,10 @@ export interface OpenAuthorizeOptions {
  * new flow cannot forget to preserve the page the visitor came from.
  */
 export function redirectToAuthorize(url: string): void {
-    const location = (globalThis as { location?: Location }).location;
-    if (!location) return;
-    persistOAuthReturnPath(`${location.pathname}${location.search}${location.hash}`);
-    location.assign(url);
+  const location = (globalThis as { location?: Location }).location;
+  if (!location) return;
+  persistOAuthReturnPath(`${location.pathname}${location.search}${location.hash}`);
+  location.assign(url);
 }
 
 /**
@@ -72,43 +72,41 @@ export function redirectToAuthorize(url: string): void {
  * the caller can hand `?code=…&state=…` back to the RP for the token exchange.
  */
 export async function openAuthorizeUrlNative(
-    url: string,
-    redirectUri: string,
-    options: OpenAuthorizeOptions = {},
+  url: string,
+  redirectUri: string,
+  options: OpenAuthorizeOptions = {},
 ): Promise<OpenAuthorizeResult> {
-    try {
-        const mod = (await import('expo-web-browser')) as unknown as WebBrowserModule;
-        if (mod && typeof mod.openAuthSessionAsync === 'function') {
-            const result = await mod.openAuthSessionAsync(url, redirectUri);
-            const redirectUrl =
-                result && result.type === 'success' && typeof result.url === 'string'
-                    ? result.url
-                    : null;
-            return { redirectUrl };
-        }
-    } catch (error) {
-        logger.warn(
-            'OxySignInButton: expo-web-browser auth session failed; falling back to Linking.openURL',
-            { component: 'oauthNavigation' },
-            error,
-        );
+  try {
+    const mod = (await import('expo-web-browser')) as unknown as WebBrowserModule;
+    if (mod && typeof mod.openAuthSessionAsync === 'function') {
+      const result = await mod.openAuthSessionAsync(url, redirectUri);
+      const redirectUrl =
+        result && result.type === 'success' && typeof result.url === 'string' ? result.url : null;
+      return { redirectUrl };
     }
+  } catch (error) {
+    logger.warn(
+      'OxySignInButton: expo-web-browser auth session failed; falling back to Linking.openURL',
+      { component: 'oauthNavigation' },
+      error,
+    );
+  }
 
-    if (options.allowExternalFallback === false) {
-        return { redirectUrl: null };
-    }
-
-    // Fallback: Linking cannot observe the return URL, so the RP completes the
-    // exchange from its own deep-link handler. A rejected openURL (e.g. an
-    // unregistered scheme) must not throw out of the sign-in flow.
-    try {
-        await Linking.openURL(url);
-    } catch (error) {
-        logger.warn(
-            'OxySignInButton: Linking.openURL rejected the authorize URL',
-            { component: 'oauthNavigation' },
-            error,
-        );
-    }
+  if (options.allowExternalFallback === false) {
     return { redirectUrl: null };
+  }
+
+  // Fallback: Linking cannot observe the return URL, so the RP completes the
+  // exchange from its own deep-link handler. A rejected openURL (e.g. an
+  // unregistered scheme) must not throw out of the sign-in flow.
+  try {
+    await Linking.openURL(url);
+  } catch (error) {
+    logger.warn(
+      'OxySignInButton: Linking.openURL rejected the authorize URL',
+      { component: 'oauthNavigation' },
+      error,
+    );
+  }
+  return { redirectUrl: null };
 }

package/src/ui/components/payment/PaymentDetailsStep.tsx

@@ -13,223 +13,291 @@ import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types'
 import { useI18n } from '../../hooks/useI18n';
 
 interface PaymentDetailsStepProps {
-    paymentMethod: string;
-    cardDetails: CardDetails;
-    onCardDetailsChange: (details: CardDetails) => void;
-    colors: PaymentColors;
-    animations: PaymentStepAnimations;
-    faircoinAddress: string;
-    isMobile: boolean;
-    qrSize: number;
-    onBack: () => void;
-    onNext: () => void;
-    QRCodeComponent?: React.ComponentType<{ value?: string; size?: number }>;
+  paymentMethod: string;
+  cardDetails: CardDetails;
+  onCardDetailsChange: (details: CardDetails) => void;
+  colors: PaymentColors;
+  animations: PaymentStepAnimations;
+  faircoinAddress: string;
+  isMobile: boolean;
+  qrSize: number;
+  onBack: () => void;
+  onNext: () => void;
+  QRCodeComponent?: React.ComponentType<{ value?: string; size?: number }>;
 }
 
 const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
-    paymentMethod,
-    cardDetails,
-    onCardDetailsChange,
-    colors,
-    animations,
-    faircoinAddress,
-    isMobile,
-    qrSize,
-    onBack,
-    onNext,
-    QRCodeComponent,
+  paymentMethod,
+  cardDetails,
+  onCardDetailsChange,
+  colors,
+  animations,
+  faircoinAddress,
+  isMobile,
+  qrSize,
+  onBack,
+  onNext,
+  QRCodeComponent,
 }) => {
-    const styles = useMemo(() => createPaymentStyles(colors), [colors]);
-    const { t } = useI18n();
-    const { fadeAnim, slideAnim, scaleAnim } = animations;
+  const styles = useMemo(() => createPaymentStyles(colors), [colors]);
+  const { t } = useI18n();
+  const { fadeAnim, slideAnim, scaleAnim } = animations;
 
-    const handleCopyAddress = () => {
-        copyText(faircoinAddress)
-            .then(() => toast(t('payment.details.addressCopied')))
-            .catch(() => toast.error(t('appInfo.toasts.copyFailed')));
-    };
+  const handleCopyAddress = () => {
+    copyText(faircoinAddress)
+      .then(() => toast(t('payment.details.addressCopied')))
+      .catch(() => toast.error(t('appInfo.toasts.copyFailed')));
+  };
 
-    const handleOpenFairWallet = () => {
-        const url = `fairwallet://pay?address=${faircoinAddress}`;
-        Linking.openURL(url);
-    };
+  const handleOpenFairWallet = () => {
+    const url = `fairwallet://pay?address=${faircoinAddress}`;
+    Linking.openURL(url);
+  };
 
-    const isCardValid = cardDetails.number && cardDetails.expiry && cardDetails.cvv;
+  const isCardValid = cardDetails.number && cardDetails.expiry && cardDetails.cvv;
 
-    return (
-        <Animated.View
-            style={[
-                styles.stepContainer,
-                {
-                    opacity: fadeAnim,
-                    transform: [
-                        { translateY: slideAnim },
-                        { scale: scaleAnim },
-                    ],
-                },
-            ]}
-            accessibilityRole="none"
-            accessibilityLabel="Enter payment details step"
-        >
-            <View style={styles.section}>
-                <Text style={styles.sectionTitle}>
-                    {paymentMethod === 'card' ? t('payment.details.cardDetails') :
-                        paymentMethod === 'oxy' ? t('payment.details.peable') :
-                            paymentMethod === 'faircoin' ? t('payment.details.faircoinPayment') : t('payment.details.paymentDetails')}
-                </Text>
+  return (
+    <Animated.View
+      style={[
+        styles.stepContainer,
+        {
+          opacity: fadeAnim,
+          transform: [{ translateY: slideAnim }, { scale: scaleAnim }],
+        },
+      ]}
+      accessibilityRole="none"
+      accessibilityLabel="Enter payment details step"
+    >
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>
+          {paymentMethod === 'card'
+            ? t('payment.details.cardDetails')
+            : paymentMethod === 'oxy'
+              ? t('payment.details.peable')
+              : paymentMethod === 'faircoin'
+                ? t('payment.details.faircoinPayment')
+                : t('payment.details.paymentDetails')}
+        </Text>
 
-                {paymentMethod === 'card' && (
-                    <View style={styles.cardPaymentCard}>
-                        <View style={styles.cardPaymentContent}>
-                            <Ionicons name="card-outline" size={64} color={colors.primary} style={styles.cardPaymentIcon} />
-                            <Text style={styles.cardPaymentMainTitle}>{t('payment.details.creditCard')}</Text>
-                            <Text style={styles.cardPaymentSubtitle}>{t('payment.details.enterCardSecurely')}</Text>
+        {paymentMethod === 'card' && (
+          <View style={styles.cardPaymentCard}>
+            <View style={styles.cardPaymentContent}>
+              <Ionicons
+                name="card-outline"
+                size={64}
+                color={colors.primary}
+                style={styles.cardPaymentIcon}
+              />
+              <Text style={styles.cardPaymentMainTitle}>{t('payment.details.creditCard')}</Text>
+              <Text style={styles.cardPaymentSubtitle}>
+                {t('payment.details.enterCardSecurely')}
+              </Text>
 
-                            <View style={styles.cardPaymentFields}>
-                                <View style={styles.cardRowInfo}>
-                                    <Ionicons name="card-outline" size={24} color={colors.primary} style={styles.cardRowIcon} />
-                                    <Text style={styles.cardRowText}>{t('payment.details.acceptedCards')}</Text>
-                                </View>
-                                <TextField>
-                                    <TextFieldInput
-                                        floatingLabel
-                                        label={t('payment.details.cardNumber')}
-                                        value={cardDetails.number}
-                                        onChangeText={text => {
-                                            const formatted = text.replace(/\s/g, '').replace(/(\d{4})/g, '$1 ').trim();
-                                            onCardDetailsChange({ ...cardDetails, number: formatted });
-                                        }}
-                                        placeholder="1234 5678 9012 3456"
-                                        keyboardType="numeric"
-                                        maxLength={19}
-                                        accessibilityLabel="Card number"
-                                        accessibilityHint="Enter your 16-digit card number"
-                                    />
-                                </TextField>
-                                <View style={styles.cardFieldRow}>
-                                    <View style={styles.cardFieldHalfLeft}>
-                                        <TextField>
-                                            <TextFieldInput
-                                                floatingLabel
-                                                label={t('payment.details.expiry')}
-                                                value={cardDetails.expiry}
-                                                onChangeText={text => {
-                                                    const formatted = text.replace(/\D/g, '').replace(/(\d{2})(\d)/, '$1/$2');
-                                                    onCardDetailsChange({ ...cardDetails, expiry: formatted });
-                                                }}
-                                                placeholder="MM/YY"
-                                                maxLength={5}
-                                                accessibilityLabel="Expiry date"
-                                                accessibilityHint="Enter expiry date in MM/YY format"
-                                            />
-                                        </TextField>
-                                    </View>
-                                    <View style={styles.cardFieldHalfRight}>
-                                        <TextField>
-                                            <TextFieldInput
-                                                floatingLabel
-                                                label="CVV"
-                                                value={cardDetails.cvv}
-                                                onChangeText={text => {
-                                                    const formatted = text.replace(/\D/g, '');
-                                                    onCardDetailsChange({ ...cardDetails, cvv: formatted });
-                                                }}
-                                                placeholder="123"
-                                                keyboardType="numeric"
-                                                maxLength={4}
-                                                accessibilityLabel="CVV"
-                                                accessibilityHint="Enter 3 or 4 digit security code"
-                                            />
-                                        </TextField>
-                                    </View>
-                                </View>
-                            </View>
+              <View style={styles.cardPaymentFields}>
+                <View style={styles.cardRowInfo}>
+                  <Ionicons
+                    name="card-outline"
+                    size={24}
+                    color={colors.primary}
+                    style={styles.cardRowIcon}
+                  />
+                  <Text style={styles.cardRowText}>{t('payment.details.acceptedCards')}</Text>
+                </View>
+                <TextField>
+                  <TextFieldInput
+                    floatingLabel
+                    label={t('payment.details.cardNumber')}
+                    value={cardDetails.number}
+                    onChangeText={(text) => {
+                      const formatted = text
+                        .replace(/\s/g, '')
+                        .replace(/(\d{4})/g, '$1 ')
+                        .trim();
+                      onCardDetailsChange({ ...cardDetails, number: formatted });
+                    }}
+                    placeholder="1234 5678 9012 3456"
+                    keyboardType="numeric"
+                    maxLength={19}
+                    accessibilityLabel="Card number"
+                    accessibilityHint="Enter your 16-digit card number"
+                  />
+                </TextField>
+                <View style={styles.cardFieldRow}>
+                  <View style={styles.cardFieldHalfLeft}>
+                    <TextField>
+                      <TextFieldInput
+                        floatingLabel
+                        label={t('payment.details.expiry')}
+                        value={cardDetails.expiry}
+                        onChangeText={(text) => {
+                          const formatted = text.replace(/\D/g, '').replace(/(\d{2})(\d)/, '$1/$2');
+                          onCardDetailsChange({ ...cardDetails, expiry: formatted });
+                        }}
+                        placeholder="MM/YY"
+                        maxLength={5}
+                        accessibilityLabel="Expiry date"
+                        accessibilityHint="Enter expiry date in MM/YY format"
+                      />
+                    </TextField>
+                  </View>
+                  <View style={styles.cardFieldHalfRight}>
+                    <TextField>
+                      <TextFieldInput
+                        floatingLabel
+                        label="CVV"
+                        value={cardDetails.cvv}
+                        onChangeText={(text) => {
+                          const formatted = text.replace(/\D/g, '');
+                          onCardDetailsChange({ ...cardDetails, cvv: formatted });
+                        }}
+                        placeholder="123"
+                        keyboardType="numeric"
+                        maxLength={4}
+                        accessibilityLabel="CVV"
+                        accessibilityHint="Enter 3 or 4 digit security code"
+                      />
+                    </TextField>
+                  </View>
+                </View>
+              </View>
 
-                            <View style={{ height: 18 }} />
-                            <Text style={styles.cardPaymentWaiting}>{t('payment.details.readyToProcess')}</Text>
-                        </View>
-                    </View>
-                )}
+              <View style={{ height: 18 }} />
+              <Text style={styles.cardPaymentWaiting}>{t('payment.details.readyToProcess')}</Text>
+            </View>
+          </View>
+        )}
 
-                {paymentMethod === 'oxy' && (
-                    <View style={styles.peableCard}>
-                        <View style={styles.peableContent}>
-                            <Ionicons name="wallet-outline" size={64} color={colors.primary} style={styles.peableIcon} />
-                            <Text style={styles.peableMainTitle}>{t('payment.details.peable')}</Text>
-                            <Text style={styles.peableSubtitle}>{t('payment.details.payWithWallet')}</Text>
-                            <View style={styles.peableBalanceBox}>
-                                <Text style={styles.peableBalanceText}>{t('payment.details.balance', { balance: '⊜ 123.45' })}</Text>
-                            </View>
-                            <View style={{ height: 18 }} />
-                            <Text style={styles.peableWaiting}>{t('payment.details.readyToProcess')}</Text>
-                        </View>
-                    </View>
-                )}
+        {paymentMethod === 'oxy' && (
+          <View style={styles.peableCard}>
+            <View style={styles.peableContent}>
+              <Ionicons
+                name="wallet-outline"
+                size={64}
+                color={colors.primary}
+                style={styles.peableIcon}
+              />
+              <Text style={styles.peableMainTitle}>{t('payment.details.peable')}</Text>
+              <Text style={styles.peableSubtitle}>{t('payment.details.payWithWallet')}</Text>
+              <View style={styles.peableBalanceBox}>
+                <Text style={styles.peableBalanceText}>
+                  {t('payment.details.balance', { balance: '⊜ 123.45' })}
+                </Text>
+              </View>
+              <View style={{ height: 18 }} />
+              <Text style={styles.peableWaiting}>{t('payment.details.readyToProcess')}</Text>
+            </View>
+          </View>
+        )}
 
-                {paymentMethod === 'faircoin' && (
-                    <View style={styles.faircoinCard}>
-                        <View style={styles.faircoinContent}>
-                            <FAIRWalletIcon size={64} style={styles.faircoinIcon} />
-                            <Text style={styles.faircoinMainTitle}>FAIRWallet</Text>
-                            <Text style={styles.faircoinSubtitle}>{t('payment.details.payWithFairCoin')}</Text>
-                            {!isMobile && QRCodeComponent ? (
-                                <>
-                                    <Text style={styles.faircoinScanText}>{t('payment.details.scanToPay')}</Text>
-                                    <View style={styles.faircoinQRCard}>
-                                        <QRCodeComponent value={faircoinAddress} size={qrSize - 32} />
-                                        <View style={styles.faircoinQRBadge}>
-                                            <FAIRWalletIcon size={28} />
-                                        </View>
-                                    </View>
-                                </>
-                            ) : (
-                                <>
-                                    <Text style={styles.faircoinTitle}>{t('payment.details.fairWalletInstructions')}</Text>
-                                    <Text style={styles.faircoinAddress}>{faircoinAddress}</Text>
-                                    <TouchableOpacity
-                                        style={[styles.faircoinButton, { backgroundColor: '#9ffb50', borderRadius: 18, marginTop: 12, width: '90%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }]}
-                                        onPress={handleOpenFairWallet}
-                                        accessibilityRole="button"
-                                        accessibilityLabel={t('payment.details.openInFairWallet')}
-                                    >
-                                        <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
-                                        <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>{t('payment.details.openInFairWallet')}</Text>
-                                    </TouchableOpacity>
-                                    <TouchableOpacity
-                                        style={[styles.faircoinButton, { backgroundColor: '#9ffb50', borderRadius: 18, marginTop: 10, width: '90%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }]}
-                                        onPress={handleCopyAddress}
-                                        accessibilityRole="button"
-                                        accessibilityLabel={t('payment.details.copyAddress')}
-                                    >
-                                        <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
-                                        <Text style={[styles.faircoinButtonText, { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 }]}>{t('payment.details.copyAddress')}</Text>
-                                    </TouchableOpacity>
-                                </>
-                            )}
-                            <View style={{ height: 18 }} />
-                            <Text style={styles.faircoinWaiting}>{t('payment.details.waitingForPayment')}</Text>
-                        </View>
+        {paymentMethod === 'faircoin' && (
+          <View style={styles.faircoinCard}>
+            <View style={styles.faircoinContent}>
+              <FAIRWalletIcon size={64} style={styles.faircoinIcon} />
+              <Text style={styles.faircoinMainTitle}>FAIRWallet</Text>
+              <Text style={styles.faircoinSubtitle}>{t('payment.details.payWithFairCoin')}</Text>
+              {!isMobile && QRCodeComponent ? (
+                <>
+                  <Text style={styles.faircoinScanText}>{t('payment.details.scanToPay')}</Text>
+                  <View style={styles.faircoinQRCard}>
+                    <QRCodeComponent value={faircoinAddress} size={qrSize - 32} />
+                    <View style={styles.faircoinQRBadge}>
+                      <FAIRWalletIcon size={28} />
                     </View>
-                )}
+                  </View>
+                </>
+              ) : (
+                <>
+                  <Text style={styles.faircoinTitle}>
+                    {t('payment.details.fairWalletInstructions')}
+                  </Text>
+                  <Text style={styles.faircoinAddress}>{faircoinAddress}</Text>
+                  <TouchableOpacity
+                    style={[
+                      styles.faircoinButton,
+                      {
+                        backgroundColor: '#9ffb50',
+                        borderRadius: 18,
+                        marginTop: 12,
+                        width: '90%',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                      },
+                    ]}
+                    onPress={handleOpenFairWallet}
+                    accessibilityRole="button"
+                    accessibilityLabel={t('payment.details.openInFairWallet')}
+                  >
+                    <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
+                    <Text
+                      style={[
+                        styles.faircoinButtonText,
+                        { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 },
+                      ]}
+                    >
+                      {t('payment.details.openInFairWallet')}
+                    </Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity
+                    style={[
+                      styles.faircoinButton,
+                      {
+                        backgroundColor: '#9ffb50',
+                        borderRadius: 18,
+                        marginTop: 10,
+                        width: '90%',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                      },
+                    ]}
+                    onPress={handleCopyAddress}
+                    accessibilityRole="button"
+                    accessibilityLabel={t('payment.details.copyAddress')}
+                  >
+                    <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
+                    <Text
+                      style={[
+                        styles.faircoinButtonText,
+                        { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 },
+                      ]}
+                    >
+                      {t('payment.details.copyAddress')}
+                    </Text>
+                  </TouchableOpacity>
+                </>
+              )}
+              <View style={{ height: 18 }} />
+              <Text style={styles.faircoinWaiting}>{t('payment.details.waitingForPayment')}</Text>
             </View>
+          </View>
+        )}
+      </View>
 
-            <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button appearance="subtle" tone="neutral" onPress={onBack} size="sm" icon={<Ionicons name="arrow-back" size={16} />}>
-                    {t('payment.actions.back')}
-                </Button>
-                <Button
-                    appearance="solid" tone="accent"
-                    onPress={onNext}
-                    size="sm"
-                    icon={<Ionicons name="arrow-forward" size={16} />}
-                    iconPosition="right"
-                    disabled={paymentMethod === 'card' && !isCardValid}
-                >
-                    {t('payment.actions.continue')}
-                </Button>
-            </View>
-        </Animated.View>
-    );
+      <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+        <Button
+          appearance="subtle"
+          tone="neutral"
+          onPress={onBack}
+          size="sm"
+          icon={<Ionicons name="arrow-back" size={16} />}
+        >
+          {t('payment.actions.back')}
+        </Button>
+        <Button
+          appearance="solid"
+          tone="accent"
+          onPress={onNext}
+          size="sm"
+          icon={<Ionicons name="arrow-forward" size={16} />}
+          iconPosition="right"
+          disabled={paymentMethod === 'card' && !isCardValid}
+        >
+          {t('payment.actions.continue')}
+        </Button>
+      </View>
+    </Animated.View>
+  );
 };
 
 export default PaymentDetailsStep;