paypal-checkout - npm Package Compare versions

Comparing version 4.0.314 to 4.0.315

package.json

 {
   "name": "paypal-checkout",
-  "version": "4.0.314",
+  "version": "4.0.315",
   "description": "PayPal Checkout components, for integrating checkout products.",
@@ -5,0 +5,0 @@ "main": "index.js",

src/button/component.jsx

@@ -16,3 +16,3 @@ /* @flow */
 import { SOURCE, ENV, FPTI, FUNDING, BUTTON_LABEL, BUTTON_COLOR,
-    BUTTON_SIZE, BUTTON_SHAPE, BUTTON_LAYOUT, COUNTRY } from '../constants';
+    BUTTON_SIZE, BUTTON_SHAPE, BUTTON_LAYOUT, COUNTRY, FUNDING_BRAND_LABEL } from '../constants';
 import { redirect as redir, checkRecognizedBrowser,
@@ -186,3 +186,4 @@ getBrowserLocale, getSessionID, request, getScriptVersion,
         iframe: {
-            allowpaymentrequest: 'allowpaymentrequest'
+            allowpaymentrequest: 'allowpaymentrequest',
+            title:               FUNDING_BRAND_LABEL.PAYPAL
         }
@@ -189,0 +190,0 @@ },

src/button/config.js

 /* @flow */
 /* eslint no-template-curly-in-string: off, max-lines: off */
 
-import { FUNDING, DEFAULT, COUNTRY, BUTTON_LABEL, BUTTON_COLOR, BUTTON_LOGO_COLOR, BUTTON_SIZE,
+import { FUNDING, FUNDING_BRAND_LABEL, DEFAULT, COUNTRY, BUTTON_LABEL, BUTTON_COLOR, BUTTON_LOGO_COLOR, BUTTON_SIZE,
     BUTTON_TAGLINE_COLOR, BUTTON_SHAPE, BUTTON_LAYOUT, BUTTON_LOGO } from '../constants';
@@ -9,3 +9,4 @@
     [ string ] : {
-        colors? : $ReadOnlyArray<$Values<typeof BUTTON_COLOR>>
+        colors? : $ReadOnlyArray<$Values<typeof BUTTON_COLOR>>,
+        title? : string
     }
@@ -115,3 +116,5 @@ };
         allowPrimaryVertical:   true,
-        allowPrimaryHorizontal: true
+        allowPrimaryHorizontal: true,
+        
+        title: `${ FUNDING_BRAND_LABEL.PAYPAL }`
     },
@@ -209,3 +212,5 @@
 
-        allowFundingIcons: false
+        allowFundingIcons: false,
+    
+        title: `${ FUNDING_BRAND_LABEL.CREDIT }`
     },
@@ -212,0 +217,0 @@

src/button/template/componentTemplate.jsx

@@ -7,4 +7,4 @@ // eslint-disable-line max-lines
 
-import { BUTTON_SIZE, BUTTON_BRANDING, BUTTON_NUMBER, BUTTON_LOGO_COLOR, BUTTON_LABEL, BUTTON_LAYOUT, ENV, ATTRIBUTE, FUNDING } from '../../constants';
-import { getButtonConfig, labelToFunding, fundingToDefaultLabel } from '../config';
+import { BUTTON_SIZE, BUTTON_BRANDING, BUTTON_NUMBER, BUTTON_LOGO_COLOR, BUTTON_LABEL, BUTTON_LAYOUT, ENV, ATTRIBUTE, FUNDING, FUNDING_BRAND_LABEL } from '../../constants';
+import { getButtonConfig, labelToFunding, fundingToDefaultLabel, BUTTON_CONFIG } from '../config';
 import { normalizeProps } from '../props';
@@ -259,4 +259,3 @@ import { jsxToHTML, type JsxHTMLNode, type ChildType, jsxRender } from '../../lib/jsx';
                     class={ `${ CLASS.LOGO } ${ CLASS.LOGO }-${ name } ${ CLASS.LOGO }-${ color }` }
