@paypal/checkout-components 5.0.236 → 5.0.237

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.236",
+  "version": "5.0.237",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -94,7 +94,7 @@
     "@paypal/common-components": "^1.0.27",
     "@paypal/funding-components": "^1.0.27",
     "@paypal/sdk-client": "^4.0.166",
-    "@paypal/sdk-constants": "^1.0.119",
+    "@paypal/sdk-constants": "^1.0.123",
     "@paypal/sdk-logos": "^1.0.45"
   },
   "lint-staged": {

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/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';
@@ -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 = (
@@ -210,6 +214,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/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,