@lookiero/checkout 9.9.0-beta.0 → 9.9.0-beta.2

package/dist/fake-dependencies/@lookiero/payments-front/index.d.ts

@@ -1,21 +1,23 @@
 import { FC, ForwardRefExoticComponent, PropsWithChildren, RefAttributes } from "react";
+import { PaymentPayload } from "@lookiero/payments-front";
 declare const setPaymentsBridge: () => undefined;
 declare const PaymentsQueryProvider: FC<PropsWithChildren>;
 declare const PaymentInstrumentSelect: FC;
-interface StartLegacyBoxCheckoutCallbackArgs {
-    readonly status: string;
-    readonly final: boolean;
-}
 interface StartLegacyBoxCheckoutFunction {
-    (paymentFlowPayload: unknown, callback: (params: StartLegacyBoxCheckoutCallbackArgs) => Promise<void>): void;
+    (paymentFlowPayload: unknown): void;
 }
 interface PaymentFlowRef {
     readonly startLegacyBoxCheckout: StartLegacyBoxCheckoutFunction;
 }
 declare const paymentFlowRef: PaymentFlowRef;
 declare const PaymentFlow: ForwardRefExoticComponent<RefAttributes<PaymentFlowRef>>;
+interface UsePaymentStatusManagerResult {
+    isLoading: boolean;
+    consumePayload: (callback: (payload: PaymentPayload) => void) => void;
+}
+declare const usePaymentStatusManager: (section: Section) => UsePaymentStatusManagerResult;
 declare enum Section {
     BOX_CHECKOUT = "box-checkout"
 }
 export type { PaymentFlowRef };
-export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, paymentFlowRef };
+export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, paymentFlowRef, usePaymentStatusManager, };

package/dist/fake-dependencies/@lookiero/payments-front/index.js

@@ -4,17 +4,20 @@ const setPaymentsBridge = () => void 0;
 const PaymentsQueryProvider = ({ children }) => children;
 const PaymentInstrumentSelect = () => null;
 const paymentFlowRef = {
-    startLegacyBoxCheckout: async (_paymentFlowPayload, callback) => {
-        await callback({ status: "EXECUTED", final: true });
-    },
+    startLegacyBoxCheckout: async () => { },
 };
 const PaymentFlow = forwardRef((_props, ref) => {
     useImperativeHandle(ref, () => paymentFlowRef, []);
     return null;
 });
 PaymentFlow.displayName = "PaymentFlow";
+const paymentStatusManagerResult = {
+    isLoading: false,
+    consumePayload: (callback) => callback({ success: true }),
+};
+const usePaymentStatusManager = () => paymentStatusManagerResult;
 var Section;
 (function (Section) {
     Section["BOX_CHECKOUT"] = "box-checkout";
 })(Section || (Section = {}));
-export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, paymentFlowRef };
+export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, paymentFlowRef, usePaymentStatusManager, };

package/dist/src/ExpoRoot.js

@@ -1,3 +1,4 @@
+import { PortalProvider } from "@gorhom/portal";
 import { useFonts } from "expo-font";
 import "expo/build/Expo.fx";
 import React, { useCallback, useState } from "react";
@@ -24,7 +25,7 @@ const order = {
     coupon: "MYLOOKIERO",
 };
 const customer = {
-    customerId: "9413fe3a-09fc-4264-905e-040bb7b4ca75",
+    customerId: "d3c2354b-9811-46d4-b2ba-5fba012ed94d",
     country: Country.ES,
     segment: Segment.WOMEN,
     email: "email@example.com",
@@ -41,7 +42,7 @@ const apiUrl = Platform.OS !== "web"
     : __DEV__
         ? "/local-to-dev"
         : "/checkout/api";
-const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NTIwMjgsImV4cCI6MTczOTQ0MTYwMSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTE4IiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6Ijk0MTNmZTNhLTA5ZmMtNDI2NC05MDVlLTA0MGJiN2I0Y2E3NSIsImlhdCI6MTczNjc2MzIwMn0.ZaFu4743f9XR0aK3LgMMhbmRHNloHtC1Sm0FDUtj8B8";
+const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDk0NjYsImV4cCI6MTc0MjQ3MDI5OSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTExIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6ImQzYzIzNTRiLTk4MTEtNDZkNC1iMmJhLTVmYmEwMTJlZDk0ZCIsImlhdCI6MTc0MDA1MTA5OX0.AkuUZTsn9mgplQwatg0dPKyv1Hsc6r267UMahxMH19g";
 const getAuthToken = () => Promise.resolve(authToken);
 const externalTranslationsUrl = Platform.OS !== "web"
     ? "https://backend-for-user.dev.envs.lookiero.tech/api/v2/translations"
@@ -106,13 +107,14 @@ const ExpoRoot = () => {
     });
     const [isAccessible, setIsAccessible] = useState();
     const onNotAccessible = useCallback(() => setIsAccessible(false), []);
