packages/components/containers/payments/Alert3ds.tsx

   1 import { c } from 'ttag';
   2
   3 import americanExpressSafekeySvg from '@proton/styles/assets/img/bank-icons/amex-safekey-colored.svg';
   4 import discoverProtectBuySvg from '@proton/styles/assets/img/bank-icons/discover-protectbuy-colored.svg';
   5 import jcbLogoSvg from '@proton/styles/assets/img/bank-icons/jcb-logo.png';
   6 import mastercardSecurecodeSvg from '@proton/styles/assets/img/bank-icons/mastercard-securecode-colored.svg';
   7 import verifiedByVisaSvg from '@proton/styles/assets/img/bank-icons/visa-secure-colored.svg';
   8
   9 const Alert3ds = () => {
  10     return (
  11         <div className="my-6 color-weak text-center">
  12             <div className="mb-2 text-sm" data-testid="3ds-info">
  13                 {c('Info').t`We use 3-D Secure to protect your payments`}
  14             </div>
  15             <div className="flex items-center justify-center">
  16                 <img
  17                     alt={c('Info').t`Visa Secure logo`}
  18                     className="mr-4"
  19                     style={{ maxHeight: '44px' }}
  20                     src={verifiedByVisaSvg}
  21                 />
  22                 <img
  23                     alt={c('Info').t`Mastercard SecureCode logo`}
  24                     className="mr-4"
  25                     style={{ maxHeight: '44px' }}
  26                     src={mastercardSecurecodeSvg}
  27                 />
  28                 <img
  29                     alt={c('Info').t`Discover ProtectBuy logo`}
  30                     className="mr-4"
  31                     style={{ maxHeight: '44px' }}
  32                     src={discoverProtectBuySvg}
  33                 />
  34                 <img
  35                     alt={c('Info').t`American Express SafeKey logo`}
  36                     className="mr-4"
  37                     style={{ maxHeight: '44px' }}
  38                     src={americanExpressSafekeySvg}
  39                 />
  40                 <img alt={c('Info').t`JCB logo`} className="mr-4" style={{ maxHeight: '44px' }} src={jcbLogoSvg} />
  41             </div>
  42         </div>
  43     );
  44 };
  45
  46 export default Alert3ds;