@paypal/checkout-components 5.0.236 → 5.0.238-kitty

package/src/funding/paypal/template.jsx

@@ -234,8 +234,87 @@ export function WalletLabelOld(opts : WalletLabelOptions) : ?ChildType {
     );
 }
 
+function ShowPayLabel(opts) : ?ChildType {
+    const {instrument, content, payNow, textColor, logo, label } = opts;
+
+    return (
+        <div class='show-pay-label'>
+            <div class='pay-label' optional={ 2 }>
+                <Space />
+                {
+                    (instrument && content)
+                        ? <Text>{ payNow ? content.payNow : content.payWith }</Text>
+                        : <Text><PlaceHolder chars={ 7 } color={ textColor } /></Text>
+                }
+                <Space />
+            </div>
+            <div class='logo' optional={ 1 }>
+                {
+                    (instrument && logo)
+                        ? logo
+                        : <Text><PlaceHolder chars={ 4 } color={ textColor } /></Text>
+                }
+            </div>
+            <div class='label'>
+                <Space />
+                {
+                    (instrument && label)
+                        ? <Text>{ label }</Text>
+                        : <Text><PlaceHolder chars={ 6 } color={ textColor } /></Text>
+                }
+            </div>
+        </div>
+    );
+}
+
+function NoPayLabel(opts) : ?ChildType {
+    const { instrument, textColor, logo, label, content } = opts;
+
+    return (
+        <div class='no-pay-label'>
+            {
+                instrument?.secondaryInstruments?.[0]
+                    ? (
+                        <div class='balance'>
+                            <Text>{ content?.balance } &</Text>
+                            <Space />
+                        </div>
+                    )
+                    : null
+            }
+            {
+                (instrument?.type === "balance")
+                    ? (
+                        <div class='paypal-balance'>
+                            <Text>{ content?.payPalBalance }</Text>
+                        </div>
+                    )
+                    : (
+                        <div class='no-paypal-balance'>
+                            <div class='fi-logo' optional={ 1 }>
+                                {
+                                    (instrument && logo)
+                                        ? logo
+                                        : <Text><PlaceHolder chars={ 4 } color={ textColor } /></Text>
+                                }
+                            </div>
+                            <div class='label'>
+                                <Space />
+                                {
+                                    (instrument && label)
+                                        ? <Text>{ label }</Text>
+                                        : <Text><PlaceHolder chars={ 6 } color={ textColor } /></Text>
+                                }
+                            </div>
+                        </div>
+                    )
+            }
+        </div>
+    );
+}
+
 export function WalletLabel(opts : WalletLabelOptions) : ?ChildType {
-    const { logoColor, instrument, content, commit, vault, textColor, fundingSource } = opts;
+    const { logoColor, instrument, content, commit, vault, textColor, fundingSource, showPayLabel } = opts;
 
     if (instrument && !instrument.type) {
         return WalletLabelOld(opts);
@@ -305,31 +384,24 @@ export function WalletLabel(opts : WalletLabelOptions) : ?ChildType {
                         )
                         : null
                 }
-
-                <div class='pay-label' optional={ 2 }>
-                    <Space />
-                    {
-                        (instrument && content)
-                            ? <Text>{ payNow ? content.payNow : content.payWith }</Text>
-                            : <Text><PlaceHolder chars={ 7 } color={ textColor } /></Text>
-                    }
-                    <Space />
-                </div>
-                <div class='logo' optional={ 1 }>
-                    {
-                        (instrument && logo)
-                            ? logo
-                            : <Text><PlaceHolder chars={ 4 } color={ textColor } /></Text>
-                    }
-                </div>
-                <div class='label'>
-                    <Space />
-                    {
-                        (instrument && label)
-                            ? <Text>{ label }</Text>
-                            : <Text><PlaceHolder chars={ 6 } color={ textColor } /></Text>
-                    }
-                </div>
+                {
+                    showPayLabel
+                        ? <ShowPayLabel
+                            instrument={ instrument }
+                            content={ content }
+                            payNow={ payNow }
+                            textColor={ textColor }
+                            logo={ logo }
+                            label={ label }
+                        />
+                        : <NoPayLabel
+                            instrument={ instrument }
+                            textColor={ textColor }
+                            logo={ logo }
+                            label={ label }
+                            content={ content }
+                        />
+                }
             </div>
         </Style>
     );

