@paypal/checkout-components 5.0.256-alpha.1 → 5.0.257

package/src/funding/paypal/template.jsx

@@ -1,420 +1,515 @@
 /* @flow */
 /** @jsx node */
 
-import { node, Fragment, Style, type ChildType } from '@krakenjs/jsx-pragmatic/src';
-import { PPLogo, PayPalLogo, CreditLogo, CreditMark, PayPalMark, GlyphCard, GlyphBank, LOGO_CLASS } from '@paypal/sdk-logos/src';
-import { FUNDING, WALLET_INSTRUMENT } from '@paypal/sdk-constants/src';
+import {
+  node,
+  Fragment,
+  Style,
+  type ChildType,
+} from "@krakenjs/jsx-pragmatic/src";
+import {
+  PPLogoExternalImage,
+  PPLogoInlineSVG,
+  PayPalLogoExternalImage,
+  PayPalLogoInlineSVG,
+  CreditLogoExternalImage,
+  CreditLogoInlineSVG,
+  CreditMarkExternalImage,
+  CreditMarkInlineSVG,
+  PayPalMarkExternalImage,
+  PayPalMarkInlineSVG,
+  GlyphCardExternalImage,
+  GlyphCardInlineSVG,
+  GlyphBankExternalImage,
+  GlyphBankInlineSVG,
+  LOGO_CLASS,
+} from "@paypal/sdk-logos/src";
+import { FUNDING, WALLET_INSTRUMENT } from "@paypal/sdk-constants/src";
 
 import {
-    type LogoOptions,
-    type LabelOptions,
-    type DesignExperimentLabelOptions,
-    type WalletLabelOptions,
-    type TagOptions,
-    BasicLabel
-} from '../common';
-import { CLASS, ATTRIBUTE, BUTTON_LAYOUT } from '../../constants';
-import { componentContent } from '../content';
-import { Text, Space, PlaceHolder } from '../../ui/text';
-import { TrackingBeacon } from '../../ui/tracking';
-import { HIDDEN, VISIBLE, COMPRESSED, EXPANDED } from '../../ui/buttons/styles/labels';
-
-import css from './style.scoped.scss';
-
-export function Logo({ logoColor } : LogoOptions) : ChildType {
-    return (
-        <PayPalLogo logoColor={ logoColor } loadFromCDN={ __WEB__ } />
-    );
+  type LogoOptions,
+  type LabelOptions,
+  type DesignExperimentLabelOptions,
+  type WalletLabelOptions,
+  type TagOptions,
+  BasicLabel,
+} from "../common";
+import { CLASS, ATTRIBUTE, BUTTON_LAYOUT } from "../../constants";
+import { componentContent } from "../content";
+import { Text, Space, PlaceHolder } from "../../ui/text";
+import { TrackingBeacon } from "../../ui/tracking";
+import {
+  HIDDEN,
+  VISIBLE,
+  COMPRESSED,
+  EXPANDED,
+} from "../../ui/buttons/styles/labels";
+
+import css from "./style.scoped.scss";
+
+export function Logo({ logoColor }: LogoOptions): ChildType {
+  return __WEB__ ? (
+    <PayPalLogoExternalImage logoColor={logoColor} />
+  ) : (
+    <PayPalLogoInlineSVG logoColor={logoColor} />
+  );
 }
 