-                    src={ `data:image/svg+xml;base64,${ base64encode(logo.toString()) }` }
-                    alt={ name } />
+                    src={ `data:image/svg+xml;base64,${ base64encode(logo.toString()) }` } />
             );
@@ -323,2 +322,20 @@ },
 
+export function determineButtonTitle({ locale, label, branding } : { label : $Values<typeof BUTTON_LABEL>, locale : Object, branding : boolean }) : string {
+    const localeContent = getLocaleContent(locale);
+    const labelContent = localeContent && localeContent[label];
+    
+    if (labelContent) {
+        const regex = /({logo:(pp|paypal)})+(\s)*({logo:(pp|paypal)})*/;
+        let str = labelContent.replace(regex, FUNDING_BRAND_LABEL.PAYPAL);
+        // removes PayPal from unbranded BuyNow button
+        if (label === BUTTON_LABEL.BUYNOW && !branding) {
+            str = str.replace(FUNDING_BRAND_LABEL.PAYPAL, '');
+        }
+        return str;
+    }
+    
+    return label;
+    
+}
+
 function renderButton({ size, label, color, locale, branding, multiple, layout, shape, source, funding, tagline, i, env, cards, installmentperiod, checkoutCustomization } :
@@ -330,3 +347,3 @@ { size : $Values<typeof BUTTON_SIZE>, label : $Values<typeof BUTTON_LABEL>, color : string, branding : boolean, locale : Object, multiple : boolean, layout : $Values<typeof BUTTON_LAYOUT>, shape : string, funding : FundingSelection, tagline : boolean, source : FundingSource, i : number, env : string, cards : $ReadOnlyArray<string>, checkoutCustomization : ?CheckoutCustomizationType, installmentperiod : number }) : JsxHTMLNode {
     const buttonLabel = determineLabel({ label, source, multiple, layout });
-
+    
     // If the determined button label matches up with the label passed by the merchant, use
@@ -363,3 +380,8 @@ // the label template, otherwise use the logo template.
     contentText = renderContent(contentText, { label, locale, color, branding, logoColor, funding, env, cards, dynamicContent, layout, size });
-
+    
+    
+    // button title used to set aria-label for the button div -- a11y
+    const title = BUTTON_CONFIG[label].title;
+    const buttonTitle = (typeof  title === 'string') ? title : determineButtonTitle({ locale, label, branding });
+    
     // Define a list of funding options that will not need a tabindex
@@ -369,3 +391,3 @@ const hasTabIndex = [
     ].indexOf(source) === -1;
-
+    const role = source === FUNDING.CARD ? {} : { role: 'button' };
     return (
@@ -377,4 +399,5 @@ <div
             class={ `${ CLASS.BUTTON } ${ CLASS.NUMBER }-${ i } ${ getCommonButtonClasses({ layout, shape, branding, multiple, env }) } ${ getButtonClasses({ label, color, logoColor }) }` }
-            role='button'
-            tabindex={ hasTabIndex && 0 }>
+            { ...role }
+            tabindex={ hasTabIndex && 0 }
+            aria-label={ buttonTitle }>
             { source === FUNDING.CARD ? contentText : renderButtonTextDiv({ contentText, personalizedButtonText, impression, branding, allowedAnimation }) }
@@ -381,0 +404,0 @@ </div>

src/constants/funding.js

@@ -27,2 +27,7 @@ /* @flow */
 
+export const FUNDING_BRAND_LABEL = {
+    PAYPAL:         'PayPal',
+    CREDIT:         'PayPal Credit'
+};
+
 export const CARD = {
@@ -29,0 +34,0 @@ VISA:        'visa',

src/lib/errors.js

@@ -56,2 +56,3 @@ /* @flow */
 
+    // eslint-disable-next-line compat/compat
     if (window.opener && window.parent !== window) {
@@ -58,0 +59,0 @@ warn(`window_has_opener_and_parent`);

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Lines of code

58421

increased by0.07%

Worsened metrics

Total package byte prevSize

3937071

decreased by-0.26%

Number of package files

177

decreased by-1.12%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes