[ncp] handle create order errors

src/hosted-buttons/types.js

@@ -34,7 +34,7 @@ export type ButtonVariables = $ReadOnlyArray<{|
 
 export type CreateOrder = (data: {|
   paymentSource: string,
-|}) => ZalgoPromise<string>;
+|}) => ZalgoPromise<string | void>;
 
 export type OnApprove = (data: {|
   orderID: string,

src/hosted-buttons/utils.js

@@ -1,14 +1,11 @@
 /* @flow */
 
-import { request, memoize, popup, supportsPopups } from "@krakenjs/belter/src";
+import { request, memoize } from "@krakenjs/belter/src";
 import {
   getSDKHost,
   getClientID,
   getMerchantID as getSDKMerchantID,
 } from "@paypal/sdk-client/src";
-import { FUNDING } from "@paypal/sdk-constants/src";
-
-import { DEFAULT_POPUP_SIZE } from "../zoid/checkout";
 
 import type {
   ButtonVariables,
@@ -115,6 +112,7 @@ export const buildHostedButtonCreateOrder = ({
   return (data) => {
     const userInputs =
       window[`__pp_form_fields_${hostedButtonId}`]?.getUserInputs?.() || {};
+    const onError = window[`__pp_form_fields_${hostedButtonId}`]?.onError;
     return createAccessToken(getClientID()).then((accessToken) => {
       return request({
         url: `${apiUrl}/v1/checkout/links/${hostedButtonId}/create-context`,
@@ -126,9 +124,9 @@ export const buildHostedButtonCreateOrder = ({
           merchant_id: merchantId,
           ...userInputs,
         }),
-      }).then(({ body }) => {
-        return body.context_id;
-      });
+      })
+        .then(({ body }) => body.context_id || onError(body.name))
+        .catch(() => onError("REQUEST_FAILED"));
     });
   };
 };
@@ -148,22 +146,6 @@ export const buildHostedButtonOnApprove = ({
           merchant_id: merchantId,
           context_id: data.orderID,
         }),
-      }).then((response) => {
-        // The "Debit or Credit Card" button does not open a popup
-        // so we need to open a new popup for buyers who complete
-        // a checkout via "Debit or Credit Card".
-        if (data.paymentSource === FUNDING.CARD) {
-          const url = `${baseUrl}/ncp/payment/${hostedButtonId}/${data.orderID}`;
-          if (supportsPopups()) {
-            popup(url, {
-              width: DEFAULT_POPUP_SIZE.WIDTH,
-              height: DEFAULT_POPUP_SIZE.HEIGHT,
-            });
-          } else {
-            window.location = url;
-          }
-        }
-        return response;
       });
     });
   };

src/hosted-buttons/utils.test.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import { test, expect, vi } from "vitest";
-import { request, popup, supportsPopups } from "@krakenjs/belter/src";
+import { request } from "@krakenjs/belter/src";
 import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 
 import {
@@ -14,8 +14,6 @@ vi.mock("@krakenjs/belter/src", async () => {
   return {
     ...(await vi.importActual("@krakenjs/belter/src")),
     request: vi.fn(),
-    popup: vi.fn(),
-    supportsPopups: vi.fn(),
   };
 });
 
@@ -101,6 +99,31 @@ test("buildHostedButtonCreateOrder", async () => {
   expect.assertions(1);
 });
 
+test("buildHostedButtonCreateOrder error handling", async () => {
+  const createOrder = buildHostedButtonCreateOrder({
+    hostedButtonId,
+    merchantId,
+  });
+
+  // $FlowIssue
+  request.mockImplementation(() =>
+    ZalgoPromise.resolve({
+      body: {
+        name: "RESOURCE_NOT_FOUND",
+      },
+    })
+  );
+
+  const onError = vi.fn();
+  window[`__pp_form_fields_${hostedButtonId}`] = {
+    onError,
+  };
+
+  await createOrder({ paymentSource: "paypal" });
+  expect(onError).toHaveBeenCalledWith("RESOURCE_NOT_FOUND");
+  expect.assertions(1);
+});
+
 describe("buildHostedButtonOnApprove", () => {
   test("makes a request to the Hosted Buttons API", async () => {
     const onApprove = buildHostedButtonOnApprove({
@@ -126,32 +149,4 @@ describe("buildHostedButtonOnApprove", () => {
     );
     expect.assertions(1);
   });
-
-  test("provides its own popup for inline guest", async () => {
-    const onApprove = buildHostedButtonOnApprove({
-      hostedButtonId,
-      merchantId,
-    });
-    // $FlowIssue
-    request.mockImplementation(() =>
-      ZalgoPromise.resolve({
-        body: {},
-      })
-    );
-
-    // $FlowIssue
-    supportsPopups.mockImplementation(() => true);
-    await onApprove({ orderID, paymentSource: "card" });
-    expect(popup).toHaveBeenCalled();
-
-    // but redirects if popups are not supported
-    // $FlowIssue
-    supportsPopups.mockImplementation(() => false);
-    await onApprove({ orderID, paymentSource: "card" });
-    expect(window.location).toMatch(
-      `/ncp/payment/${hostedButtonId}/${orderID}`
-    );
-
-    expect.assertions(2);
-  });
 });