package/src/funding/sofort/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { SofortLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getSofortConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         shippingChange: false,
 
@@ -16,6 +18,23 @@ export function getSofortConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => SofortLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => SofortLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>SOFORT</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/trustly/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { TrustlyLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getTrustlyConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         automatic: false,
         
@@ -18,6 +20,23 @@ export function getTrustlyConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => TrustlyLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => TrustlyLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Trustly</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/verkkopankki/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { VerkkopankkiLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getVerkkopankkiConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         automatic: false,
 
@@ -18,6 +20,23 @@ export function getVerkkopankkiConfig() : FundingSourceConfig {
 
         shippingChange: false,
     
-        Logo: ({ logoColor, optional }) => VerkkopankkiLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => VerkkopankkiLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Verkkopankki</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/wechatpay/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { WechatpayLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getWechatpayConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         shippingChange: false,
     
@@ -16,6 +18,23 @@ export function getWechatpayConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => WechatpayLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => WechatpayLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>WeChat Pay</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/interface/button.js

@@ -8,6 +8,7 @@ import { allowIframe as _allowIframe } from '../lib';
 import { getCheckoutComponent, type CheckoutComponent } from '../zoid/checkout';
 import { getButtonsComponent, type ButtonsComponent } from '../zoid/buttons';
 import { getCardFormComponent, type CardFormComponent } from '../zoid/card-form';
+import { getPaymentFieldsComponent, type PaymentFieldsComponent } from '../zoid/payment-fields';
 import { getMenuComponent, type MenuComponent } from '../zoid/menu';
 import { getInstallmentsComponent, type InstallmentsComponent } from '../zoid/installments';
 import { Buttons as _ButtonsTemplate } from '../ui/buttons';
@@ -32,6 +33,10 @@ export const CardForm : LazyProtectedExport<CardFormComponent> = {
     __get__: () => protectedExport(getCardFormComponent())
 };
 
+export const PaymentFields : LazyProtectedExport<PaymentFieldsComponent> = {
+    __get__: () => protectedExport(getPaymentFieldsComponent())
+};
+
 export const Menu : LazyProtectedExport<MenuComponent> = {
     __get__: () => protectedExport(getMenuComponent())
 };

package/src/types.js

@@ -2,6 +2,12 @@
 
 import { CARD, WALLET_INSTRUMENT } from '@paypal/sdk-constants/src';
 
+type SecondaryInstruments = {|
+    type : string,
+    label : string,
+    instrumentID : string
+|};
+
 export type WalletInstrument = {|
     type? : $Values<typeof WALLET_INSTRUMENT>,
     label? : string,
@@ -10,7 +16,8 @@ export type WalletInstrument = {|
     tokenID? : string,
     vendor? : $Values<typeof CARD>,
     oneClick : boolean,
-    branded : boolean
+    branded : boolean,
+    secondaryInstruments? : SecondaryInstruments
 |};
 
 export type WalletPaymentType = {|
@@ -38,7 +45,8 @@ export type ContentType = {|
     credit : string,
     payWith : string,
     payLater : string,
-    flex : string
+    flex : string,
+    payPalBalance: string
 |};
 
 export type Experiment = {|

package/src/ui/buttons/button.jsx

@@ -41,11 +41,12 @@ type IndividualButtonProps = {|
     vault : boolean,
     merchantFundingSource : ?$Values<typeof FUNDING>,
     instrument : ?WalletInstrument,
-    experience? : string
+    experience? : string,
+    showPayLabel : boolean
 |};
 
 export function Button({ fundingSource, style, multiple, locale, env, fundingEligibility, i, nonce, flow, vault,
-    userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument, experience } : IndividualButtonProps) : ElementNode {
+    userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument, experience, showPayLabel } : IndividualButtonProps) : ElementNode {
     
     const { custom, layout, shape } = style;
     const inlineExperience = experience === EXPERIENCE.INLINE && custom && custom.label;
@@ -189,6 +190,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
                 vault={ vault }
                 textColor={ textColor }
                 fundingSource={ fundingSource }
+                showPayLabel={ showPayLabel }
             />
         );
 
@@ -218,11 +220,12 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
             <div
                 role='link'
                 { ...{
-                    [ ATTRIBUTE.BUTTON ]:            true,
-                    [ ATTRIBUTE.FUNDING_SOURCE ]:    fundingSource,
-                    [ ATTRIBUTE.PAYMENT_METHOD_ID ]: instrument ? instrument.tokenID : null,
-                    [ ATTRIBUTE.INSTRUMENT_ID ]:     instrument ? instrument.instrumentID : null,
-                    [ ATTRIBUTE.INSTRUMENT_TYPE ]:   instrument ? instrument.type : null
+                    [ ATTRIBUTE.BUTTON ]:                    true,
+                    [ ATTRIBUTE.FUNDING_SOURCE ]:            fundingSource,
+                    [ ATTRIBUTE.PAYMENT_METHOD_ID ]:         instrument ? instrument.tokenID : null,
+                    [ ATTRIBUTE.INSTRUMENT_ID ]:             instrument ? instrument.instrumentID : null,
+                    [ ATTRIBUTE.INSTRUMENT_TYPE ]:           instrument ? instrument.type : null,
+                    [ ATTRIBUTE.SECONDARY_INSTRUMENT_TYPE ]: instrument?.secondaryInstruments ? instrument.secondaryInstruments[0].type : null
                 } }
                 class={ [
                     CLASS.BUTTON,

package/src/ui/buttons/buttons.jsx

@@ -2,7 +2,7 @@
 /** @jsx node */
 
 import { node, type ElementNode } from '@krakenjs/jsx-pragmatic/src';
-import { FUNDING, WALLET_INSTRUMENT } from '@paypal/sdk-constants/src';
+import { FUNDING, WALLET_INSTRUMENT, APM_LIST } from '@paypal/sdk-constants/src';
 import { noop } from '@krakenjs/belter/src';
 
 import type { Wallet, WalletInstrument } from '../../types';
@@ -104,7 +104,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
     const { onClick = noop } = props;
     const { wallet, fundingSource, style, locale, remembered, env, fundingEligibility, platform, commit, vault,
         nonce, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, personalization, userIDToken, content, flow, experiment, applePaySupport,
-        supportsPopups, supportedNativeBrowser, experience } = normalizeButtonProps(props);
+        supportsPopups, supportedNativeBrowser, experience, showPayLabel } = normalizeButtonProps(props);
     const { custom, layout, shape, tagline } = style;
  
     const inlineExperience = experience === EXPERIENCE.INLINE && custom && custom.label && custom.label.length !== 0;
@@ -124,6 +124,10 @@ export function Buttons(props : ButtonsProps) : ElementNode {
         }
     }
 
+    const isAPM = fundingSources.some(src => {
+        return APM_LIST.includes(src);
+    });
+
     const instruments = getWalletInstruments({ wallet, fundingSources, layout, onShippingChange, onShippingAddressChange, onShippingOptionsChange });
 
     const isWallet = (
@@ -188,6 +192,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
                         vault={ vault }
                         instrument={ instruments[source] }
                         experience={ experience }
+                        showPayLabel={ showPayLabel }
                     />
                 ))
             }
@@ -210,6 +215,12 @@ export function Buttons(props : ButtonsProps) : ElementNode {
                     : null
             }
 
+            {
+                (isAPM)
+                    ? <div id="payment-fields-container" className="payment-fields-container"/>
+                    : null
+            }
+
             {
                 (layout === BUTTON_LAYOUT.VERTICAL && fundingSources.indexOf(FUNDING.CARD) !== -1 && !inlineExperience)
                     ? <PoweredByPayPal

package/src/ui/buttons/props.js

@@ -393,7 +393,8 @@ export type RenderButtonProps = {|
     applePaySupport : boolean,
     supportsPopups : boolean,
     supportedNativeBrowser : boolean,
-    experience : string
+    experience : string,
+    showPayLabel : boolean
 |};
 
 export type PrerenderDetails = {|
@@ -488,7 +489,8 @@ export type ButtonPropsInputs = {
     applePaySupport : boolean,
     supportsPopups : boolean,
     supportedNativeBrowser : boolean,
-    experience : string
+    experience : string,
+    showPayLabel : boolean
 };
 
 export const DEFAULT_STYLE = {
@@ -658,7 +660,8 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
         applePaySupport = false,
         supportsPopups = false,
         supportedNativeBrowser = false,
-        experience = ''
+        experience = '',
+        showPayLabel
     } = props;
 
     const { country, lang } = locale;
@@ -701,5 +704,5 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
 
     return { clientID, fundingSource, style, locale, remembered, env, fundingEligibility, platform, clientAccessToken,
         buttonSessionID, commit, sessionID, nonce, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, personalization, content, wallet, flow,
-        experiment, vault, userIDToken, applePay, applePaySupport, supportsPopups, supportedNativeBrowser, experience };
+        experiment, vault, userIDToken, applePay, applePaySupport, supportsPopups, supportedNativeBrowser, experience, showPayLabel };
 }

package/src/ui/buttons/styles/color.js

@@ -62,6 +62,140 @@ export const buttonColorStyle = `
         background: #008CFF;
     }
 
+    /* For APM funding sources, default button color to be defined by payment scheme branding guidelines */
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BLIK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #2C2E2F;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BANCONTACT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: linear-gradient(to right, #1E3764, #005AB9);
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #2C2E2F;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETOBANCARIO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #2C2E2F;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #C8036F;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.GIROPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #003A7D;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.IDEAL }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #2C2E2F;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MERCADOPAGO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #1D2647;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MULTIBANCO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #1866AB;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #1A4B67;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.OXXO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #D8232A;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.P24 }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #D03238;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SOFORT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #393A41;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.TRUSTLY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #003140;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VERKKOPANKKI }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #005596;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #4D4D4D;
+    }
+
+    /* APM button hover actions */
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BANCONTACT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BLIK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETOBANCARIO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.GIROPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.IDEAL }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MERCADOPAGO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MULTIBANCO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.OXXO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.P24 }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SOFORT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.TRUSTLY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VERKKOPANKKI }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover {
+        filter: brightness(1.2);
+    }
+
+    /* APM button on focus actions */
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BLIK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BANCONTACT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETOBANCARIO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.GIROPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.IDEAL }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MERCADOPAGO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MULTIBANCO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.OXXO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.P24 }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SOFORT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.TRUSTLY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VERKKOPANKKI }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus {
+        outline: none;
+    }
+
+    /* APM button after focus actions */
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BLIK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BANCONTACT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETOBANCARIO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.GIROPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.IDEAL }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MERCADOPAGO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MULTIBANCO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.OXXO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.P24 }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SOFORT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.TRUSTLY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VERKKOPANKKI }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after {
+        content: '';
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        bottom: 5px;
+        left: 5px;
+        border: 0.125rem solid #009cde;
+        border-radius: inherit;
+        box-shadow: 0 0 0 0.5rem #0000a6;
+        pointer-events: none;
+    }
+
     @media (hover:hover) {
         .${ CLASS.BUTTON }.${ CLASS.COLOR }-${ BUTTON_COLOR.BLUE }:hover {
             filter: brightness(0.95);

package/src/zoid/payment-fields/component.jsx

@@ -122,6 +122,32 @@ export function getPaymentFieldsComponent() : PaymentFieldsComponent {
                     required: false
                 },
 
+                onError: {
+                    type:     'function',
+                    required: false
+                },
+
+                onContinue: {
+                    type:     'function',
+                    required: false
+                },
+
+                onClose: {
+                    type:     'function',
+                    required: false
+                },
+
+                showActionButtons: {
+                    type:       'boolean',
+                    queryParam: true,
+                    required:   false
+                },
+
+                onFieldsClose: {
+                    type:     'function',
+                    required: false
+                },
+
                 buyerCountry: {
                     type:       'string',
                     queryParam: true,