Fix: Loading logos when handling qrCode/await actions (#2490)

* fix: getting proper logos for actions

* changeset

.changeset/fair-masks-attend.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Loading the logo images properly when handling qrCode/await actions

packages/lib/src/components/UIElement.tsx

@@ -239,7 +239,8 @@ export class UIElement<P extends UIElementProps = any> extends BaseElement<P> im
      * Get the element icon URL for the current environment
      */
     get icon(): string {
-        return this.props.icon ?? this.resources.getImage()(this.type);
+        const type = this.props.paymentMethodType || this.type;
+        return this.props.icon ?? this.resources.getImage()(type);
     }
 
     /**

packages/lib/src/components/internal/QRLoader/QRLoader.tsx

@@ -211,7 +211,7 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
                     src={qrCodeImage}
                     alt={i18n.get('wechatpay.scanqrcode')}
                     onLoad={() => {
-                        onActionHandled({ componentType: this.props.type, actionDescription: 'qr-code-loaded' });
+                        onActionHandled?.({ componentType: this.props.type, actionDescription: 'qr-code-loaded' });
                     }}
                 />
 

packages/lib/src/components/types.ts

@@ -158,6 +158,13 @@ export interface UIElementProps extends BaseElementProps {
     /** @internal */
     clientKey?: string;
 
+    /**
+     * Returned after the payments call, when an action is returned. It represents the payment method tx variant
+     * that was used for the payment
+     * @internal
+     */
+    paymentMethodType?: string;
+
     /** @internal */
     elementRef?: any;