-function getPersonalizationText({ personalization, layout, multiple } : LabelOptions) : ?string {
-    const personalizationText = personalization && personalization.buttonText && personalization.buttonText.text;
-
-    if (!personalizationText) {
-        return;
-    }
-
-    if (personalizationText.match(/[{}]/)) {
-        return;
-    }
-
-    if (layout === BUTTON_LAYOUT.HORIZONTAL && multiple) {
-        return;
-    }
-
-    return personalizationText;
+function getPersonalizationText({
+  personalization,
+  layout,
+  multiple,
+}: LabelOptions): ?string {
+  const personalizationText =
+    personalization &&
+    personalization.buttonText &&
+    personalization.buttonText.text;
+
+  if (!personalizationText) {
+    return;
+  }
+
+  if (personalizationText.match(/[{}]/)) {
+    return;
+  }
+
+  if (layout === BUTTON_LAYOUT.HORIZONTAL && multiple) {
+    return;
+  }
+
+  return personalizationText;
 }
 
-function getPersonalizationTracker({ personalization } : LabelOptions) : ?string {
-    const personalizationTracker = personalization && personalization.buttonText && personalization.buttonText.tracking && personalization.buttonText.tracking.impression;
+function getPersonalizationTracker({ personalization }: LabelOptions): ?string {
+  const personalizationTracker =
+    personalization &&
+    personalization.buttonText &&
+    personalization.buttonText.tracking &&
+    personalization.buttonText.tracking.impression;
 
-    if (!personalizationTracker) {
-        return;
-    }
+  if (!personalizationTracker) {
+    return;
+  }
 
-    return personalizationTracker;
+  return personalizationTracker;
 }
 
-function getButtonPersonalizationStyle(opts : LabelOptions) : ?ChildType {
-    if (__TEST__) {
-        return null;
-    }
+function getButtonPersonalizationStyle(opts: LabelOptions): ?ChildType {
+  if (__TEST__) {
+    return null;
+  }
 
-    const { tagline } = opts;
+  const { tagline } = opts;
 
-    const personalizationText = !tagline && getPersonalizationText(opts);
+  const personalizationText = !tagline && getPersonalizationText(opts);
 
-    const MIN_WIDTH = 300;
-    const PERSONALIZATION_DURATION = 5;
+  const MIN_WIDTH = 300;
+  const PERSONALIZATION_DURATION = 5;
 
-    const PAYPAL_BUTTON = `.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAYPAL }]`;
+  const PAYPAL_BUTTON = `.${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYPAL}]`;
 
-    return (
-        <style innerHTML={ `
-            @media only screen and (max-width: ${ MIN_WIDTH }px) {
-                .${ CLASS.DOM_READY } ${ PAYPAL_BUTTON } .${ CLASS.PERSONALIZATION_TEXT } {
-                    ${ HIDDEN }
+  return (
+    <style
+      innerHTML={`
+            @media only screen and (max-width: ${MIN_WIDTH}px) {
+                .${CLASS.DOM_READY} ${PAYPAL_BUTTON} .${
+        CLASS.PERSONALIZATION_TEXT
+      } {
+                    ${HIDDEN}
                 }
             }
 
-            @media only screen and (min-width: ${ MIN_WIDTH }px) {
-                .${ CLASS.DOM_READY } ${ PAYPAL_BUTTON } .${ LOGO_CLASS.LOGO }.${ LOGO_CLASS.LOGO }-${ FUNDING.PAYPAL } {
-                    animation: ${ personalizationText ? `toggle-paypal-logo ${ PERSONALIZATION_DURATION }s 0s forwards` : `none` };
+            @media only screen and (min-width: ${MIN_WIDTH}px) {
+                .${CLASS.DOM_READY} ${PAYPAL_BUTTON} .${LOGO_CLASS.LOGO}.${
+        LOGO_CLASS.LOGO
+      }-${FUNDING.PAYPAL} {
+                    animation: ${
+                      personalizationText
+                        ? `toggle-paypal-logo ${PERSONALIZATION_DURATION}s 0s forwards`
+                        : `none`
+                    };
                 }
 
-                .${ CLASS.DOM_READY } ${ PAYPAL_BUTTON } .${ CLASS.TEXT }:not(.${ CLASS.PERSONALIZATION_TEXT }):not(.${ CLASS.HIDDEN }) {
-                    ${ COMPRESSED }
-                    ${ VISIBLE }
-                    animation: ${ personalizationText ? `show-text-delayed ${ PERSONALIZATION_DURATION }s 0s forwards` : `show-text 1s 0s forwards` };
+                .${CLASS.DOM_READY} ${PAYPAL_BUTTON} .${CLASS.TEXT}:not(.${
+        CLASS.PERSONALIZATION_TEXT
+      }):not(.${CLASS.HIDDEN}) {
+                    ${COMPRESSED}
+                    ${VISIBLE}
+                    animation: ${
+                      personalizationText
+                        ? `show-text-delayed ${PERSONALIZATION_DURATION}s 0s forwards`
+                        : `show-text 1s 0s forwards`
+                    };
                 }
 
-                .${ CLASS.DOM_READY } ${ PAYPAL_BUTTON } .${ CLASS.PERSONALIZATION_TEXT } {
-                    ${ COMPRESSED }
-                    ${ VISIBLE }
-                    animation: show-personalization-text ${ PERSONALIZATION_DURATION }s 0s forwards;
+                .${CLASS.DOM_READY} ${PAYPAL_BUTTON} .${
+        CLASS.PERSONALIZATION_TEXT
+      } {
+                    ${COMPRESSED}
+                    ${VISIBLE}
+                    animation: show-personalization-text ${PERSONALIZATION_DURATION}s 0s forwards;
                 }
             }
 
             @keyframes toggle-paypal-logo {
-                0% { ${ EXPANDED } }
-                15% { ${ COMPRESSED } }
-                85% { ${ COMPRESSED } }
-                100% { ${ EXPANDED } }
+                0% { ${EXPANDED} }
+                15% { ${COMPRESSED} }
+                85% { ${COMPRESSED} }
+                100% { ${EXPANDED} }
             }
 
             @keyframes show-text-delayed {
-                0% { ${ COMPRESSED } }
-                85% { ${ COMPRESSED } }
-                100% { ${ EXPANDED } }
+                0% { ${COMPRESSED} }
+                85% { ${COMPRESSED} }
+                100% { ${EXPANDED} }
             }
 
             @keyframes show-personalization-text {
-                0% { ${ COMPRESSED } }
-                15% { ${ COMPRESSED } }
-                25% { ${ EXPANDED } }
-                70% { ${ EXPANDED } }
-                85% { ${ COMPRESSED } }
-                100% { ${ COMPRESSED } }
+                0% { ${COMPRESSED} }
+                15% { ${COMPRESSED} }
+                25% { ${EXPANDED} }
+                70% { ${EXPANDED} }
+                85% { ${COMPRESSED} }
+                100% { ${COMPRESSED} }
             }
-        ` } />
-    );
+        `}
+    />
+  );
 }
 
-function ButtonPersonalization(opts : LabelOptions) : ?ChildType {
-    if (__WEB__) {
-        return;
-    }
-
-    const { nonce, tagline, label } = opts;
-
-    if (tagline || !label) {
-        return;
-    }
-
-    const personalizationText = getPersonalizationText(opts);
-    const personalizationTracker = getPersonalizationTracker(opts);
-
-    if (!personalizationText) {
-        return;
-    }
-
-    return (
-        <Fragment>
-            <Text className={ [ CLASS.PERSONALIZATION_TEXT ] } optional={ 2 }>{ personalizationText }</Text>
-            {
-                personalizationTracker &&
-                    <TrackingBeacon url={ personalizationTracker } nonce={ nonce } />
-            }
-            {
-                getButtonPersonalizationStyle(opts)
-            }
-        </Fragment>
-
-    );
+function ButtonPersonalization(opts: LabelOptions): ?ChildType {
+  if (__WEB__) {
+    return;
+  }
+
+  const { nonce, tagline, label } = opts;
+
+  if (tagline || !label) {
+    return;
+  }
+
+  const personalizationText = getPersonalizationText(opts);
+  const personalizationTracker = getPersonalizationTracker(opts);
+
+  if (!personalizationText) {
+    return;
+  }
+
+  return (
+    <Fragment>
+      <Text className={[CLASS.PERSONALIZATION_TEXT]} optional={2}>
+        {personalizationText}
+      </Text>
+      {personalizationTracker && (
+        <TrackingBeacon url={personalizationTracker} nonce={nonce} />
+      )}
+      {getButtonPersonalizationStyle(opts)}
+    </Fragment>
+  );
 }
 
-
-export function Label(opts : LabelOptions) : ChildType {
-    return (
-        <Fragment>
-            <BasicLabel { ...opts } />
-            <ButtonPersonalization { ...opts } />
-        </Fragment>
-    );
+export function Label(opts: LabelOptions): ChildType {
+  return (
+    <Fragment>
+      <BasicLabel {...opts} />
+      <ButtonPersonalization {...opts} />
+    </Fragment>
+  );
 }
 
-export function DesignExperimentLabel(opts : DesignExperimentLabelOptions) : ChildType {
-    const { buttonDesignComponent, ...updatedOpts } = opts;
-    const basicLabel = (<BasicLabel { ...updatedOpts } />);
-    const buttonPersonalization = (<ButtonPersonalization { ...updatedOpts } />);
-    return (
-        <Fragment>
-            { basicLabel }
-            { buttonDesignComponent }
-            { buttonPersonalization }
-        </Fragment>
-    );
+export function DesignExperimentLabel(
+  opts: DesignExperimentLabelOptions
+): ChildType {
+  const { buttonDesignComponent, ...updatedOpts } = opts;
+  const basicLabel = <BasicLabel {...updatedOpts} />;
+  const buttonPersonalization = <ButtonPersonalization {...updatedOpts} />;
+  return (
+    <Fragment>
+      {basicLabel}
+      {buttonDesignComponent}
+      {buttonPersonalization}
+    </Fragment>
+  );
 }
 
-export function WalletLabelOld(opts : WalletLabelOptions) : ?ChildType {
-    const { logoColor, instrument, locale, content, commit } = opts;
+export function WalletLabelOld(opts: WalletLabelOptions): ?ChildType {
+  const { logoColor, instrument, locale, content, commit } = opts;
 
-    if (__WEB__) {
-        return;
-    }
+  if (__WEB__) {
+    return;
+  }
 
-    if (!instrument) {
-        throw new Error(`Expected instrument`);
-    }
+  if (!instrument) {
+    throw new Error(`Expected instrument`);
+  }
 
-    let logo;
+  let logo;
 
-    if (instrument.logoUrl) {
-        logo = <img class='card-art' src={ instrument.logoUrl } />;
-    } else if (instrument.type === WALLET_INSTRUMENT.CARD) {
-        logo = <GlyphCard logoColor={ logoColor } loadFromCDN={ __WEB__ } />;
-    } else if (instrument.type === WALLET_INSTRUMENT.BANK) {
-        logo = <GlyphBank logoColor={ logoColor } loadFromCDN={ __WEB__ } />;
-    } else if (instrument.type === WALLET_INSTRUMENT.CREDIT) {
-        logo = <CreditLogo locale={ locale } logoColor={ logoColor } loadFromCDN={ __WEB__ } />;
-    }
-
-    return (
-        <Style css={ css }>
-            <div class='wallet-label'>
-                <div class='paypal-mark'>
-                    <PPLogo logoColor={ logoColor } loadFromCDN={ __WEB__ } />
-                </div>
-                {
-                    (instrument.oneClick && commit && content) &&
-                        <div class='pay-label'>
-                            <Space />
-                            <Text>{ content.payNow }</Text>
-                        </div>
-                }
-                <div class='paypal-wordmark'>
-                    <Space />
-                    <PayPalLogo logoColor={ logoColor } loadFromCDN={ __WEB__ } />
-                </div>
-                <div class='divider'>|</div>
-                {
-                    logo &&
-                        <div class='logo' optional>
-                            { logo }
-                            <Space />
-                        </div>
-                }
-                <div class='label'>
-                    <Text className={ [ 'limit' ] }>
-                        { instrument.label }
-                    </Text>
-                </div>
-            </div>
-        </Style>
+  if (instrument.logoUrl) {
+    logo = <img class="card-art" src={instrument.logoUrl} />;
+  } else if (instrument.type === WALLET_INSTRUMENT.CARD) {
+    logo = __WEB__ ? (
+      <GlyphCardExternalImage logoColor={logoColor} />
+    ) : (
+      <GlyphCardInlineSVG logoColor={logoColor} />
     );
-}
-
-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>
+  } else if (instrument.type === WALLET_INSTRUMENT.BANK) {
+    logo = __WEB__ ? (
+      <GlyphBankExternalImage logoColor={logoColor} />
+    ) : (
+      <GlyphBankInlineSVG logoColor={logoColor} />
     );
-}
-
-function ShowInstrumentsOnFile(opts) : ?ChildType {
-    const { instrument, textColor, logo, label, content } = opts;
-
-    return (
-        <div class='show-instruments-on-file'>
-            {
-                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='fi-container'>
-                            <div class='fi-logo'>
-                                {
-                                    (instrument && logo)
-                                        ? logo
-                                        : <Text><PlaceHolder chars={ 4 } color={ textColor } /></Text>
-                                }
-                            </div>
-                            <div class='fi-label'>
-                                <Space />
-                                {
-                                    (instrument && label)
-                                        ? <Text>{ label }</Text>
-                                        : <Text><PlaceHolder chars={ 6 } color={ textColor } /></Text>
-                                }
-                            </div>
-                        </div>
-                    )
-            }
-        </div>
+  } else if (instrument.type === WALLET_INSTRUMENT.CREDIT) {
+    logo = __WEB__ ? (
+      <CreditLogoExternalImage locale={locale} logoColor={logoColor} />
+    ) : (
+      <CreditLogoInlineSVG locale={locale} logoColor={logoColor} />
     );
+  }
+
+  return (
+    <Style css={css}>
+      <div class="wallet-label">
+        <div class="paypal-mark">
+          {__WEB__ ? (
+            <PPLogoExternalImage logoColor={logoColor} />
+          ) : (
+            <PPLogoInlineSVG logoColor={logoColor} />
+          )}
+        </div>
+        {instrument.oneClick && commit && content && (
+          <div class="pay-label">
+            <Space />
+            <Text>{content.payNow}</Text>
+          </div>
+        )}
+        <div class="paypal-wordmark">
+          <Space />
+          {__WEB__ ? (
+            <PayPalLogoExternalImage logoColor={logoColor} />
+          ) : (
+            <PayPalLogoInlineSVG logoColor={logoColor} />
+          )}
+        </div>
+        <div class="divider">|</div>
+        {logo && (
+          <div class="logo" optional>
+            {logo}
+            <Space />
+          </div>
+        )}
+        <div class="label">
+          <Text className={["limit"]}>{instrument.label}</Text>
+        </div>
+      </div>
+    </Style>
+  );
 }
 
-export function WalletLabel(opts : WalletLabelOptions) : ?ChildType {
-    const { logoColor, instrument, content, commit, vault, textColor, fundingSource, showPayLabel } = opts;
-
-    if (instrument && !instrument.type) {
-        return WalletLabelOld(opts);
-    }
-
-    let logo;
-    let label;
-    let branded;
-
-    if (instrument && typeof instrument.branded === 'boolean') {
-        branded = instrument.branded;
-    } else if (fundingSource === FUNDING.PAYPAL || fundingSource === FUNDING.CREDIT) {
-        branded = true;
-    } else if (fundingSource === FUNDING.CARD) {
-        branded = false;
-    } else {
-        branded = true;
-    }
-
-    if (instrument) {
-        if (instrument.type === WALLET_INSTRUMENT.CARD && instrument.label) {
-            logo = instrument.logoUrl
-                ? <img class='card-art' src={ instrument.logoUrl } />
-                : <GlyphCard logoColor={ logoColor } loadFromCDN={ __WEB__ } />;
-
-            label = instrument.label.replace('••••', '••');
-
-        } else if (instrument.type === WALLET_INSTRUMENT.BANK && instrument.label) {
-            logo = instrument.logoUrl
-                ? <img class='card-art' src={ instrument.logoUrl } />
-                : <GlyphBank logoColor={ logoColor } loadFromCDN={ __WEB__ } />;
-
-            label = instrument.label.replace('••••', '••');
-
-        } else if (instrument.type === WALLET_INSTRUMENT.CREDIT) {
-            logo = <CreditMark loadFromCDN={ __WEB__ } />;
+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>
+  );
+}
 
-            label = content && content.credit;
+function ShowInstrumentsOnFile(opts): ?ChildType {
+  const { instrument, textColor, logo, label, content } = opts;
 
-        } else if (instrument.type === WALLET_INSTRUMENT.BALANCE) {
-            logo = <PayPalMark loadFromCDN={ __WEB__ } />;
+  return (
+    <div class="show-instruments-on-file">
+      {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="fi-container">
+          <div class="fi-logo">
+            {instrument && logo ? (
+              logo
+            ) : (
+              <Text>
+                <PlaceHolder chars={4} color={textColor} />
+              </Text>
+            )}
+          </div>
+          <div class="fi-label">
+            <Space />
+            {instrument && label ? (
+              <Text>{label}</Text>
+            ) : (
+              <Text>
+                <PlaceHolder chars={6} color={textColor} />
+              </Text>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
 
-            label = content && content.balance;
+export function WalletLabel(opts: WalletLabelOptions): ?ChildType {
+  const {
+    logoColor,
+    instrument,
+    content,
+    commit,
+    vault,
+    textColor,
+    fundingSource,
+    showPayLabel,
+  } = opts;
+
+  if (instrument && !instrument.type) {
+    return WalletLabelOld(opts);
+  }
+
+  let logo;
+  let label;
+  let branded;
+
+  if (instrument && typeof instrument.branded === "boolean") {
+    branded = instrument.branded;
+  } else if (
+    fundingSource === FUNDING.PAYPAL ||
+    fundingSource === FUNDING.CREDIT
+  ) {
+    branded = true;
+  } else if (fundingSource === FUNDING.CARD) {
+    branded = false;
+  } else {
+    branded = true;
+  }
+
+  if (instrument) {
+    const cardSVG = __WEB__ ? (
+      <GlyphCardExternalImage logoColor={logoColor} />
+    ) : (
+      <GlyphCardInlineSVG logoColor={logoColor} />
+    );
+    const bankSVG = __WEB__ ? (
+      <GlyphBankExternalImage logoColor={logoColor} />
+    ) : (
+      <GlyphBankInlineSVG logoColor={logoColor} />
+    );
 
-        } else if (instrument.label) {
-            label = instrument.label;
-        }
-    }
+    if (instrument.type === WALLET_INSTRUMENT.CARD && instrument.label) {
+      logo = instrument.logoUrl ? (
+        <img class="card-art" src={instrument.logoUrl} />
+      ) : (
+        cardSVG
+      );
+
+      label = instrument.label.replace("••••", "••");
+    } else if (instrument.type === WALLET_INSTRUMENT.BANK && instrument.label) {
+      logo = instrument.logoUrl ? (
+        <img class="card-art" src={instrument.logoUrl} />
+      ) : (
+        bankSVG
+      );
+
+      label = instrument.label.replace("••••", "••");
+    } else if (instrument.type === WALLET_INSTRUMENT.CREDIT) {
+      logo = __WEB__ ? <CreditMarkExternalImage /> : <CreditMarkInlineSVG />;
 
-    const payNow = Boolean((instrument && instrument.oneClick) && commit && !vault);
+      label = content && content.credit;
+    } else if (instrument.type === WALLET_INSTRUMENT.BALANCE) {
+      logo = __WEB__ ? <PayPalMarkExternalImage /> : <PayPalMarkInlineSVG />;
 
-    const attrs = {};
-    if (payNow) {
-        attrs[ATTRIBUTE.PAY_NOW] = true;
+      label = content && content.balance;
+    } else if (instrument.label) {
+      label = instrument.label;
     }
-
-    return (
-        <Style css={ css }>
-            <div class='wallet-label-new' { ...attrs }>
-                {
-                    branded
-                        ? (
-                            <div class='paypal-mark'>
-                                <PPLogo logoColor={ logoColor } loadFromCDN={ __WEB__ } />
-                                <Space />
-                            </div>
-                        )
-                        : null
-                }
-                {
-                    showPayLabel
-                        ? <ShowPayLabel
-                            instrument={ instrument }
-                            content={ content }
-                            payNow={ payNow }
-                            textColor={ textColor }
-                            logo={ logo }
-                            label={ label }
-                        />
-                        : <ShowInstrumentsOnFile
-                            instrument={ instrument }
-                            textColor={ textColor }
-                            logo={ logo }
-                            label={ label }
-                            content={ content }
-                        />
-                }
-            </div>
-        </Style>
-    );
+  }
+
+  const payNow = Boolean(instrument && instrument.oneClick && commit && !vault);
+
+  const attrs = {};
+  if (payNow) {
+    attrs[ATTRIBUTE.PAY_NOW] = true;
+  }
+
+  return (
+    <Style css={css}>
+      <div class="wallet-label-new" {...attrs}>
+        {branded ? (
+          <div class="paypal-mark">
+            {__WEB__ ? (
+              <PPLogoExternalImage logoColor={logoColor} />
+            ) : (
+              <PPLogoInlineSVG logoColor={logoColor} />
+            )}
+            <Space />
+          </div>
+        ) : null}
+        {showPayLabel ? (
+          <ShowPayLabel
+            instrument={instrument}
+            content={content}
+            payNow={payNow}
+            textColor={textColor}
+            logo={logo}
+            label={label}
+          />
+        ) : (
+          <ShowInstrumentsOnFile
+            instrument={instrument}
+            textColor={textColor}
+            logo={logo}
+            label={label}
+            content={content}
+          />
+        )}
+      </div>
+    </Style>
+  );
 }
 
-export function Tag({ multiple, locale: { lang } } : TagOptions) : ?ChildType {
-    if (__WEB__) {
-        return null;
-    }
+export function Tag({ multiple, locale: { lang } }: TagOptions): ?ChildType {
+  if (__WEB__) {
+    return null;
+  }
 
-    const { DualTag, SaferTag } = componentContent[lang];
+  const { DualTag, SaferTag } = componentContent[lang];
 
-    return (multiple && DualTag)
-        ? <DualTag optional />
-        : <SaferTag optional />;
+  return multiple && DualTag ? <DualTag optional /> : <SaferTag optional />;
 }