type DropinStyles = {
  container?: {
    base?: ViewStyle;
  };

  element?: {
    neutral?: {
      container?: ViewStyle;
      radioOuter?: ViewStyle;
      label?: TextStyle;
      logo?: ImageStyle;
    };
    selected?: {
      container?: ViewStyle;
      radioOuter?: ViewStyle;
      radioInner?: ViewStyle;
      label?: TextStyle;
      logo?: ImageStyle;
    };
  };

  leanButton?: {
    styles?: {
      base?: ViewStyle;
      loading?: ViewStyle;
      disabled?: ViewStyle;
    };
    textStyles?: {
      base?: TextStyle;
      loading?: TextStyle;
      disabled?: TextStyle;
    };
    customization?: {
      themeColor?: string;
      buttonTextColor?: string;
      buttonBorderRadius?: string;
      linkColor?: string;
      overlayColor?: string;
    };
  };

  googlePayButton?: {
    type?: 'pay' | 'buy' | 'book' | 'checkout' | 'donate' | 'order' | 'subscribe' | 'mark';
    style?: ViewStyle;
  };

  paypalButton?: {
    color?: 'gold' | 'blue' | 'silver' | 'white' | 'black';
    height?: number;
    label?: 'paypal' | 'checkout' | 'buynow' | 'pay' | 'installment' | 'subscribe' | 'donate';
    shape?: 'rect' | 'pill';
    tagline?: boolean;
  };

  applePayButton?: {
    type?: 'plain' | 'buy' | 'setUp' | 'inStore' | 'donate' | 'checkout' | 'book' |
           'subscribe' | 'reload' | 'addMoney' | 'topUp' | 'order' | 'rent' |
           'support' | 'contribute' | 'tip' | 'continue';
    buttonStyle?: 'white' | 'white-outline' | 'black';
  };

  cardForm?: {
    inputFields?: InputStyles;
    errorTextStyles?: {
      base: TextStyle;
    };
    cardNumberInput?: InputStyles;
    expiryDateInput?: InputStyles;
    cvvInput?: InputStyles;
    cardholderNameInput?: InputStyles;
  };

  cardPaymentButton?: {
    base?: Record<string, string | number>;
    disabled?: Record<string, string | number>;
    text?: Record<string, string | number>;
  };

  storeInstrumentSwitch?: {
    style?: ViewStyle;
    thumbColor?: string;
    trackColor?: {
      false?: string;
      true?: string;
    };
  };

  addressInput?: {
    wrapper?: ViewStyle | TextStyle;
    countrySelector?: {
      wrapper?: ViewStyle | TextStyle;
      element?: ViewStyle | TextStyle;
      label?: TextStyle;
      error?: ViewStyle | TextStyle;
    };
    postalCodeInput?: {
      wrapper?: ViewStyle | TextStyle;
      element?: ViewStyle | TextStyle;
      label?: TextStyle;
      error?: ViewStyle | TextStyle;
    };
  };
};

paymentMethodsConfiguration: {
  preselectFirstPaymentOption?: boolean;
  cards?: {
    showCardHolderName?: boolean;
    showExistingCards?: boolean;
    showPaymentMethodLogo?: boolean;
  };
  payPal?: {
    showPaymentMethodLogo?: boolean;
  };
  googlePay?: {
    showPaymentMethodLogo?: boolean;
  };
  applePay?: {
    showPaymentMethodLogo?: boolean;
  };
  mercadoPago?: {
    showPaymentMethodLogo?: boolean;
  };
}

export enum ElementType {
  CARD_NUMBER = 'CARD_NUMBER',
  CARDHOLDER_NAME = 'CARDHOLDER_NAME',
  CVV = 'CVV',
  EXPIRATION_MONTH = 'EXPIRATION_MONTH',
  EXPIRATION_YEAR = 'EXPIRATION_YEAR',
  EXPIRATION_DATE = 'EXPIRATION_DATE',
}

export interface Translations {
  googlePayButton?: {
    labels?: {
      storeInstrument?: string;
    };
  };
  cardPaymentButton?: {
    labels?: {
      neutral?: string;
      processing?: string;
    };
  };
  cardForm?: {
    placeholders?: {
      [key in ElementType]?: string;
    };
    labels?: {
      [key in ElementType]?: string;
    } & {
      label?: string;
      storeInstrument?: string;
    };
  };
  leanButton?: {
    labels?: {
      loading?: string;
      // Note: the button label is fixed to "Pay by bank with Al Tareq." and cannot be overridden.
    };
  };
  paymentResult?: {
    success?: string;
    fail?: string;
    pending?: string;
  };
  paypalButton?: {
    labels?: {
      storeInstrument?: string;
    };
  };
  applePayButton?: {
    labels?: {
      storeInstrument?: string;
    };
  };
}

yarn add [email protected] react-native-webview
// OR
npm install [email protected] react-native-webview