[V5] Show ANCV id order (#2809)

* show ancv id in order

(cherry picked from commit a201475)

* add changeset

(cherry picked from commit 8791d2a)

.changeset/sour-forks-care.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Display ANCV ID while displaying used payment methods on Dropin

packages/lib/src/components/Dropin/components/PaymentMethod/OrderPaymentMethods.tsx

@@ -3,8 +3,17 @@ import PaymentMethodIcon from './PaymentMethodIcon';
 import useCoreContext from '../../../../core/Context/useCoreContext';
 import './OrderPaymentMethods.scss';
 import useImage from '../../../../core/Context/useImage';
+import './OrderPaymentMethods.scss';
+import { Order, OrderStatus } from '../../../../types';
+
+type OrderPaymentMethodsProps = {
+    order: Order;
+    orderStatus: OrderStatus;
+    onOrderCancel: (order) => void;
+    brandLogoConfiguration: any;
+};
 
-export const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel, brandLogoConfiguration }) => {
+export const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel, brandLogoConfiguration }: OrderPaymentMethodsProps) => {
     const { i18n } = useCoreContext();
     const getImage = useImage();
 
@@ -20,7 +29,7 @@ export const OrderPaymentMethods = ({ order, orderStatus, onOrderCancel, brandLo
                                     type={orderPaymentMethod.type}
                                     src={brandLogoConfiguration[orderPaymentMethod.type] || getImage()(orderPaymentMethod.type)}
                                 />
-                                •••• {orderPaymentMethod.lastFour}
+                                {orderPaymentMethod.label ? `${orderPaymentMethod.label}` : `•••• ${orderPaymentMethod.lastFour}`}
                             </div>
 
                             {onOrderCancel && (

packages/lib/src/types/index.ts

@@ -247,8 +247,10 @@ export interface OrderStatus {
     expiresAt: string;
     paymentMethods: {
         amount?: PaymentAmount;
-        lastFour: string;
+        lastFour?: string;
         type: string;
+        name?: string;
+        label?: string;
     }[];
     pspReference: string;
     reference: string;