-    return fontsLoaded ? (React.createElement(PaymentsQueryProvider, null,
-        React.createElement(EventProvider, null,
-            React.createElement(Aurora, null,
-                isAccessible === false && React.createElement(Text, { heading: true }, "Checkout is not accessible!"),
-                React.createElement(Router, null,
-                    React.createElement(Routes, null,
-                        React.createElement(Route, { path: "/checkout/*", element: React.createElement(Root, { basePath: "/checkout", customer: customer, layout: DummyLayout, locale: locale, order: order, subscription: subscription, useRedirect: useRedirect, onNotAccessible: onNotAccessible }) }),
-                        React.createElement(Route, { element: React.createElement(Navigate, { to: "/checkout", replace: true }), path: "*" }))))))) : null;
+    return fontsLoaded ? (React.createElement(PortalProvider, null,
+        React.createElement(PaymentsQueryProvider, null,
+            React.createElement(EventProvider, null,
+                React.createElement(Aurora, null,
+                    isAccessible === false && React.createElement(Text, { heading: true }, "Checkout is not accessible!"),
+                    React.createElement(Router, null,
+                        React.createElement(Routes, null,
+                            React.createElement(Route, { path: "/checkout/*", element: React.createElement(Root, { basePath: "/checkout", customer: customer, layout: DummyLayout, locale: locale, order: order, subscription: subscription, useRedirect: useRedirect, onNotAccessible: onNotAccessible }) }),
+                            React.createElement(Route, { element: React.createElement(Navigate, { to: "/checkout", replace: true }), path: "*" })))))))) : null;
 };
 export { ExpoRoot };

package/dist/src/infrastructure/ui/views/App.js

@@ -1,15 +1,14 @@
-import { PortalProvider } from "@gorhom/portal";
+import { PortalHost } from "@gorhom/portal";
 import React from "react";
 import { StatusBar } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import { PortalProvider as AuroraPortalProvider } from "@lookiero/aurora";
 import { Notifications } from "@lookiero/sty-psp-notifications";
 import { theme } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 const { colorBgBase } = theme();
 const App = ({ children }) => (React.createElement(SafeAreaProvider, null,
-    React.createElement(PortalProvider, { rootHostName: "Checkout" },
-        React.createElement(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
-        React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID, portalHostName: "Checkout" }),
-        React.createElement(AuroraPortalProvider, null, children))));
+    React.createElement(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
+    React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID, portalHostName: "Checkout" }),
+    React.createElement(PortalHost, { name: "Checkout" }),
+    children));
 export { App };

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-native";
 import { Box, Button, Layout as AuroraLayout, Spinner, Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
+import { Country } from "@lookiero/sty-psp-locale";
 import { Sticky } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -77,13 +78,15 @@ const Checkout = ({ children, layout: Layout, useRedirect }) => {
             React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }] },
                 React.createElement(Box, { size: { L: "2/3" }, style: screen.L && style.desktopListSpacing },
                     React.createElement(View, { style: [style.contentWrapper, screen.L && style.desktopContentWrapper] },
+                        country === Country.NL && (React.createElement(View, { style: style.paymentSelectorNL },
+                            React.createElement(PaymentInstrument, { useRedirect: useRedirect }))),
                         React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
                         checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, testID: "checkout-items-kept" },
                             React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, country: country, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, status: checkoutItem.status, size: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
                                     ? checkoutItem.replacedFor.size
                                     : checkoutItem.productVariant.size })))),
-                        React.createElement(View, { style: style.paymentSelector },
-                            React.createElement(PaymentInstrument, { useRedirect: useRedirect })))),
+                        country !== Country.NL && (React.createElement(View, { style: style.paymentSelector },
+                            React.createElement(PaymentInstrument, { useRedirect: useRedirect }))))),
                 React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L && style.desktopResume] }, pricing ? (React.createElement(View, { style: [style.princingWrapper, !screen.L && style.princingWrapperSmall] },
                     React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0 }),
                     screen.L ? (React.createElement(Button, { testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText)) : null)) : null))),

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.d.ts

