@fat-zebra/sdk 1.5.8 → 1.5.10-beta.0

package/.github/workflows/ci.yml

@@ -0,0 +1,226 @@
+name: CI
+
+env:
+  AWS_REGION: ap-southeast-2
+  TEST_UPLOAD_PATH: s3://test-cdn-pmnts-origin/sdk/v1/
+  SBOX_UPLOAD_PATH: s3://sandbox-pmnts-resources/sdk/v1/
+  PROD_UPLOAD_PATH: s3://pmnts-resources/sdk/v1/
+on:
+  push:
+    branches: ['**']                        # all branches
+    tags:
+      - 'v*.*.*'           # prod tags e.g. v1.5.8
+      - 'v*.*.*-beta.*'    # beta tags e.g. v1.5.8-beta.0
+  pull_request:
+
+jobs:
+  checks:
+    name: Security & Type checks
+    runs-on: ubuntu-latest
+    env:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: '20.x', cache: 'npm' }
+      - run: npm ci
+      - run: npx --yes audit-ci --high
+      - run: npx tsc --noEmit
+      - run: npx tsc -p tsconfig.package.json --noEmit
+      - run: yarn test
+
+  # --- BUILD JOBS ----------------------------------------------------
+
+  build-staging:
+    needs: checks
+    if: github.ref_type == 'branch' && github.ref_name != 'main'
+    runs-on: ubuntu-latest
+    env:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: fatzebra/gh-workflows/build_npm@main
+        with:
+          credentials_json: |
+            {
+              "GITHUB_TOKEN": "${{ secrets.GITHUB_TOKEN }}",
+              "NPM_CLOUDSMITH_REPO_PWD": "${{ secrets.CLOUDSMITH_API_KEY }}"
+            }
+      - name: Build (staging)
+        run: npm run build:staging
+      - uses: actions/upload-artifact@v4
+        with:
+          name: sdk-dist-staging
+          path: |
+            dist/staging/*.js
+            dist/staging/*.css
+          if-no-files-found: error
+
+  build-sandbox:
+    needs: checks
+    if: github.ref_type == 'tag' && contains(github.ref_name, '-beta.') && github.base_ref == 'main'
+    runs-on: ubuntu-latest
+    env:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: fatzebra/gh-workflows/build_npm@main
+        with:
+          credentials_json: |
+            {
+              "GITHUB_TOKEN": "${{ secrets.GITHUB_TOKEN }}",
+              "NPM_CLOUDSMITH_REPO_PWD": "${{ secrets.CLOUDSMITH_API_KEY }}"
+            }
+      - name: Build (sandbox)
+        run: npm run build:sandbox
+      - uses: actions/upload-artifact@v4
+        with:
+          name: sdk-dist-sandbox
+          path: |
+            dist/sandbox/*.js
+            dist/sandbox/*.css
+          if-no-files-found: error
+
+  build-production:
+    needs: checks
+    if: github.ref_type == 'tag' && !contains(github.ref_name, '-beta.') && github.base_ref == 'main'
+    runs-on: ubuntu-latest
+    env:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: fatzebra/gh-workflows/build_npm@main
+        with:
+          credentials_json: |
+            {
+              "GITHUB_TOKEN": "${{ secrets.GITHUB_TOKEN }}",
+              "NPM_CLOUDSMITH_REPO_PWD": "${{ secrets.CLOUDSMITH_API_KEY }}"
+            }
+      - name: Build (production)
+        run: npm run build:production
+      - uses: actions/upload-artifact@v4
+        with:
+          name: sdk-dist-production
+          path: |
+            dist/production/*.js
+            dist/production/*.css
+          if-no-files-found: error
+
+  # --- DEPLOY JOBS ----------------------------------------------------
+
+  deploy-staging:
+    needs: build-staging
+    if: github.ref_type == 'branch' && github.ref_name != 'main'
+    runs-on: ubuntu-latest
+    permissions: { id-token: write, contents: read }
+    steps:
+      - uses: fatzebra/gh-workflows/aws_login@main
+        with:
+          platform: fz
+          environment: test
+          role_name: AppDeploy
+      - run: aws s3 sync --delete --content-type 'application/javascript' --exclude '*' --include '*.js' dist/staging/ "${TEST_UPLOAD_PATH}"
+      - run: aws s3 sync --delete --content-type 'text/css' --exclude '*' --include '*.css' dist/staging/ "${TEST_UPLOAD_PATH}"
+
+  deploy-sandbox:
+    needs: build-sandbox
+    if: github.ref_type == 'tag' && contains(github.ref_name, '-beta.') && github.base_ref == 'main'
+    runs-on: ubuntu-latest
+    permissions: { id-token: write, contents: read }
+    steps:
+      - uses: fatzebra/gh-workflows/aws_login@main
+        with:
+          platform: fz
+          environment: sbox
+          role_name: AppDeploy
+      - run: aws s3 sync --delete --content-type 'application/javascript' --exclude '*' --include '*.js' dist/sandbox/ "${SBOX_UPLOAD_PATH}"
+      - run: aws s3 sync --delete --content-type 'text/css' --exclude '*' --include '*.css' dist/sandbox/ "${SBOX_UPLOAD_PATH}"
+
+  deploy-production:
+    needs: build-production
+    if: github.ref_type == 'tag' && !contains(github.ref_name, '-beta.') && github.base_ref == 'main'
+    runs-on: ubuntu-latest
+    permissions: { id-token: write, contents: read }
+    steps:
+      - uses: actions/download-artifact@v4
+        with: { name: sdk-dist-production, path: dist/production }
+      - uses: fatzebra/gh-workflows/aws_login@main
+        with:
+          platform: fz
+          environment: prod
+          role_name: AppDeploy
+      - run: aws s3 sync --delete --content-type 'application/javascript' --exclude '*' --include '*.js' dist/production/ "${PROD_UPLOAD_PATH}"
+      - run: aws s3 sync --delete --content-type 'text/css' --exclude '*' --include '*.css' dist/production/ "${PROD_UPLOAD_PATH}"
+
+  # Publish to npm for beta tags and production tags
+  publish-npm-beta:
+    runs-on: ubuntu-latest
+    if: startsWith(github.ref, 'refs/tags/') && contains(github.ref_name, '-beta.')
+    env:
+      TAG_NAME: ${{ github.ref_name }}          # e.g. v1.5.10-beta.0
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'   # writes .npmrc using NPM_TOKEN
+
+      - name: Show tag name
+        run: echo "Publishing for tag $TAG_NAME"
+
+      # make package.json version match the git tag (strip leading "v" if present)
+      - name: Sync package.json version to git tag
+        run: |
+          VERSION="${TAG_NAME#v}"                 # v1.5.10-beta.0 -> 1.5.10-beta.0
+          npm version --no-git-tag-version "$VERSION"
+          echo "package.json version: $(node -p "require('./package.json').version")"
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Run package build
+        run: npm run build:package
+
+      - name: Publish (beta dist-tag)
+        run: npm publish --access public --tag beta
+
+
+  # --- NPM publish for production tags (vX.Y.Z) ---
+  publish-npm-latest:
+    runs-on: ubuntu-latest
+    env:
+      TAG_NAME: ${{ github.ref_name }} 
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    if: startsWith(github.ref, 'refs/tags/') &&
+      !contains(github.ref_name, '-beta.')
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Tag Name
+        run: echo "Publishing for tag $TAG_NAME"
+
+      - name: Sync package.json version to git tag
+        run: |
+          VERSION="${TAG_NAME#v}"                  # v1.5.10 -> 1.5.10
+          npm version --no-git-tag-version "$VERSION"
+          echo "package.json version: $(node -p "require('./package.json').version")"
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Run package build
+        run: npm run build:package
+
+      - name: Publish (latest dist-tag)
+        run: npm publish --access public --tag latest

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ## Change log
 
+## [1.5.10] - 2025-08-11
+## Updated
+- bumped jsdom from ^16.2.1 to jsdom 26.1.0
+- bumped axios from ^1.6.4 to 1.11.0
+
+## [1.5.9] - 2025-07-09
+## Changed
+- VerifyExistingCard component will now always perform 3DS action. Previously, the VerifyExistingCard would only check if the card had been previously tokenized, unless sca_enabled: true was passed as an option. This update will run SCA regardless.
+
 ## [1.5.8] – 2025-05-27
 ### Changed
 - removed yarn.lock in favour of package-lock.json

package/dist/react/VerifyExistingCard.js

@@ -1,6 +1,10 @@
 import React from "react";
 import useFatZebra from "./useFatZebra";
 const VerifyExistingCard = ({ handlers, cardToken, config, iframeProps }) => {
+    let options = {
+        sca_enabled: true
+    };
+    config.options = Object.assign(Object.assign({}, (config.options || {})), options);
     const { verifyUrl } = useFatZebra({
         config,
         cardToken,

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.5.8";
+export declare const version = "1.5.9";

package/dist/version.js

@@ -1 +1 @@
-export const version = '1.5.8';
+export const version = '1.5.9';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fat-zebra/sdk",
-  "version": "1.5.8",
+  "version": "1.5.10-beta.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -45,7 +45,7 @@
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
     "jest-localstorage-mock": "^2.4.22",
-    "jsdom": "^16.2.1",
+    "jsdom": "^26.1.0",
     "jsonwebtoken": "^9.0.0",
     "nock": "^12.0.1",
     "react": "^18.3.1",
@@ -64,7 +64,7 @@
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "ajv-keywords": "^5.1.0",
-    "axios": "^1.6.4",
+    "axios": "^1.11.0",
     "custom-event-polyfill": "^1.0.7",
     "ts-polyfill": "^3.8.2",
     "url-template": "^3.1.0"
@@ -73,4 +73,4 @@
     "react": ">= 16",
     "react-dom": ">= 16"
   }
-}
+}

package/.idea/fatzebra-js.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/fatzebra-js.iml" filepath="$PROJECT_DIR$/.idea/fatzebra-js.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/prettier.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PrettierConfiguration">
-    <option name="myConfigurationMode" value="AUTOMATIC" />
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

package/dist/applepay/applepaymanager.d.ts

@@ -1,28 +0,0 @@
-import { PaymentRequest } from './clients/apple-pay-client';
-import * as payNow from './clients/paynow-client';
-import { PostMessage } from '../shared/post-message-client';
-declare class ApplePayManager {
-    private merchantId;
-    private canMakePayments;
-    private iframe;
-    private applePaySession;
-    private postMessageClient;
-    private fzPayNowDomain;
-    private username?;
-    private token?;
-    constructor(config: {
-        iframe: HTMLIFrameElement;
-        fzPayNowDomain: string;
-        username?: string;
-        token?: string;
-    });
-    initialize(): Promise<void>;
-    checkApplePayEligibility(): void;
-    notifyApplePayEligibility(): void;
-    registerEventListener(): Promise<void>;
-    purchase(request: PaymentRequest): Promise<void>;
-    extractApplePaymentRequestParams(payload: any): PaymentRequest;
-    extractPayNowPaymentAttributes(payload: any): payNow.PaymentAttributes;
-    sendMessage(payload: PostMessage): void;
-}
-export default ApplePayManager;

package/dist/applepay/applepaymanager.js

@@ -1,115 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { createSession, getEligibilty, } from './clients/apple-pay-client';
-import * as payNow from './clients/paynow-client';
-import { PostMessageClient } from '../shared/post-message-client';
-// import * as process from "process";
-const channel = 'applepay';
-// const fzPayNowDomain = process.env.PAYNOW_BASE_URL
-// do the domain handling stuff better
-const paynowDomain = 'https://paynow.test';
-const merchantSessionPath = '/v2/apple_pay/payment_session';
-const purchaseTokenPath = '/v2/apple_pay/token';
-class ApplePayManager {
-    constructor(config) {
-        // if (!config.fzPayNowDomain) {
-        //   console.log('hitting i here')
-        //   this.fzPayNowDomain = process?.env?.PAYNOW_BASE_URL;
-        // } else {
-        this.fzPayNowDomain = config.fzPayNowDomain;
-        this.username = config.username;
-        this.token = config.token;
-        // }
-        this.iframe = config.iframe;
-        this.postMessageClient = new PostMessageClient({
-            channel: 'applepay',
-            target: this.iframe
-        });
-        this.initialize();
-    }
-    initialize() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.registerEventListener();
-            this.checkApplePayEligibility();
-            this.notifyApplePayEligibility();
-        });
-    }
-    checkApplePayEligibility() {
-        if (getEligibilty()) {
-            this.canMakePayments = true;
-        }
-    }
-    notifyApplePayEligibility() {
-        const message = {
-            channel,
-            subject: 'eligibility',
-            data: {
-                canMakePayments: this.canMakePayments
-            }
-        };
-        this.postMessageClient.send(message);
-    }
-    registerEventListener() {
-        return new Promise((resolve, reject) => {
-            this.postMessageClient.setEventListeners({
-                'paymentrequest': (data) => __awaiter(this, void 0, void 0, function* () {
-                    yield this.purchase(data);
-                })
-            });
-            resolve();
-        });
-    }
-    purchase(request) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const applePayPaymentRequest = this.extractApplePaymentRequestParams(request);
-            const payNowPaymentAttributes = this.extractPayNowPaymentAttributes(request);
-            this.applePaySession = yield createSession(applePayPaymentRequest);
-            this.applePaySession.onvalidatemerchant = (event) => __awaiter(this, void 0, void 0, function* () {
-                let merchantSession;
-                try {
-                    merchantSession = yield payNow.getMerchantSession(event.validationURL, Object.assign(Object.assign({}, payNowPaymentAttributes), { merchant: this.username, domain_name: window.location.hostname, display_name: this.username }), `${paynowDomain}${merchantSessionPath}`, this.username, this.token);
-                }
-                catch (e) {
-                    console.log('Unable to establish new merchant session');
-                    return;
-                }
-                this.applePaySession.completeMerchantValidation(merchantSession);
-            });
-            this.applePaySession.onpaymentauthorized = (event) => __awaiter(this, void 0, void 0, function* () {
-                try {
-                    yield payNow.authorizePayment(Object.assign(Object.assign({}, payNowPaymentAttributes), { merchant: this.username, token: event.payment.token }), `${paynowDomain}${purchaseTokenPath}`);
-                    this.applePaySession.completePayment(window.ApplePaySession.STATUS_SUCCESS);
-                }
-                catch (e) {
-                    this.applePaySession.completePayment(window.ApplePaySession.STATUS_FAILURE);
-                }
-            });
-            this.applePaySession.begin();
-        });
-    }
-    extractApplePaymentRequestParams(payload) {
-        const { countryCode, currencyCode, merchantCapabilities, supportedNetworks, total, } = payload;
-        return {
-            countryCode,
-            currencyCode,
-            merchantCapabilities,
-            supportedNetworks,
-            total,
-        };
-    }
-    extractPayNowPaymentAttributes(payload) {
-        const { paymentAttributes } = payload;
-        return paymentAttributes;
-    }
-    sendMessage(payload) {
-        this.iframe.contentWindow.postMessage(payload, this.fzPayNowDomain);
-    }
-}
-export default ApplePayManager;

package/dist/local/fatzebra.css

@@ -1,91 +0,0 @@
-.checkout-button-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 200px;
-}
-
-.iframe-checkout {
-    flex: 1;
-    border: none;
-    width: 100%;
-    height: 100%;
-    min-height: 0;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-.iframe-foreground,
-.iframe-background {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    flex-direction: column;
-}
-
-.iframe-foreground,
-.iframe-background {
-    position: fixed;
-}
-
-.iframe-foreground {
-    z-index: -1;
-}
-
-.iframe-background {
-    background: rgba(0, 0, 0, 0.5);
-}
-
-.iframe-foreground {
-    flex-grow: 1;
-    top: auto;
-    width: 100%;
-    max-width: 480px;
-    height: 80vh;
-    background-color: #ffffff;
-    border-radius: 25px 25px 0 0;
-}
-
-.slide-in .iframe-foreground {
-    transform: translateY(100vh);
-    transition: transform 0.4s ease, z-index 0.3s ease 0.4s;
-    z-index: -1;
-}
-
-.slide-in .iframe-background {
-    opacity: 0;
-    z-index: -1;
-    transition: opacity 0.3s ease, z-index 0.3s ease 0.3s;
-}
-
-.slide-in.show .iframe-foreground {
-    transform: none;
-    transition: transform 0.4s ease;
-    z-index: 100;
-}
-
-.slide-in.show .iframe-background {
-    opacity: 1;
-    z-index: 0;
-    transition: opacity 0.3s ease;
-}
-
-@media only screen and (min-width: 480px) {
-    .iframe-foreground {
-        margin: 0 auto;
-    }
-}
-
-@media only screen and (min-width: 768px) {
-    .iframe-foreground {
-        margin: 0;
-        width: 400px;
-        height: 100vh;
-        left: 0;
-    }
-
-    .slide-in .iframe-foreground {
-        transform: translateX(-400px);
-    }
-}