@paypal/checkout-components 5.0.302-alpha.0 → 5.0.303-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.302-alpha.0",
+  "version": "5.0.303-alpha.0",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -110,8 +110,8 @@
     "@krakenjs/post-robot": "^11.0.0",
     "@krakenjs/zalgo-promise": "^2.0.0",
     "@krakenjs/zoid": "^10.3.1",
-    "@paypal/accelerated-checkout-loader": "^1.0.0",
     "@paypal/common-components": "^1.0.35",
+    "@paypal/connect-loader-component": "1.1.1",
     "@paypal/funding-components": "^1.0.31",
     "@paypal/sdk-client": "^4.0.181",
     "@paypal/sdk-constants": "^1.0.141",

package/src/connect/component.jsx

@@ -1,5 +1,5 @@
 /* @flow */
-import { loadAxo } from "@paypal/accelerated-checkout-loader/dist/loader.esm";
+import { loadAxo } from "@paypal/connect-loader-component";
 import { stringifyError } from "@krakenjs/belter/src";
 import {
   getClientID,

package/src/connect/component.test.js

@@ -1,8 +1,7 @@
 /* @flow */
 
 import { getUserIDToken, getSDKToken } from "@paypal/sdk-client/src";
-// eslint-disable-next-line import/no-namespace
-import * as axo from "@paypal/accelerated-checkout-loader/dist/loader.esm";
+import { loadAxo } from "@paypal/connect-loader-component";
 import { describe, expect, test, vi } from "vitest";
 
 import {
@@ -31,6 +30,12 @@ vi.mock("@paypal/sdk-client/src", () => {
   };
 });
 
+vi.mock("@paypal/connect-loader-component", () => {
+  return {
+    loadAxo: vi.fn(),
+  };
+});
+
 describe("getConnectComponent: returns ConnectComponent", () => {
   const mockAxoMetadata = { someData: "data" };
   const mockProps = { someProp: "value" };
@@ -43,7 +48,7 @@ describe("getConnectComponent: returns ConnectComponent", () => {
       },
     };
 
-    vi.spyOn(axo, "loadAxo").mockResolvedValue({ metadata: mockAxoMetadata });
+    loadAxo.mockResolvedValue({ metadata: mockAxoMetadata });
   });
 
   test("uses user id token if no sdk token is present", async () => {
@@ -92,7 +97,7 @@ describe("getConnectComponent: returns ConnectComponent", () => {
 
   test("loadAxo failure is handled", async () => {
     const errorMessage = "Something went wrong";
-    axo.loadAxo.mockRejectedValue(errorMessage);
+    loadAxo.mockRejectedValue(errorMessage);
 
     await expect(() => getConnectComponent(mockProps)).rejects.toThrow(
       errorMessage
@@ -110,7 +115,7 @@ describe("getConnectComponent: returns ConnectComponent", () => {
 
   test("minified is set according to debug value", async () => {
     await getConnectComponent(mockProps);
-    expect(axo.loadAxo).toHaveBeenCalledWith({
+    expect(loadAxo).toHaveBeenCalledWith({
       minified: true,
       btSdkVersion: "3.97.3-connect-alpha.6.1",
       metadata: undefined,

package/src/hosted-buttons/utils.js

@@ -7,6 +7,7 @@ import {
   getClientID,
   getMerchantID as getSDKMerchantID,
 } from "@paypal/sdk-client/src";
+import { FUNDING } from "@paypal/sdk-constants/src";
 
 import type {
   ButtonVariables,
@@ -208,6 +209,14 @@ 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 redirect to the thank you page for buyers who complete
+      // a checkout via "Debit or Credit Card".
+      if (data.paymentSource === FUNDING.CARD) {
+        window.location = `${baseUrl}/ncp/payment/${hostedButtonId}/${data.orderID}`;
+      }
+      return response;
     });
   };
 };

package/src/hosted-buttons/utils.test.js

@@ -264,6 +264,28 @@ describe("buildHostedButtonOnApprove", () => {
     );
     expect.assertions(1);
   });
+
+  describe("inline guest", () => {
+    const onApprove = buildHostedButtonOnApprove({
+      hostedButtonId,
+      merchantId,
+    });
+    // $FlowIssue
+    request.mockImplementation(() =>
+      // eslint-disable-next-line compat/compat
+      Promise.resolve({
+        body: {},
+      })
+    );
+
+    test("redirects from the merchant's site to a thank you page", async () => {
+      expect(window.location.href).toBe("http://localhost:3000/");
+      await onApprove({ orderID, paymentSource: "card" });
+      expect(window.location).toBe(
+        "https://example.com/ncp/payment/B1234567890/EC-1234567890"
+      );
+    });
+  });
 });
 
 /* eslint-enable no-restricted-globals, promise/no-native */

package/src/interface/hosted-buttons.js

@@ -7,6 +7,7 @@ import {
   getCardFormComponent,
   type CardFormComponent,
 } from "../zoid/card-form";
+import { getQRCodeComponent, type QRCodeComponent } from "../zoid/qr-code";
 import { getCheckoutComponent, type CheckoutComponent } from "../zoid/checkout";
 import type { LazyExport, LazyProtectedExport } from "../types";
 import { protectedExport } from "../lib";
@@ -23,6 +24,10 @@ export const CardForm: LazyProtectedExport<CardFormComponent> = {
   __get__: () => protectedExport(getCardFormComponent()),
 };
 
+export const QRCode: LazyProtectedExport<QRCodeComponent> = {
+  __get__: () => protectedExport(getQRCodeComponent()),
+};
+
 export function setup() {
   getButtonsComponent();
   getCheckoutComponent();