@@ -24,6 +24,9 @@ declare const style: {
     paymentSelector: {
         marginTop: number;
     };
+    paymentSelectorNL: {
+        marginBottom: number;
+    };
     princingWrapper: {
         padding: number;
     };

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.js

@@ -28,6 +28,9 @@ const style = StyleSheet.create({
     paymentSelector: {
         marginTop: space6,
     },
+    paymentSelectorNL: {
+        marginBottom: space6,
+    },
     princingWrapper: {
         padding: space6,
     },

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "9.9.0-beta.0";
+export declare const VERSION = "9.9.0-beta.2";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "9.9.0-beta.0";
+export const VERSION = "9.9.0-beta.2";

package/fake-dependencies/@lookiero/payments-front/index.tsx

@@ -7,34 +7,57 @@ import {
   RefAttributes,
   useImperativeHandle,
 } from "react";
+import { PaymentPayload } from "@lookiero/payments-front";
 
 const setPaymentsBridge = () => void 0;
 const PaymentsQueryProvider: FC<PropsWithChildren> = ({ children }) => children;
 const PaymentInstrumentSelect: FC = () => null;
-interface StartLegacyBoxCheckoutCallbackArgs {
-  readonly status: string;
-  readonly final: boolean;
-}
+
 interface StartLegacyBoxCheckoutFunction {
-  (paymentFlowPayload: unknown, callback: (params: StartLegacyBoxCheckoutCallbackArgs) => Promise<void>): void;
+  (paymentFlowPayload: unknown): void;
 }
+
 interface PaymentFlowRef {
   readonly startLegacyBoxCheckout: StartLegacyBoxCheckoutFunction;
 }
+
 const paymentFlowRef: PaymentFlowRef = {
-  startLegacyBoxCheckout: async (_paymentFlowPayload, callback) => {
-    await callback({ status: "EXECUTED", final: true });
-  },
+  startLegacyBoxCheckout: async () => {},
 };
+
 const PaymentFlow: ForwardRefExoticComponent<RefAttributes<PaymentFlowRef>> = forwardRef<PaymentFlowRef, unknown>(
   (_props, ref) => {
     useImperativeHandle(ref, () => paymentFlowRef, []);
     return null;
   },
 );
+
 PaymentFlow.displayName = "PaymentFlow";
+
+interface UsePaymentStatusManagerResult {
+  isLoading: boolean;
+  consumePayload: (callback: (payload: PaymentPayload) => void) => void;
+}
+
+const paymentStatusManagerResult: UsePaymentStatusManagerResult = {
+  isLoading: false,
+  consumePayload: (callback) => callback({ success: true } as PaymentPayload),
+};
+
+const usePaymentStatusManager: (section: Section) => UsePaymentStatusManagerResult = () => paymentStatusManagerResult;
+
 enum Section {
   BOX_CHECKOUT = "box-checkout",
 }
+
 export type { PaymentFlowRef };
-export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, paymentFlowRef };
+
+export {
+  PaymentsQueryProvider,
+  PaymentInstrumentSelect,
+  PaymentFlow,
+  Section,
+  setPaymentsBridge,
+  paymentFlowRef,
+  usePaymentStatusManager,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "9.9.0-beta.0",
+  "version": "9.9.0-beta.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -46,7 +46,7 @@
     "@cypress/webpack-preprocessor": "^6.0.2",
     "@lookiero/eslint-config-sty-psp": "*",
     "@lookiero/event": "^0.3",
-    "@lookiero/payments-front": "6.0.3-LK-37736-2025.2.10.151202",
+    "@lookiero/payments-front": "7.0.0-ideal-integration-2025.2.24.164234",
     "@lookiero/sty-psp-jest-config": "*",
     "@lookiero/sty-psp-prettier-config": "*",
     "@lookiero/sty-psp-scripts": "*",
@@ -76,7 +76,7 @@
     "@lookiero/event": "^0.3",
     "@lookiero/i18n": ">=0.9",
     "@lookiero/i18n-react": ">=0.9",
-    "@lookiero/payments-front": "6.0.3-LK-37736-2025.2.10.151202",
+    "@lookiero/payments-front": "7.0.0-LK-37736-2025.2.12.160011",
     "apollo-boost": "0.4.4",
     "expo": ">=51",
     "expo-font": ">=12",

package/src/ExpoRoot.tsx

@@ -1,3 +1,4 @@
+import { PortalProvider } from "@gorhom/portal";
 import { useFonts } from "expo-font";
 import "expo/build/Expo.fx";
 import React, { FC, useCallback, useState } from "react";
@@ -32,7 +33,7 @@ const order: Order = {
 };
 
 const customer: Customer = {
-  customerId: "9413fe3a-09fc-4264-905e-040bb7b4ca75",
+  customerId: "d3c2354b-9811-46d4-b2ba-5fba012ed94d",
   country: Country.ES,
   segment: Segment.WOMEN,
   email: "email@example.com",
@@ -53,7 +54,7 @@ const apiUrl =
       ? "/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NTIwMjgsImV4cCI6MTczOTQ0MTYwMSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTE4IiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6Ijk0MTNmZTNhLTA5ZmMtNDI2NC05MDVlLTA0MGJiN2I0Y2E3NSIsImlhdCI6MTczNjc2MzIwMn0.ZaFu4743f9XR0aK3LgMMhbmRHNloHtC1Sm0FDUtj8B8";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDk0NjYsImV4cCI6MTc0MjQ3MDI5OSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTExIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6ImQzYzIzNTRiLTk4MTEtNDZkNC1iMmJhLTVmYmEwMTJlZDk0ZCIsImlhdCI6MTc0MDA1MTA5OX0.AkuUZTsn9mgplQwatg0dPKyv1Hsc6r267UMahxMH19g";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =
@@ -131,35 +132,37 @@ const ExpoRoot: FC = () => {
   const onNotAccessible = useCallback(() => setIsAccessible(false), []);
 
   return fontsLoaded ? (
-    <PaymentsQueryProvider>
-      <EventProvider>
-        <Aurora>
-          {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
+    <PortalProvider>
+      <PaymentsQueryProvider>
+        <EventProvider>
+          <Aurora>
+            {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
 
-          <Router>
-            <Routes>
-              <Route
-                path="/checkout/*"
-                element={
-                  <Root
-                    basePath="/checkout"
-                    customer={customer}
-                    layout={DummyLayout}
-                    locale={locale}
-                    order={order}
-                    subscription={subscription}
-                    useRedirect={useRedirect}
-                    onNotAccessible={onNotAccessible}
-                  />
-                }
-              />
+            <Router>
+              <Routes>
+                <Route
+                  path="/checkout/*"
+                  element={
+                    <Root
+                      basePath="/checkout"
+                      customer={customer}
+                      layout={DummyLayout}
+                      locale={locale}
+                      order={order}
+                      subscription={subscription}
+                      useRedirect={useRedirect}
+                      onNotAccessible={onNotAccessible}
+                    />
+                  }
+                />
 
-              <Route element={<Navigate to="/checkout" replace />} path="*" />
-            </Routes>
-          </Router>
-        </Aurora>
-      </EventProvider>
-    </PaymentsQueryProvider>
+                <Route element={<Navigate to="/checkout" replace />} path="*" />
+              </Routes>
+            </Router>
+          </Aurora>
+        </EventProvider>
+      </PaymentsQueryProvider>
+    </PortalProvider>
   ) : null;
 };
 

package/src/infrastructure/ui/views/App.tsx

@@ -1,8 +1,7 @@
-import { PortalProvider } from "@gorhom/portal";
+import { PortalHost } from "@gorhom/portal";
 import React, { FC } from "react";
 import { StatusBar } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import { PortalProvider as AuroraPortalProvider } from "@lookiero/aurora";
 import { Notifications } from "@lookiero/sty-psp-notifications";
 import { theme } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
@@ -15,17 +14,10 @@ interface AppProps {
 
 const App: FC<AppProps> = ({ children }) => (
   <SafeAreaProvider>
-    <PortalProvider rootHostName="Checkout">
-      <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-      <Notifications contextId={MESSAGING_CONTEXT_ID} portalHostName="Checkout" />
-      {/*
-        We are using the Aurora's PortalProvider at this level for notifications to work properly.
-
-        PaymentInstrumentSelect uses Aurora's Portal, and if we rely on UAF's Portal (injected by <Aurora>)
-        notifications would be displayed in a layer below Portal's one (not visible).
-      */}
-      <AuroraPortalProvider>{children}</AuroraPortalProvider>
-    </PortalProvider>
+    <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
+    <Notifications contextId={MESSAGING_CONTEXT_ID} portalHostName="Checkout" />
+    <PortalHost name="Checkout" />
+    {children}
   </SafeAreaProvider>
 );
 

package/src/infrastructure/ui/views/checkout/Checkout.style.ts

@@ -30,6 +30,9 @@ const style = StyleSheet.create({
   paymentSelector: {
     marginTop: space6,
   },
+  paymentSelectorNL: {
+    marginBottom: space6,
+  },
   princingWrapper: {
     padding: space6,
   },

package/src/infrastructure/ui/views/checkout/Checkout.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-native";
 import { Box, Button, Layout as AuroraLayout, Spinner, Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
+import { Country } from "@lookiero/sty-psp-locale";
 import { Layout as UiLayout, Sticky } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -116,6 +117,12 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
         >
           <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
             <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
+              {country === Country.NL && (
+                <View style={style.paymentSelectorNL}>
+                  <PaymentInstrument useRedirect={useRedirect} />
+                </View>
+              )}
+
               <Text level={3} style={style.title} heading>
                 {titleText}
               </Text>
@@ -139,9 +146,11 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
                 </View>
               ))}
 
-              <View style={style.paymentSelector}>
-                <PaymentInstrument useRedirect={useRedirect} />
-              </View>
+              {country !== Country.NL && (
+                <View style={style.paymentSelector}>
+                  <PaymentInstrument useRedirect={useRedirect} />
+                </View>
+              )}
             </View>
           </Box>