frames-react-native 1.1.9 → 1.2.3

package/__tests__/Integration.test.tsx

@@ -1,401 +1,190 @@
-import React from "react";
+import React, { createRef } from "react";
 import { render, fireEvent, waitFor } from "@testing-library/react-native";
 
 import {
-  CardNumber,
   Frames,
+  CardNumber,
   ExpiryDate,
   Cvv,
   SubmitButton,
 } from "../src/index";
+import type { FramesRef } from "../src/index";
+
+// Mock network-dependent modules to avoid real HTTP requests
+jest.mock("../src/utils/http", () => {
+  const actual = jest.requireActual("../src/utils/http");
+  return {
+    ...actual,
+    tokenize: jest.fn(),
+  };
+});
 
-const PK = "pk_test_4296fd52-efba-4a38-b6ce-cf0d93639d8a";
-
-describe("CardNumber", () => {
-  it("triggers the card tokenization", async () => {
-    const tokenized = jest.fn();
-
-    const { getByPlaceholderText, getByTestId } = render(
-      <Frames
-        config={{
-          publicKey: PK,
-          debug: true,
-        }}
-        cardTokenized={tokenized}
-      >
-        <CardNumber placeholder="card-number" />
-        <ExpiryDate placeholder="expiry-date" />
-        <Cvv placeholder="cvv" />
-        <SubmitButton
-          title="Pay Now"
-          testID={"submit-button"}
-          onPress={() => {}}
-        />
-      </Frames>
-    );
+jest.mock("../src/utils/logger", () => {
+  const actual = jest.requireActual("../src/utils/logger");
+  return {
+    ...actual,
+    log: jest.fn(),
+  };
+});
 
-    let cardNumber = getByPlaceholderText("card-number");
-    let expiryDate = getByPlaceholderText("expiry-date");
-    let cvv = getByPlaceholderText("cvv");
-    let pay = getByTestId("submit-button");
-    fireEvent.changeText(cardNumber, "4242424242424242");
-    fireEvent.changeText(expiryDate, "1128");
-    fireEvent.changeText(cvv, "100");
-    fireEvent.press(pay);
-    await waitFor(() => {
-      expect(tokenized).toHaveBeenCalledTimes(1);
-    });
-    expect(tokenized.mock.calls[0][0].last4).toEqual("4242");
+describe("Frames integration", () => {
+  const validVisa = "4242 4242 4242 4242"; // Visa test number
+  const validExpiry = "12/30"; // future year
+  const validCvv = "123";
+
+  const config = {
+    publicKey: "pk_sbox_eo3yb3urja2ozf6ycgn5kuy7ke#",
+    debug: true,
+    cardholder: {
+      name: "John Doe",
+      phone: "+1234567890",
+      billingAddress: {
+        addressLine1: "123 Test St",
+        city: "Test City",
+        state: "TS",
+        zip: "12345",
+        country: "US",
+      },
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
 
-  it("shared the card bin", async () => {
-    const binChange = jest.fn();
-
-    const { getByPlaceholderText, getByTestId } = render(
+  it("emits validation and bin events, and tokenizes on submit", async () => {
+    const { tokenize } = require("../src/utils/http");
+
+    const mockTokenResponse = {
+      type: "card",
+      token: "tok_test_123",
+      expires_on: "2030-12-31T23:59:59Z",
+      expiry_month: "12",
+      expiry_year: "2030",
+      scheme: "Visa",
+      last4: "4242",
+      bin: "424242",
+    };
+
+    tokenize.mockResolvedValueOnce(mockTokenResponse);
+
+    const frameValidationChanged = jest.fn();
+    const paymentMethodChanged = jest.fn();
+    const cardValidationChanged = jest.fn();
+    const cardTokenized = jest.fn();
+    const cardTokenizationFailed = jest.fn();
+    const cardBinChanged = jest.fn();
+
+    const screen = render(
       <Frames
-        config={{
-          publicKey: PK,
-          debug: true,
-        }}
-        cardTokenized={() => {}}
-        cardBinChanged={binChange}
+        config={config}
+        frameValidationChanged={frameValidationChanged}
+        paymentMethodChanged={paymentMethodChanged}
+        cardValidationChanged={cardValidationChanged}
+        cardTokenized={cardTokenized}
+        cardTokenizationFailed={cardTokenizationFailed}
+        cardBinChanged={cardBinChanged}
       >
-        <CardNumber placeholder="card-number" />
-        <ExpiryDate placeholder="expiry-date" />
-        <Cvv placeholder="cvv" />
-        <SubmitButton
-          title="Pay Now"
-          testID={"submit-button"}
-          onPress={() => {}}
-        />
+        <CardNumber />
+        <ExpiryDate />
+        <Cvv />
+        <SubmitButton title="Pay" />
       </Frames>
     );
 
-    let cardNumber = getByPlaceholderText("card-number");
-    let expiryDate = getByPlaceholderText("expiry-date");
-    let cvv = getByPlaceholderText("cvv");
-    let pay = getByTestId("submit-button");
-    fireEvent.changeText(cardNumber, "42424242");
-    expect(binChange).toHaveBeenCalledTimes(1);
-  });
+    const cardNumberInput = screen.getByPlaceholderText("•••• •••• •••• ••••");
+    const expiryInput = screen.getByPlaceholderText("MM/YY");
+    const cvvInput = screen.getByPlaceholderText("•••");
 
-  it("fails the card tokenization when the card number is invalid", async () => {
-    const failed = jest.fn();
+    // Enter card number -> should emit bin and payment method changes
+    fireEvent.changeText(cardNumberInput, validVisa);
 
-    const { getByPlaceholderText, getByTestId } = render(
-      <Frames
-        config={{
-          publicKey: PK,
-        }}
-        cardTokenized={() => {}}
-        cardTokenizationFailed={failed}
-      >
-        <CardNumber placeholder="card-number" />
-        <ExpiryDate placeholder="expiry-date" />
-        <Cvv placeholder="cvv" />
-        <SubmitButton
-          title="Pay Now"
-          testID={"submit-button"}
-          onPress={() => {}}
-        />
-      </Frames>
+    await waitFor(() => expect(paymentMethodChanged).toHaveBeenCalled());
+    expect(paymentMethodChanged).toHaveBeenCalledWith(
+      expect.objectContaining({ paymentMethod: "Visa", isValid: false })
     );
 
-    let cardNumber = getByPlaceholderText("card-number");
-    let expiryDate = getByPlaceholderText("expiry-date");
-    let cvv = getByPlaceholderText("cvv");
-    let pay = getByTestId("submit-button");
-    fireEvent.changeText(cardNumber, "12345");
-    fireEvent.changeText(expiryDate, "1128");
-    fireEvent.changeText(cvv, "100");
-    fireEvent.press(pay);
-    await waitFor(() => {
-      expect(failed).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  it("throws when the pay button is outside of context", async () => {
-    expect(() => {
-      render(
-        <SubmitButton
-          title="Pay Now"
-          testID={"submit-button"}
-          onPress={() => {}}
-        />
-      );
-    }).toThrow(
-      "It looks like you are trying to render the SubmitButton outside of the Frames Component."
+    await waitFor(() => expect(cardBinChanged).toHaveBeenCalled());
+    expect(cardBinChanged).toHaveBeenCalledWith(
+      expect.objectContaining({
+        bin: expect.stringMatching(/^42424242/),
+        scheme: "Visa",
+      })
     );
-  });
-
-  it("throws allow then use of the onPress handler", async () => {
-    const press = jest.fn();
 
-    const { getByPlaceholderText, getByTestId } = render(
-      <Frames
-        config={{
-          publicKey: PK,
-          debug: true,
-          cardholder: {
-            name: "John Smith",
-            billingAddress: {
-              addressLine1: "Wall Street",
-              addressLine2: "Dollar Avenue",
-              city: "London",
-              state: "London",
-              zip: "W1W 8GY",
-              country: "GB",
-            },
-            phone: "07123456789",
-          },
-        }}
-        cardTokenized={() => {}}
-      >
-        <CardNumber placeholder="card-number" />
-        <ExpiryDate placeholder="expiry-date" />
-        <Cvv placeholder="cvv" />
-        <SubmitButton
-          title="Pay Now"
-          testID={"submit-button"}
-          onPress={press}
-        />
-      </Frames>
+    // Enter expiry date
+    fireEvent.changeText(expiryInput, validExpiry);
+
+    // Enter cvv
+    fireEvent.changeText(cvvInput, validCvv);
+
+    // After all fields valid, cardValidationChanged should report isValid: true
+    await waitFor(() => expect(cardValidationChanged).toHaveBeenCalled());
+    expect(cardValidationChanged).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        isValid: true,
+        isElementValid: expect.objectContaining({
+          cardNumber: true,
+          expiryDate: true,
+          cvv: true,
+        }),
+      })
     );
-    let cardNumber = getByPlaceholderText("card-number");
-    let expiryDate = getByPlaceholderText("expiry-date");
-    let cvv = getByPlaceholderText("cvv");
-    let pay = getByTestId("submit-button");
-    fireEvent.changeText(cardNumber, "4242424242424242");
-    fireEvent.changeText(expiryDate, "1128");
-    fireEvent.changeText(cvv, "100");
-    fireEvent.press(pay);
-
-    fireEvent.press(pay);
-    expect(press).toHaveBeenCalled();
-  });
-
-  it("fails tokenization", async () => {
-    const failed = jest.fn();
 
-    const { getByPlaceholderText, getByTestId } = render(
-      <Frames
-        config={{
-          publicKey: "pk_test_baabd05f-1cdb-43d9-851e-635a79f6e7ad", // this account does not have Visa enabled
-          debug: true,
-        }}
-        cardTokenized={() => {}}
-        frameValidationChanged={(e) => {}}
-        paymentMethodChanged={(e) => {}}
-        cardValidationChanged={(e) => {}}
-        cardTokenizationFailed={failed}
-      >
-        <CardNumber placeholder="card-number" />
-        <ExpiryDate placeholder="expiry-date" />
-        <Cvv placeholder="cvv" />
-        <SubmitButton
-          title="Pay Now"
-          testID={"submit-button"}
-          onPress={() => {}}
-        />
-      </Frames>
-    );
+    // Submit and expect tokenization to be called and success event emitted
+    const payButton = screen.getByText("Pay");
+    fireEvent.press(payButton);
 
-    let cardNumber = getByPlaceholderText("card-number");
-    let expiryDate = getByPlaceholderText("expiry-date");
-    let cvv = getByPlaceholderText("cvv");
-    let pay = getByTestId("submit-button");
-    fireEvent.changeText(cardNumber, "4242424242424242");
-    fireEvent.changeText(expiryDate, "0628");
-    fireEvent.changeText(cvv, "100");
-    fireEvent.press(pay);
-    await waitFor(() => {
-      expect(failed).toHaveBeenCalledTimes(1);
-    });
+    await waitFor(() => expect(tokenize).toHaveBeenCalledTimes(1));
+    expect(cardTokenized).toHaveBeenCalledWith(mockTokenResponse);
+    expect(cardTokenizationFailed).not.toHaveBeenCalled();
   });
 
-  it("triggers the card tokenization with billing details", async () => {
-    const tokenized = jest.fn();
+  it("allows submitting via Frames ref submitCard()", async () => {
+    const { tokenize } = require("../src/utils/http");
 
-    const { getByPlaceholderText, getByTestId } = render(
-      <Frames
-        config={{
-          publicKey: PK,
-          debug: true,
-          cardholder: {
-            name: "John Smith",
-            billingAddress: {
-              addressLine1: "Wall Street",
-              addressLine2: "Dollar Avenue",
-              city: "London",
-              state: "London",
-              zip: "W1W 8GY",
-              country: "GB",
-            },
-            phone: "07123456789",
-          },
-        }}
-        cardTokenized={tokenized}
-      >
-        <CardNumber placeholder="card-number" />
-        <ExpiryDate placeholder="expiry-date" />
-        <Cvv placeholder="cvv" />
-        <SubmitButton
-          title="Pay Now"
-          testID={"submit-button"}
-          onPress={() => {}}
-        />
-      </Frames>
-    );
+    const mockTokenResponse = {
+      type: "card",
+      token: "tok_test_ref_123",
+      expires_on: "2030-12-31T23:59:59Z",
+      expiry_month: "12",
+      expiry_year: "2030",
+      scheme: "Visa",
+      last4: "4242",
+      bin: "424242",
+    };
 
-    let cardNumber = getByPlaceholderText("card-number");
-    let expiryDate = getByPlaceholderText("expiry-date");
-    let cvv = getByPlaceholderText("cvv");
-    let pay = getByTestId("submit-button");
-    fireEvent.changeText(cardNumber, "4242424242424242");
-    fireEvent.changeText(expiryDate, "1128");
-    fireEvent.changeText(cvv, "100");
-    fireEvent.press(pay);
-    await waitFor(() => {
-      expect(tokenized).toHaveBeenCalledTimes(1);
-    });
-    expect(tokenized.mock.calls[0][0].billing_address.address_line1).toEqual(
-      "Wall Street"
-    );
-  });
-
-  it("triggers the card tokenization with amex", async () => {
-    const tokenized = jest.fn();
-
-    const { getByPlaceholderText, getByTestId } = render(
-      <Frames
-        config={{
-          publicKey: PK,
-        }}
-        cardTokenized={tokenized}
-      >
-        <CardNumber placeholder="card-number" />
-        <ExpiryDate placeholder="expiry-date" />
-        <Cvv placeholder="cvv" />
-        <SubmitButton
-          title="Pay Now"
-          testID={"submit-button"}
-          onPress={() => {}}
-        />
-      </Frames>
-    );
+    tokenize.mockResolvedValueOnce(mockTokenResponse);
 
-    let cardNumber = getByPlaceholderText("card-number");
-    let expiryDate = getByPlaceholderText("expiry-date");
-    let cvv = getByPlaceholderText("cvv");
-    let pay = getByTestId("submit-button");
-    fireEvent.changeText(cardNumber, "378282246310005");
-    fireEvent.changeText(expiryDate, "1128");
-    fireEvent.changeText(cvv, "1000");
-    fireEvent.press(pay);
-    await waitFor(() => {
-      expect(tokenized).toHaveBeenCalledTimes(1);
-    });
-  });
+    const cardTokenized = jest.fn();
 
-  it("triggers the card tokenization with minimal billing details", async () => {
-    const tokenized = jest.fn();
+    const ref = createRef<FramesRef>();
 
-    const { getByPlaceholderText, getByTestId } = render(
-      <Frames
-        config={{
-          publicKey: PK,
-          debug: true,
-          cardholder: {
-            name: "John Smith",
-            billingAddress: {
-              addressLine1: "Wall Street",
-              addressLine2: "Dollar Avenue",
-            },
-          },
-        }}
-        cardTokenized={tokenized}
-        cardTokenizationFailed={(e) => {
-          console.log(e);
-        }}
-      >
-        <CardNumber placeholder="card-number" />
-        <ExpiryDate placeholder="expiry-date" />
-        <Cvv placeholder="cvv" />
-        <SubmitButton
-          title="Pay Now"
-          testID={"submit-button"}
-          onPress={() => {}}
-        />
+    const screen = render(
+      <Frames config={config} cardTokenized={cardTokenized} ref={ref}>
+        <CardNumber />
+        <ExpiryDate />
+        <Cvv />
       </Frames>
     );
 
-    let cardNumber = getByPlaceholderText("card-number");
-    let expiryDate = getByPlaceholderText("expiry-date");
-    let cvv = getByPlaceholderText("cvv");
-    let pay = getByTestId("submit-button");
-    fireEvent.changeText(cardNumber, "4242424242424242");
-    fireEvent.changeText(expiryDate, "1128");
-    fireEvent.changeText(cvv, "100");
-    fireEvent.press(pay);
-    await waitFor(() => {
-      expect(tokenized).toHaveBeenCalledTimes(1);
-    });
-    expect(tokenized.mock.calls[0][0].billing_address.address_line1).toEqual(
-      "Wall Street"
-    );
-  });
+    const cardNumberInput = screen.getByPlaceholderText("•••• •••• •••• ••••");
+    const expiryInput = screen.getByPlaceholderText("MM/YY");
+    const cvvInput = screen.getByPlaceholderText("•••");
 
-  it("triggers throws if you render the card number outside of context", async () => {
-    let exception;
-    try {
-      render(<CardNumber placeholder="card-number" />);
-    } catch (e) {
-      exception = e;
-    }
-    expect(exception).toEqual(
-      "It looks like you are trying to render the CardNumber outside of the Frames Component."
-    );
-  });
+    // Fill valid data
+    fireEvent.changeText(cardNumberInput, validVisa);
+    fireEvent.changeText(expiryInput, validExpiry);
+    fireEvent.changeText(cvvInput, validCvv);
 
-  it("triggers throws if you render the expiry date outside of context", async () => {
-    let exception;
-    try {
-      render(<ExpiryDate placeholder="expiry-date" />);
-    } catch (e) {
-      exception = e;
-    }
-    expect(exception).toEqual(
-      "It looks like you are trying to render the ExpiryDate outside of the Frames Component."
-    );
-  });
+    // Call submit via ref
+    await waitFor(async () => {
+      expect(ref.current).not.toBeNull();
+    });
 
-  it("triggers throws if you render the cvv outside of context", async () => {
-    let exception;
-    try {
-      render(<Cvv placeholder="cvv" />);
-    } catch (e) {
-      exception = e;
-    }
-    expect(exception).toEqual(
-      "It looks like you are trying to render the Cvv outside of the Frames Component."
-    );
-  });
+    await ref.current!.submitCard();
 
-  it("triggers throws if you render the submit button outside of context", async () => {
-    let exception;
-    try {
-      render(
-        <SubmitButton
-          title="Pay Now"
-          testID={"submit-button"}
-          onPress={() => {}}
-        />
-      );
-    } catch (e) {
-      exception = e;
-    }
-    expect(exception).toEqual(
-      "It looks like you are trying to render the SubmitButton outside of the Frames Component."
-    );
+    await waitFor(() => expect(tokenize).toHaveBeenCalledTimes(1));
+    expect(cardTokenized).toHaveBeenCalledWith(mockTokenResponse);
   });
 });

package/__tests__/Unit.test.tsx

@@ -3,7 +3,7 @@ import { getFormattedDate } from "../src/utils/date";
 import { getEnvironment } from "../src/utils/http";
 import { getEnvironment as loggerGetEnvironment } from "../src/utils/logger";
 
-const PK_SB = "pk_test_4296fd52-efba-4a38-b6ce-cf0d93639d8a";
+const PK_SB = "pk_sbox_eo3yb3urja2ozf6ycgn5kuy7ke#";
 const PK_PROD = "pk_4296fd52-efba-4a38-b6ce-cf0d93639d8a"; // fake key
 
 describe("Date", () => {

package/dist/Frames.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { FramesContextType, FramesProps } from "./types/types";
+import { FramesContextType, FramesProps, FramesRef } from "./types/types";
 export declare const FramesContext: React.Context<FramesContextType>;
-declare const Frames: (props: FramesProps) => JSX.Element;
+declare const Frames: React.ForwardRefExoticComponent<FramesProps & React.RefAttributes<FramesRef>>;
 export default Frames;
 export declare const FramesConsumer: React.Consumer<FramesContextType>;
 export declare const FramesProvider: React.Provider<FramesContextType>;

package/dist/Frames.js

@@ -13,7 +13,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -34,15 +34,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import React, { useEffect } from "react";
+import React, { useEffect, useImperativeHandle } from "react";
 import { View, StyleSheet } from "react-native";
 import { framesReducer } from "./utils/reducer";
 import { log } from "./utils/logger";
 import { tokenize, formatDataForTokenization } from "./utils/http";
 export var FramesContext = React.createContext({});
-var Frames = function (props) {
-    // @ts-ignore
-    var _a = React.useReducer(framesReducer, {
+var Frames = React.forwardRef(function (props, ref) {
+    var initialState = {
         cardNumber: null,
         cardBin: {
             bin: null,
@@ -59,7 +58,8 @@ var Frames = function (props) {
             cvv: false,
             card: false,
         },
-    }), state = _a[0], dispatch = _a[1];
+    };
+    var _a = React.useReducer(framesReducer, initialState), state = _a[0], dispatch = _a[1];
     var submitCard = function () { return __awaiter(void 0, void 0, void 0, function () {
         var response, error_1;
         return __generator(this, function (_a) {
@@ -82,12 +82,15 @@ var Frames = function (props) {
                         console.info("Emitting \"cardTokenizationFailed\"", error_1);
                     if (props.cardTokenizationFailed)
                         props.cardTokenizationFailed(error_1);
-                    log("error", "com.checkout.frames-mobile-sdk.exception", props.config, error_1);
+                    log("error", "com.checkout.frames-mobile-sdk.exception", props.config, error_1 || {});
                     return [3 /*break*/, 3];
                 case 3: return [2 /*return*/];
             }
         });
     }); };
+    useImperativeHandle(ref, function () { return ({
+        submitCard: submitCard,
+    }); }, [submitCard]);
     useEffect(function () {
         if (state.cardBin.bin !== null) {
             if (props.config.debug)
@@ -170,7 +173,7 @@ var Frames = function (props) {
         {props.children}
       </FramesContext.Provider>
     </View>);
-};
+});
 export default Frames;
 export var FramesConsumer = FramesContext.Consumer;
 export var FramesProvider = FramesContext.Provider;

package/dist/Frames.js.map

@@ -1 +1 @@
-{"version":3,"file":"Frames.js","sourceRoot":"","sources":["../src/Frames.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Frames.js","sourceRoot":"","sources":["../src/Frames.tsx"],"names":[],"mappings":"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"}