diff --git a/src/payment-card/__tests__/payment-card.scenario.js b/src/payment-card/__tests__/payment-card.scenario.js
index 3e3631f173..0b56fdbb31 100644
--- a/src/payment-card/__tests__/payment-card.scenario.js
+++ b/src/payment-card/__tests__/payment-card.scenario.js
@@ -30,6 +30,8 @@ export function Scenario() {
+
+
);
}
diff --git a/src/payment-card/custom-cards.config.js b/src/payment-card/custom-cards.config.js
new file mode 100644
index 0000000000..b07048b606
--- /dev/null
+++ b/src/payment-card/custom-cards.config.js
@@ -0,0 +1,25 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+//@flow
+
+/*
+ This file should be used for adding new card type configuration
+*/
+
+const UATP_CARD_TYPE_CONFIG = {
+ niceType: 'Uatp',
+ type: 'uatp',
+ patterns: [[1001, 1999]],
+ gaps: [4, 9],
+ lengths: [15],
+ code: {
+ name: 'CVV',
+ size: 0,
+ },
+};
+
+export const CUSTOM_CARDS_CONFIGURATION = [UATP_CARD_TYPE_CONFIG];
diff --git a/src/payment-card/icons/uatp.js b/src/payment-card/icons/uatp.js
new file mode 100644
index 0000000000..4f582328ea
--- /dev/null
+++ b/src/payment-card/icons/uatp.js
@@ -0,0 +1,58 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import * as React from 'react';
+
+const UatpIcon = ({ size }: { size: string }) => (
+
+);
+
+export default UatpIcon;
diff --git a/src/payment-card/payment-card.js b/src/payment-card/payment-card.js
index fdb89b0e6c..26147573c6 100644
--- a/src/payment-card/payment-card.js
+++ b/src/payment-card/payment-card.js
@@ -24,11 +24,14 @@ import MaestroIcon from './icons/maestro.js';
import MastercardIcon from './icons/mastercard.js';
import UnionPayIcon from './icons/unionpay.js';
import VisaIcon from './icons/visa.js';
+import UatpIcon from './icons/uatp.js';
import { IconWrapper as StyledIconWrapper } from './styled-components.js';
import type { PaymentCardPropsT } from './types.js';
+import { CUSTOM_CARDS_CONFIGURATION } from './custom-cards.config.js';
+
const CardTypeToComponent = {
visa: VisaIcon,
mastercard: MastercardIcon,
@@ -40,6 +43,7 @@ const CardTypeToComponent = {
maestro: MaestroIcon,
elo: EloIcon,
generic: GenericIcon,
+ uatp: UatpIcon,
};
class PaymentCard extends React.Component {
@@ -61,6 +65,14 @@ class PaymentCard extends React.Component {
endEnhancer: null,
};
+ constructor(props: PaymentCardPropsT) {
+ super(props);
+ // For adding new custom card type, add card config to custom-cards.config.js
+ CUSTOM_CARDS_CONFIGURATION.forEach((cardTypeConfig) =>
+ valid.creditCardType.addCard(cardTypeConfig)
+ );
+ }
+
componentDidUpdate(prevProps: PaymentCardPropsT) {
if (this.inRef && prevProps.value !== this.props.value) {
this.inRef.setSelectionRange(this.caretPosition, this.caretPosition);
diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-chromium-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-chromium-linux.png
index cceca5c281..60bf56873c 100644
Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-chromium-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-chromium-linux.png differ
diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-firefox-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-firefox-linux.png
index 9ed580bf06..71d28d322f 100644
Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-firefox-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-firefox-linux.png differ
diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-webkit-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-webkit-linux.png
index 347893c2c3..481c89d085 100644
Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-webkit-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-webkit-linux.png differ
diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-chromium-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-chromium-linux.png
index 759b1352b1..104d084f5b 100644
Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-chromium-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-chromium-linux.png differ
diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-firefox-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-firefox-linux.png
index 383f0cf416..6b0b9ac4e0 100644
Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-firefox-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-firefox-linux.png differ
diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-webkit-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-webkit-linux.png
index 67ac56292d..603e01a138 100644
Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-webkit-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-webkit-linux.png differ
diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-chromium-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-chromium-linux.png
index 378b73f780..f0126523f7 100644
Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-chromium-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-chromium-linux.png differ
diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-firefox-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-firefox-linux.png
index c0e59aadea..e452d1eebc 100644
Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-firefox-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-firefox-linux.png differ
diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-webkit-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-webkit-linux.png
index dda56175a8..d0f0e23643 100644
Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-webkit-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-webkit-linux.png differ