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

package/README.md

@@ -123,3 +123,11 @@ Checks to make sure that the compiled & gzipped bundle doesn't exceed the recomm
 ## Releasing
 
 This package is published weekly, **Every Wednesday**. Please [view our Changelog](CHANGELOG.md) to stay updated with bug fixes and new features.
+
+## Logo Strategy with paypal-sdk-logos
+
+Our usage of svg logos is optimized for performance. Here's how it works for the two-phased render for the Buttons component:
+
+- First Render - Buttons are first rendered on the client-side inside an `<iframe>` tag using the code bundled inside the JS SDK script. This `<iframe>` tag has no src attribute at this point in the rendering life cycle. We leverage the `__WEB__` global variable to determine if we are rendering client-side or server-side. The `__WEB__` global variable will equal true when rendering client-side. To minimize the bundle size of the JS SDK script, we load these svg logos from the www.paypalobjects.com CDN as external images (ex: `<PayPalLogoExternalImage />`).
+
+- Second Render - The second phase of rendering happens on the server-side. This `<iframe>` tag is fully rendered by setting the src attribute and making an http request to the server to populate the contents which are securely hosted by PayPal's servers on www.paypal.com. The same code in this repo is used to render the buttons on the server-side. To ensure there are no issues with the logos, we have decided to inline the svg code for this server-side render (ex: `<PayPalLogoInlineSVG />`). The `__WEB__` global variable is set to false to control what code executes during the server render.

package/__sdk__.js

@@ -1,89 +1,89 @@
 /* @flow */
 /* eslint unicorn/filename-case: 0, import/unambiguous: 0, import/no-commonjs: 0 */
 
-const { FUNDING, CARD } = require('@paypal/sdk-constants');
+const { FUNDING, CARD } = require("@paypal/sdk-constants");
 
-const globals = require('./globals');
+const globals = require("./globals");
 
 const SMART_FUNDING_SOURCES = [
-    FUNDING.PAYPAL,
-    FUNDING.VENMO,
-    FUNDING.ITAU,
-    FUNDING.CREDIT,
-    FUNDING.PAYLATER,
-    FUNDING.APPLEPAY,
-    FUNDING.IDEAL,
-    FUNDING.SEPA,
-    FUNDING.BANCONTACT,
-    FUNDING.GIROPAY,
-    FUNDING.EPS,
-    FUNDING.SOFORT,
-    FUNDING.MYBANK,
-    FUNDING.BLIK,
-    FUNDING.P24,
-    FUNDING.ZIMPLER,
-    FUNDING.WECHATPAY,
-    FUNDING.PAYU,
-    FUNDING.VERKKOPANKKI,
-    FUNDING.TRUSTLY,
-    FUNDING.OXXO,
-    FUNDING.BOLETO,
-    FUNDING.BOLETOBANCARIO,
-    FUNDING.MULTIBANCO,
-    FUNDING.MAXIMA,
-    FUNDING.MERCADOPAGO,
-    FUNDING.SATISPAY,
-    FUNDING.PAIDY,
-    FUNDING.CARD
+  FUNDING.PAYPAL,
+  FUNDING.VENMO,
+  FUNDING.ITAU,
+  FUNDING.CREDIT,
+  FUNDING.PAYLATER,
+  FUNDING.APPLEPAY,
+  FUNDING.IDEAL,
+  FUNDING.SEPA,
+  FUNDING.BANCONTACT,
+  FUNDING.GIROPAY,
+  FUNDING.EPS,
+  FUNDING.SOFORT,
+  FUNDING.MYBANK,
+  FUNDING.BLIK,
+  FUNDING.P24,
+  FUNDING.ZIMPLER,
+  FUNDING.WECHATPAY,
+  FUNDING.PAYU,
+  FUNDING.VERKKOPANKKI,
+  FUNDING.TRUSTLY,
+  FUNDING.OXXO,
+  FUNDING.BOLETO,
+  FUNDING.BOLETOBANCARIO,
+  FUNDING.MULTIBANCO,
+  FUNDING.MAXIMA,
+  FUNDING.MERCADOPAGO,
+  FUNDING.SATISPAY,
+  FUNDING.PAIDY,
+  FUNDING.CARD,
 ];
 
 const SMART_CARDS = [
-    CARD.VISA,
-    CARD.MASTERCARD,
-    CARD.AMEX,
-    CARD.DISCOVER,
-    CARD.HIPER,
-    CARD.ELO,
-    CARD.JCB
+  CARD.VISA,
+  CARD.MASTERCARD,
+  CARD.AMEX,
+  CARD.DISCOVER,
+  CARD.HIPER,
+  CARD.ELO,
+  CARD.JCB,
 ];
 
 module.exports = {
-    'actions': {
-        automatic: true,
-        entry:          './src/interface/actions',
-    },
-    'buttons': {
-        entry:          './src/interface/button',
-        setupHandler:   'setupButtons',
-        globals,
-        fundingSources: SMART_FUNDING_SOURCES,
-        cards:          SMART_CARDS
-    },
-    'marks': {
-        entry:          './src/interface/marks',
-        globals,
-        fundingSources: SMART_FUNDING_SOURCES,
-        cards:          SMART_CARDS
-    },
-    'wallet': {
-        entry: './src/interface/wallet',
-        globals
-    },
-    // @deprecated - renamed to payment-fields to be removed
-    'fields': {
-        entry:          './src/interface/fields',
-        globals,
-        fundingSources: SMART_FUNDING_SOURCES,
-        cards:          SMART_CARDS
-    },
-    'payment-fields': {
-        entry:          './src/interface/payment-fields',
-        globals,
-        fundingSources: SMART_FUNDING_SOURCES,
-        cards:          SMART_CARDS
-    },
-    'card-fields': {
-        entry:          './src/interface/card-fields',
-        globals
-    }
+  actions: {
+    automatic: true,
+    entry: "./src/interface/actions",
+  },
+  buttons: {
+    entry: "./src/interface/button",
+    setupHandler: "setupButtons",
+    globals,
+    fundingSources: SMART_FUNDING_SOURCES,
+    cards: SMART_CARDS,
+  },
+  marks: {
+    entry: "./src/interface/marks",
+    globals,
+    fundingSources: SMART_FUNDING_SOURCES,
+    cards: SMART_CARDS,
+  },
+  wallet: {
+    entry: "./src/interface/wallet",
+    globals,
+  },
+  // @deprecated - renamed to payment-fields to be removed
+  fields: {
+    entry: "./src/interface/fields",
+    globals,
+    fundingSources: SMART_FUNDING_SOURCES,
+    cards: SMART_CARDS,
+  },
+  "payment-fields": {
+    entry: "./src/interface/payment-fields",
+    globals,
+    fundingSources: SMART_FUNDING_SOURCES,
+    cards: SMART_CARDS,
+  },
+  "card-fields": {
+    entry: "./src/interface/card-fields",
+    globals,
+  },
 };