feat(payment): Added PPCP FL 3DS

Author: andriiVitvitskyi1990

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.744.1](https://github.com/bigcommerce/checkout-sdk-js/compare/v1.744.0...v1.744.1) (2025-06-10)
+
+
+### Bug Fixes
+
+* **payment:** Google Pay billing address update customFields added ([925cefa](https://github.com/bigcommerce/checkout-sdk-js/commit/925cefad0ef0a0bb6c676d23661f6ebe70f0dec1))
+
+## [1.744.0](https://github.com/bigcommerce/checkout-sdk-js/compare/v1.743.2...v1.744.0) (2025-06-10)
+
+
+### Features
+
+* **payment:** Move all Stripe OCS styling configs to checkout-js side ([2241704](https://github.com/bigcommerce/checkout-sdk-js/commit/2241704b2463ffcefce528dd3b21d64ae303a6e5))
+
 ### [1.743.2](https://github.com/bigcommerce/checkout-sdk-js/compare/v1.743.1...v1.743.2) (2025-06-04)
 
 ### [1.743.1](https://github.com/bigcommerce/checkout-sdk-js/compare/v1.743.0...v1.743.1) (2025-06-04)

dist/checkout-button.js

@@ -5151,6 +5151,19 @@ declare interface CreditCardPlaceHolder {
     encryptedSecurityCode: string;
 }
 
+/**
+ * This object is used to pass custom fonts when creating an [Elements](https://stripe.com/docs/js/elements_object/create) object.
+ */
+declare interface CssFontSource {
+    /**
+     * A relative or absolute URL pointing to a CSS file with [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) definitions, for example:
+     * `https://fonts.googleapis.com/css?family=Open+Sans`
+     * Note that if you are using a [content security policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) (CSP),
+     * [additional directives](https://stripe.com/docs/security#content-security-policy) may be necessary.
+     */
+    cssSrc: string;
+}
+
 declare interface CssProperties {
     background?: string;
     caretColor?: string;
@@ -5208,6 +5221,37 @@ declare interface CustomError extends Error {
     subtype?: string;
 }
 
+/**
+ * This object is used to pass custom fonts when creating an [Elements](https://stripe.com/docs/js/elements_object/create) object.
+ */
+declare interface CustomFontSource {
+    /**
+     * The name to give the font.
+     */
+    family: string;
+    /**
+     * A valid [src](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) value pointing to your
+     * custom font file. This is usually (though not always) a link to a file with a .woff , .otf, or .svg suffix.
+     */
+    src: string;
+    /**
+     * A valid [font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) value.
+     */
+    display?: string;
+    /**
+     * One of normal, italic, oblique. Defaults to normal.
+     */
+    style?: string;
+    /**
+     * A valid [unicode-range](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range) value.
+     */
+    unicodeRange?: string;
+    /**
+     * A valid [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). Note that this is a string, not a number.
+     */
+    weight?: string;
+}
+
 declare interface CustomItem {
     id: string;
     listPrice: number;
@@ -8599,6 +8643,18 @@ declare class StoredCardHostedFormService {
     deinitialize(): void;
 }
 
+/**
+ * All available options are here https://stripe.com/docs/stripe-js/appearance-api#supported-css-properties
+ */
+declare interface StripeAppearanceOptions {
+    variables?: Record<string, StripeAppearanceValues>;
+    rules?: Record<string, Record<string, StripeAppearanceValues>>;
+}
+
+declare type StripeAppearanceValues = string | string[] | number | undefined;
+
+declare type StripeCustomFont = CssFontSource | CustomFontSource;
+
 declare interface StripeCustomerEvent extends StripeEvent {
     collapsed?: boolean;
     authenticated: boolean;
@@ -8798,9 +8854,13 @@ declare interface StripeOCSPaymentInitializeOptions {
      */
     layout?: Record<string, string | number | boolean>;
     /**
-     * Checkout styles from store theme
+     * Stripe OCS appearance options for styling the accordion.
+     */
+    appearance?: StripeAppearanceOptions;
+    /**
+     * Stripe OCS fonts options for styling the accordion.
      */
-    style?: Record<string, StripeUPEAppearanceValues>;
+    fonts?: StripeCustomFont[];
     onError?(error?: Error): void;
     render(): void;
     initStripeElementUpdateTrigger?(updateTriggerFn: (payload: StripeElementUpdateOptions) => void): void;
@@ -8834,8 +8894,6 @@ declare interface StripeShippingEvent extends StripeEvent {
     };
 }
 
-declare type StripeUPEAppearanceValues = string | string[] | number | undefined;
-
 declare interface StripeUPECustomerInitializeOptions {
     /**
      * The ID of a container which the stripe iframe should be inserted.
@@ -8899,7 +8957,7 @@ declare interface StripeUPEPaymentInitializeOptions {
     /**
      * Checkout styles from store theme
      */
-    style?: Record<string, StripeUPEAppearanceValues>;
+    style?: Record<string, StripeAppearanceValues>;
     onError?(error?: Error): void;
     render(): void;
     initStripeElementUpdateTrigger?(updateTriggerFn: (payload: StripeElementUpdateOptions) => void): void;

dist/checkout-button.js.map

@@ -223,9 +223,11 @@
 - [CreditCardInstrument](interfaces/CreditCardInstrument.md)
 - [CreditCardPaymentInitializeOptions_2](interfaces/CreditCardPaymentInitializeOptions_2.md)
 - [CreditCardPlaceHolder](interfaces/CreditCardPlaceHolder.md)
+- [CssFontSource](interfaces/CssFontSource.md)
 - [CssProperties](interfaces/CssProperties.md)
 - [Currency](interfaces/Currency.md)
 - [CustomError](interfaces/CustomError.md)
+- [CustomFontSource](interfaces/CustomFontSource.md)
 - [CustomItem](interfaces/CustomItem.md)
 - [Customer](interfaces/Customer.md)
 - [CustomerAccountRequestBody](interfaces/CustomerAccountRequestBody.md)
@@ -439,6 +441,7 @@
 - [StoredCardHostedFormBillingAddress](interfaces/StoredCardHostedFormBillingAddress.md)
 - [StoredCardHostedFormData](interfaces/StoredCardHostedFormData.md)
 - [StoredCardHostedFormInstrumentFields](interfaces/StoredCardHostedFormInstrumentFields.md)
+- [StripeAppearanceOptions](interfaces/StripeAppearanceOptions.md)
 - [StripeCustomerEvent](interfaces/StripeCustomerEvent.md)
 - [StripeElementCSSProperties](interfaces/StripeElementCSSProperties.md)
 - [StripeElementClasses](interfaces/StripeElementClasses.md)
@@ -590,9 +593,10 @@
 - [PaymentInstrument](README.md#paymentinstrument)
 - [PaymentProviderCustomer](README.md#paymentprovidercustomer)
 - [ReadableCheckoutStore](README.md#readablecheckoutstore)
+- [StripeAppearanceValues](README.md#stripeappearancevalues)
+- [StripeCustomFont](README.md#stripecustomfont)
 - [StripeElementOptions](README.md#stripeelementoptions)
 - [StripeEventType](README.md#stripeeventtype)
-- [StripeUPEAppearanceValues](README.md#stripeupeappearancevalues)
 - [WithGooglePayButtonInitializeOptions](README.md#withgooglepaybuttoninitializeoptions)
 - [WithGooglePayCustomerInitializeOptions](README.md#withgooglepaycustomerinitializeoptions)
 - [WithGooglePayPaymentInitializeOptions](README.md#withgooglepaypaymentinitializeoptions)
@@ -946,21 +950,27 @@ ___
 
 ___
 
-### StripeElementOptions
+### StripeAppearanceValues
 
-Ƭ **StripeElementOptions**: [`CardElementOptions`](interfaces/CardElementOptions.md) \| [`CardExpiryElementOptions`](interfaces/CardExpiryElementOptions.md) \| [`CardNumberElementOptions`](interfaces/CardNumberElementOptions.md) \| [`CardCvcElementOptions`](interfaces/CardCvcElementOptions.md) \| [`IdealElementOptions`](interfaces/IdealElementOptions.md) \| [`IbanElementOptions`](interfaces/IbanElementOptions.md) \| [`ZipCodeElementOptions`](interfaces/ZipCodeElementOptions.md)
+Ƭ **StripeAppearanceValues**: `string` \| `string`[] \| `number` \| `undefined`
 
 ___
 
-### StripeEventType
+### StripeCustomFont
 
-Ƭ **StripeEventType**: [`StripeShippingEvent`](interfaces/StripeShippingEvent.md) \| [`StripeCustomerEvent`](interfaces/StripeCustomerEvent.md)
+Ƭ **StripeCustomFont**: [`CssFontSource`](interfaces/CssFontSource.md) \| [`CustomFontSource`](interfaces/CustomFontSource.md)
+
+___
+
+### StripeElementOptions
+
+Ƭ **StripeElementOptions**: [`CardElementOptions`](interfaces/CardElementOptions.md) \| [`CardExpiryElementOptions`](interfaces/CardExpiryElementOptions.md) \| [`CardNumberElementOptions`](interfaces/CardNumberElementOptions.md) \| [`CardCvcElementOptions`](interfaces/CardCvcElementOptions.md) \| [`IdealElementOptions`](interfaces/IdealElementOptions.md) \| [`IbanElementOptions`](interfaces/IbanElementOptions.md) \| [`ZipCodeElementOptions`](interfaces/ZipCodeElementOptions.md)
 
 ___
 
-### StripeUPEAppearanceValues
+### StripeEventType
 
-Ƭ **StripeUPEAppearanceValues**: `string` \| `string`[] \| `number` \| `undefined`
+Ƭ **StripeEventType**: [`StripeShippingEvent`](interfaces/StripeShippingEvent.md) \| [`StripeCustomerEvent`](interfaces/StripeCustomerEvent.md)
 
 ___
 

dist/checkout-button.umd.js

@@ -0,0 +1,22 @@
+[@bigcommerce/checkout-sdk](../README.md) / CssFontSource
+
+# Interface: CssFontSource
+
+This object is used to pass custom fonts when creating an [Elements](https://stripe.com/docs/js/elements_object/create) object.
+
+## Table of contents
+
+### Properties
+
+- [cssSrc](CssFontSource.md#csssrc)
+
+## Properties
+
+### cssSrc
+
+• **cssSrc**: `string`
+
+A relative or absolute URL pointing to a CSS file with [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) definitions, for example:
+`https://fonts.googleapis.com/css?family=Open+Sans`
+Note that if you are using a [content security policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) (CSP),
+[additional directives](https://stripe.com/docs/security#content-security-policy) may be necessary.

dist/checkout-button.umd.js.map

@@ -0,0 +1,65 @@
+[@bigcommerce/checkout-sdk](../README.md) / CustomFontSource
+
+# Interface: CustomFontSource
+
+This object is used to pass custom fonts when creating an [Elements](https://stripe.com/docs/js/elements_object/create) object.
+
+## Table of contents
+
+### Properties
+
+- [display](CustomFontSource.md#display)
+- [family](CustomFontSource.md#family)
+- [src](CustomFontSource.md#src)
+- [style](CustomFontSource.md#style)
+- [unicodeRange](CustomFontSource.md#unicoderange)
+- [weight](CustomFontSource.md#weight)
+
+## Properties
+
+### display
+
+• `Optional` **display**: `string`
+
+A valid [font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) value.
+
+___
+
+### family
+
+• **family**: `string`
+
+The name to give the font.
+
+___
+
+### src
+
+• **src**: `string`
+
+A valid [src](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) value pointing to your
+custom font file. This is usually (though not always) a link to a file with a .woff , .otf, or .svg suffix.
+
+___
+
+### style
+
+• `Optional` **style**: `string`
+
+One of normal, italic, oblique. Defaults to normal.
+
+___
+
+### unicodeRange
+
+• `Optional` **unicodeRange**: `string`
+
+A valid [unicode-range](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range) value.
+
+___
+
+### weight
+
+• `Optional` **weight**: `string`
+
+A valid [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). Note that this is a string, not a number.

dist/checkout-sdk.d.ts

@@ -0,0 +1,24 @@
+[@bigcommerce/checkout-sdk](../README.md) / StripeAppearanceOptions
+
+# Interface: StripeAppearanceOptions
+
+All available options are here https://stripe.com/docs/stripe-js/appearance-api#supported-css-properties
+
+## Table of contents
+
+### Properties
+
+- [rules](StripeAppearanceOptions.md#rules)
+- [variables](StripeAppearanceOptions.md#variables)
+
+## Properties
+
+### rules
+
+• `Optional` **rules**: `Record`<`string`, `Record`<`string`, [`StripeAppearanceValues`](../README.md#stripeappearancevalues)\>\>
+
+___
+
+### variables
+
+• `Optional` **variables**: `Record`<`string`, [`StripeAppearanceValues`](../README.md#stripeappearancevalues)\>

dist/checkout-sdk.js

@@ -27,9 +27,10 @@ service.initializePayment({
 
 ### Properties
 
+- [appearance](StripeOCSPaymentInitializeOptions.md#appearance)
 - [containerId](StripeOCSPaymentInitializeOptions.md#containerid)
+- [fonts](StripeOCSPaymentInitializeOptions.md#fonts)
 - [layout](StripeOCSPaymentInitializeOptions.md#layout)
-- [style](StripeOCSPaymentInitializeOptions.md#style)
 
 ### Methods
 
@@ -41,6 +42,14 @@ service.initializePayment({
 
 ## Properties
 
+### appearance
+
+• `Optional` **appearance**: [`StripeAppearanceOptions`](StripeAppearanceOptions.md)
+
+Stripe OCS appearance options for styling the accordion.
+
+___
+
 ### containerId
 
 • **containerId**: `string`
@@ -49,19 +58,19 @@ The location to insert the credit card number form field.
 
 ___
 
-### layout
+### fonts
 
-• `Optional` **layout**: `Record`<`string`, `string` \| `number` \| `boolean`\>
+• `Optional` **fonts**: [`StripeCustomFont`](../README.md#stripecustomfont)[]
 
-Stripe OCS layout options
+Stripe OCS fonts options for styling the accordion.
 
 ___
 
-### style
+### layout
 
-• `Optional` **style**: `Record`<`string`, [`StripeUPEAppearanceValues`](../README.md#stripeupeappearancevalues)\>
+• `Optional` **layout**: `Record`<`string`, `string` \| `number` \| `boolean`\>
 
-Checkout styles from store theme
+Stripe OCS layout options
 
 ## Methods
 

dist/checkout-sdk.js.map

@@ -47,7 +47,7 @@ ___
 
 ### style
 
-• `Optional` **style**: `Record`<`string`, [`StripeUPEAppearanceValues`](../README.md#stripeupeappearancevalues)\>
+• `Optional` **style**: `Record`<`string`, [`StripeAppearanceValues`](../README.md#stripeappearancevalues)\>
 
 Checkout styles from store theme
 

dist/checkout-sdk.umd.js

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/checkout-sdk",
-  "version": "1.743.2",
+  "version": "1.744.1",
   "description": "BigCommerce Checkout JavaScript SDK",
   "license": "MIT",
   "main": "dist/checkout-sdk.js",