From c75f789cccf1d29803645053b353445c39dfc3d8 Mon Sep 17 00:00:00 2001 From: PavlenkoM Date: Mon, 29 Sep 2025 12:58:21 +0300 Subject: [PATCH 1/4] feat(payment): create Stripe utils package --- .../stripeUPE/StripeShippingAddress.tsx | 2 +- packages/stripe-integration/src/index.ts | 1 + .../src/stripe-ocs/getStripeOCSStyles.ts | 3 +- .../stripe-integration/src/stripe-types.ts | 57 +++++++++++++++++++ 4 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 packages/stripe-integration/src/stripe-types.ts diff --git a/packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx b/packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx index 9063eea589..bb5e9eb4ac 100644 --- a/packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx +++ b/packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx @@ -5,12 +5,12 @@ import { type Country, type ShippingInitializeOptions, type ShippingRequestOptions, - type StripeShippingEvent } from '@bigcommerce/checkout-sdk'; import { memoizeOne } from '@bigcommerce/memoize'; import React, { type FunctionComponent, memo, useCallback, useEffect, useState } from 'react'; import { getAppliedStyles } from '@bigcommerce/checkout/dom-utils'; +import { StripeShippingEvent } from '@bigcommerce/checkout/stripe-integration'; import type CheckoutStepStatus from '../../checkout/CheckoutStepStatus'; import getRecommendedShippingOption from '../getRecommendedShippingOption'; diff --git a/packages/stripe-integration/src/index.ts b/packages/stripe-integration/src/index.ts index 78b3264e06..86b6774e49 100644 --- a/packages/stripe-integration/src/index.ts +++ b/packages/stripe-integration/src/index.ts @@ -2,3 +2,4 @@ export { default as StripeOCSPaymentMethod } from './stripe-ocs/StripeOCSPayment export { default as StripeUPEPaymentMethod } from './stripe-upe/StripeUPEPaymentMethod'; export { default as StripeV3PaymentMethod } from './stripev3/StripeV3PaymentMethod'; export { default as StripeLinkV2Button } from './stripe-ocs/StripeLinkV2Button'; +export * from './stripe-types'; diff --git a/packages/stripe-integration/src/stripe-ocs/getStripeOCSStyles.ts b/packages/stripe-integration/src/stripe-ocs/getStripeOCSStyles.ts index 004b30fad4..51a34d46e5 100644 --- a/packages/stripe-integration/src/stripe-ocs/getStripeOCSStyles.ts +++ b/packages/stripe-integration/src/stripe-ocs/getStripeOCSStyles.ts @@ -1,8 +1,9 @@ -import { type StripeAppearanceOptions, type StripeCustomFont } from '@bigcommerce/checkout-sdk'; import { isEmpty } from 'lodash'; import { getAppliedStyles } from '@bigcommerce/checkout/dom-utils'; +import type { StripeAppearanceOptions, StripeCustomFont } from '../stripe-types'; + const getStylesFromElement = ( selector: string, properties: string[], diff --git a/packages/stripe-integration/src/stripe-types.ts b/packages/stripe-integration/src/stripe-types.ts new file mode 100644 index 0000000000..a560868fbe --- /dev/null +++ b/packages/stripe-integration/src/stripe-types.ts @@ -0,0 +1,57 @@ +type StripeAppearanceValues = string | string[] | number | undefined; + +export interface StripeAppearanceOptions { + variables?: Record; + + rules?: Record>; +} + +interface CssFontSource { + cssSrc: string; +} + +interface CustomFontSource { + family: string; + src: string; + display?: string; + style?: string; + unicodeRange?: string; + weight?: string; +} + +export type StripeCustomFont = CssFontSource | CustomFontSource; + +interface StripeEvent { + complete: boolean; + elementType: string; + empty: boolean; +} + +interface StripeAddress { + city: string; + country: string; + line1: string; + line2?: string; + // eslint-disable-next-line @typescript-eslint/naming-convention + postal_code: string; + state: string; +} + +export interface StripeShippingEvent extends StripeEvent { + mode?: string; + isNewAddress?: boolean; + phoneFieldRequired: boolean; + value: { + address: StripeAddress; + name?: string; + firstName?: string; + lastName?: string; + phone?: string; + }; + fields?: { + phone: string; + }; + display?: { + name: string; + }; +} From 7253b91f311b2d343ac4f32c7db947cce0bba2c6 Mon Sep 17 00:00:00 2001 From: PavlenkoM Date: Mon, 29 Sep 2025 14:39:02 +0300 Subject: [PATCH 2/4] feat(payment): create Stripe utils package --- .../core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx | 2 +- packages/stripe-integration/project.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx b/packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx index bb5e9eb4ac..cee5330bfa 100644 --- a/packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx +++ b/packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx @@ -10,7 +10,7 @@ import { memoizeOne } from '@bigcommerce/memoize'; import React, { type FunctionComponent, memo, useCallback, useEffect, useState } from 'react'; import { getAppliedStyles } from '@bigcommerce/checkout/dom-utils'; -import { StripeShippingEvent } from '@bigcommerce/checkout/stripe-integration'; +import { type StripeShippingEvent } from '@bigcommerce/checkout/stripe-integration'; import type CheckoutStepStatus from '../../checkout/CheckoutStepStatus'; import getRecommendedShippingOption from '../getRecommendedShippingOption'; diff --git a/packages/stripe-integration/project.json b/packages/stripe-integration/project.json index 277d019c85..8b95539f55 100644 --- a/packages/stripe-integration/project.json +++ b/packages/stripe-integration/project.json @@ -17,5 +17,5 @@ } } }, - "tags": ["scope:integration"] + "tags": ["scope:integration", "scope:shared"] } From e4f3bfc851620e4ce4762da585c1545cf25e5e37 Mon Sep 17 00:00:00 2001 From: PavlenkoM Date: Tue, 14 Oct 2025 13:51:24 +0300 Subject: [PATCH 3/4] feat(payment): create Stripe utils package --- .../stripeUPE/StripeShippingAddress.tsx | 2 +- .../app/shipping/stripeUPE/stripe-types.ts | 33 +++++++++++++++++++ packages/stripe-integration/project.json | 2 +- 3 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 packages/core/src/app/shipping/stripeUPE/stripe-types.ts diff --git a/packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx b/packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx index cee5330bfa..8017176709 100644 --- a/packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx +++ b/packages/core/src/app/shipping/stripeUPE/StripeShippingAddress.tsx @@ -10,13 +10,13 @@ import { memoizeOne } from '@bigcommerce/memoize'; import React, { type FunctionComponent, memo, useCallback, useEffect, useState } from 'react'; import { getAppliedStyles } from '@bigcommerce/checkout/dom-utils'; -import { type StripeShippingEvent } from '@bigcommerce/checkout/stripe-integration'; import type CheckoutStepStatus from '../../checkout/CheckoutStepStatus'; import getRecommendedShippingOption from '../getRecommendedShippingOption'; import hasSelectedShippingOptions from '../hasSelectedShippingOptions'; import { type SingleShippingFormValues } from '../SingleShippingForm'; +import { type StripeShippingEvent } from './stripe-types'; import StripeShippingAddressDisplay from './StripeShippingAddressDisplay'; import StripeStateMapper from './StripeStateMapper'; diff --git a/packages/core/src/app/shipping/stripeUPE/stripe-types.ts b/packages/core/src/app/shipping/stripeUPE/stripe-types.ts new file mode 100644 index 0000000000..7bba20b20a --- /dev/null +++ b/packages/core/src/app/shipping/stripeUPE/stripe-types.ts @@ -0,0 +1,33 @@ +interface StripeEvent { + complete: boolean; + elementType: string; + empty: boolean; +} + +interface StripeAddress { + city: string; + country: string; + line1: string; + line2?: string; + postal_code: string; + state: string; +} + +export interface StripeShippingEvent extends StripeEvent { + mode?: string; + isNewAddress?: boolean; + phoneFieldRequired: boolean; + value: { + address: StripeAddress; + name?: string; + firstName?: string; + lastName?: string; + phone?: string; + }; + fields?: { + phone: string; + }; + display?: { + name: string; + }; +} diff --git a/packages/stripe-integration/project.json b/packages/stripe-integration/project.json index 8b95539f55..277d019c85 100644 --- a/packages/stripe-integration/project.json +++ b/packages/stripe-integration/project.json @@ -17,5 +17,5 @@ } } }, - "tags": ["scope:integration", "scope:shared"] + "tags": ["scope:integration"] } From 442667901a8aad802d9aa6bb5b43ed9f07e35be4 Mon Sep 17 00:00:00 2001 From: PavlenkoM Date: Wed, 15 Oct 2025 09:56:15 +0300 Subject: [PATCH 4/4] feat(payment): create Stripe utils package --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 901f794e3b..977aaecd86 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { - "@bigcommerce/checkout-sdk": "^1.808.0", + "@bigcommerce/checkout-sdk": "^1.809.0", "@bigcommerce/citadel": "^2.15.1", "@bigcommerce/form-poster": "^1.2.2", "@bigcommerce/memoize": "^1.0.0", @@ -2227,9 +2227,9 @@ } }, "node_modules/@bigcommerce/checkout-sdk": { - "version": "1.808.0", - "resolved": "https://registry.npmjs.org/@bigcommerce/checkout-sdk/-/checkout-sdk-1.808.0.tgz", - "integrity": "sha512-8PCJP2VnOoPKRlNGpeDKruvNK5fMiPh/TxrbA+RJi/A9nTzxl2deorkaXVDYaHhp1CBy1lRPYjfEayxM0KkPAQ==", + "version": "1.809.0", + "resolved": "https://registry.npmjs.org/@bigcommerce/checkout-sdk/-/checkout-sdk-1.809.0.tgz", + "integrity": "sha512-wpj/ZsduJBz5JYwOjwu5shMV3jKDkdCauXvlf/Nz3FBODJa+nI3kB/sy74+zGHJy6/mMxQ84vv4hMRalm68sEw==", "license": "MIT", "dependencies": { "@bigcommerce/bigpay-client": "^5.28.1", diff --git a/package.json b/package.json index 2bd026f380..e036a14dd0 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "prettier": "@bigcommerce/eslint-config/prettier", "homepage": "https://github.com/bigcommerce/checkout-js#readme", "dependencies": { - "@bigcommerce/checkout-sdk": "^1.808.0", + "@bigcommerce/checkout-sdk": "^1.809.0", "@bigcommerce/citadel": "^2.15.1", "@bigcommerce/form-poster": "^1.2.2", "@bigcommerce/memoize": "^1.0.0",