diff --git a/packages/stripe/CHANGELOG.md b/packages/stripe/CHANGELOG.md
index 7b3f76d3a..13c9ce83d 100644
--- a/packages/stripe/CHANGELOG.md
+++ b/packages/stripe/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 9.2.2
+**Fixes**
+- Updates json_annotation version requirement
+
 ## 9.2.1
 **Fixes**
 - Move amount value to GooglePayPaymentMethodParams #1255 
diff --git a/packages/stripe/pubspec.yaml b/packages/stripe/pubspec.yaml
index db26f25b9..dedf501d0 100644
--- a/packages/stripe/pubspec.yaml
+++ b/packages/stripe/pubspec.yaml
@@ -1,6 +1,6 @@
 name: flutter_stripe
 description: Flutter library for Stripe. Supports PaymentSheets, Apple & Google Pay, SCA, PSD2 and much more.
-version: 9.2.1
+version: 9.2.2
 homepage: https://github.com/flutter-stripe/flutter_stripe
 repository: https://github.com/flutter-stripe/flutter_stripe
 
@@ -24,7 +24,7 @@ dependencies:
   meta: ^1.8.0
   stripe_android: ^9.2.1
   stripe_ios: ^9.2.1
-  stripe_platform_interface: ^9.2.1
+  stripe_platform_interface: ^9.2.2
 dev_dependencies:
   flutter_test:
     sdk: flutter
diff --git a/packages/stripe_js/CHANGELOG.md b/packages/stripe_js/CHANGELOG.md
index 1778a0512..75d7eefc7 100644
--- a/packages/stripe_js/CHANGELOG.md
+++ b/packages/stripe_js/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 3.1.0
+- Makes WebStripe a singleton accessible by WebStripe.instance
+- Allows to change the layout for the payment element. Closes [#1260](https://github.com/flutter-stripe/flutter_stripe/pull/1270#:~:text=Makes%20a%20singleton,flow%C2%A0%231075)
+- Allows to change the full appearance for the payment element. It is possible to fully customize it by adding any of the values from the appearance api.
+- Fixes parsing PaymentMethod to contain dates and last4 digits. Closes [#1212](https://github.com/flutter-stripe/flutter_stripe/pull/1270#:~:text=Makes%20a%20singleton,flow%C2%A0%231075)
+- Fixes parsing Address to not add empty strings if null. Closes [#1208](https://github.com/flutter-stripe/flutter_stripe/pull/1270#:~:text=Makes%20a%20singleton,flow%C2%A0%231075)
+- Adds support for confirmAcssDebitPayment on web WebStripe.instance.confirmAcssDebitPayment. Ref [#794](https://github.com/flutter-stripe/flutter_stripe/pull/1270#:~:text=Makes%20a%20singleton,flow%C2%A0%231075)
+- Fixes text color not sync with CardStyle on the web card field. Closes [#541](https://github.com/flutter-stripe/flutter_stripe/pull/1270#:~:text=Makes%20a%20singleton,flow%C2%A0%231075)
+- Adds independent method for confirmIdealPayment: WebStripe.instance.confirmIdealPayment, that allows to pass a custom returnUrl. Ref [#1075](https://github.com/flutter-stripe/flutter_stripe/pull/1270#:~:text=Makes%20a%20singleton,flow%C2%A0%231075)
+
 ## 3.0.1
 Fixes PaymentConfirmationRedirect.ifRedirect enum value parsing
 ## 3.0.0
diff --git a/packages/stripe_js/pubspec.yaml b/packages/stripe_js/pubspec.yaml
index a995a44ab..42f1eeb01 100644
--- a/packages/stripe_js/pubspec.yaml
+++ b/packages/stripe_js/pubspec.yaml
@@ -1,20 +1,20 @@
 name: stripe_js
 description: Stripe.js bindings for dart. This package is used by Stripe web so that the Stripe js sdk can be invoked directly.
-version: 3.0.1
+version: 3.1.0
 homepage: https://github.com/flutter-stripe/flutter_stripe
 
 environment:
-  sdk: ">=2.16.0 <4.0.0"
+  sdk: ">=2.17.0 <4.0.0"
 
 dependencies:
   freezed_annotation: ^2.2.0
   js: ^0.6.3
-  json_annotation: ^4.5.0
+  json_annotation: ^4.8.1
   meta: ^1.0.0
 
 dev_dependencies:
   build_runner: ^2.3.2
-  freezed: ^2.2.1
+  freezed: ^2.3.5
   json_serializable: ^6.5.4
   test: ^1.22.0
   
diff --git a/packages/stripe_platform_interface/CHANGELOG.md b/packages/stripe_platform_interface/CHANGELOG.md
index 8b918445b..df6a14d76 100644
--- a/packages/stripe_platform_interface/CHANGELOG.md
+++ b/packages/stripe_platform_interface/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 9.2.2
+**Fixes**
+- Updates json_annotation version requirement
 ## 9.2.1
 **Fixes**
 - Move amount value to GooglePayPaymentMethodParams #1255 
diff --git a/packages/stripe_platform_interface/lib/src/models/aubecs_form.freezed.dart b/packages/stripe_platform_interface/lib/src/models/aubecs_form.freezed.dart
index d7d4c47cf..4c7eaa0ab 100644
--- a/packages/stripe_platform_interface/lib/src/models/aubecs_form.freezed.dart
+++ b/packages/stripe_platform_interface/lib/src/models/aubecs_form.freezed.dart
@@ -56,17 +56,17 @@ abstract class $AubecsFormStyleCopyWith<$Res> {
   @useResult
   $Res call(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? textColor,
+          Color? textColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? textErrorColor,
+          Color? textErrorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? placeholderColor,
+          Color? placeholderColor,
       int? fontSize,
       int? borderWidth,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? backgroundColor,
+          Color? backgroundColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? borderColor,
+          Color? borderColor,
       int? borderRadius});
 }
 
@@ -139,17 +139,17 @@ abstract class _$$_AubecsFormStyleCopyWith<$Res>
   @useResult
   $Res call(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? textColor,
+          Color? textColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? textErrorColor,
+          Color? textErrorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? placeholderColor,
+          Color? placeholderColor,
       int? fontSize,
       int? borderWidth,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? backgroundColor,
+          Color? backgroundColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? borderColor,
+          Color? borderColor,
       int? borderRadius});
 }
 
@@ -216,17 +216,17 @@ class __$$_AubecsFormStyleCopyWithImpl<$Res>
 class _$_AubecsFormStyle implements _AubecsFormStyle {
   const _$_AubecsFormStyle(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.textColor,
+          this.textColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.textErrorColor,
+          this.textErrorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.placeholderColor,
+          this.placeholderColor,
       this.fontSize,
       this.borderWidth,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.backgroundColor,
+          this.backgroundColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.borderColor,
+          this.borderColor,
       this.borderRadius});
 
   factory _$_AubecsFormStyle.fromJson(Map<String, dynamic> json) =>
@@ -320,17 +320,17 @@ class _$_AubecsFormStyle implements _AubecsFormStyle {
 abstract class _AubecsFormStyle implements AubecsFormStyle {
   const factory _AubecsFormStyle(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? textColor,
+          final Color? textColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? textErrorColor,
+          final Color? textErrorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? placeholderColor,
+          final Color? placeholderColor,
       final int? fontSize,
       final int? borderWidth,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? backgroundColor,
+          final Color? backgroundColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? borderColor,
+          final Color? borderColor,
       final int? borderRadius}) = _$_AubecsFormStyle;
 
   factory _AubecsFormStyle.fromJson(Map<String, dynamic> json) =
diff --git a/packages/stripe_platform_interface/lib/src/models/card_field_input.freezed.dart b/packages/stripe_platform_interface/lib/src/models/card_field_input.freezed.dart
index 494594877..77592ea3f 100644
--- a/packages/stripe_platform_interface/lib/src/models/card_field_input.freezed.dart
+++ b/packages/stripe_platform_interface/lib/src/models/card_field_input.freezed.dart
@@ -60,20 +60,20 @@ abstract class $CardStyleCopyWith<$Res> {
   $Res call(
       {int? borderWidth,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? backgroundColor,
+          Color? backgroundColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? borderColor,
+          Color? borderColor,
       int? borderRadius,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? cursorColor,
+          Color? cursorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? textColor,
+          Color? textColor,
       int? fontSize,
       String? fontFamily,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? textErrorColor,
+          Color? textErrorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? placeholderColor});
+          Color? placeholderColor});
 }
 
 /// @nodoc
@@ -156,20 +156,20 @@ abstract class _$$_CardStyleConstructorCopyWith<$Res>
   $Res call(
       {int? borderWidth,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? backgroundColor,
+          Color? backgroundColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? borderColor,
+          Color? borderColor,
       int? borderRadius,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? cursorColor,
+          Color? cursorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? textColor,
+          Color? textColor,
       int? fontSize,
       String? fontFamily,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? textErrorColor,
+          Color? textErrorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? placeholderColor});
+          Color? placeholderColor});
 }
 
 /// @nodoc
@@ -246,20 +246,20 @@ class _$_CardStyleConstructor extends _CardStyleConstructor {
   _$_CardStyleConstructor(
       {this.borderWidth,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.backgroundColor,
+          this.backgroundColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.borderColor,
+          this.borderColor,
       this.borderRadius,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.cursorColor,
+          this.cursorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.textColor,
+          this.textColor,
       this.fontSize,
       this.fontFamily,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.textErrorColor,
+          this.textErrorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.placeholderColor})
+          this.placeholderColor})
       : super._();
 
   factory _$_CardStyleConstructor.fromJson(Map<String, dynamic> json) =>
@@ -367,20 +367,20 @@ abstract class _CardStyleConstructor extends CardStyle {
   factory _CardStyleConstructor(
       {final int? borderWidth,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? backgroundColor,
+          final Color? backgroundColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? borderColor,
+          final Color? borderColor,
       final int? borderRadius,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? cursorColor,
+          final Color? cursorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? textColor,
+          final Color? textColor,
       final int? fontSize,
       final String? fontFamily,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? textErrorColor,
+          final Color? textErrorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? placeholderColor}) = _$_CardStyleConstructor;
+          final Color? placeholderColor}) = _$_CardStyleConstructor;
   _CardStyleConstructor._() : super._();
 
   factory _CardStyleConstructor.fromJson(Map<String, dynamic> json) =
@@ -472,20 +472,20 @@ abstract class $CardFormStyleCopyWith<$Res> {
   @useResult
   $Res call(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? backgroundColor,
+          Color? backgroundColor,
       int? borderWidth,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? borderColor,
+          Color? borderColor,
       int? borderRadius,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? cursorColor,
+          Color? cursorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? textColor,
+          Color? textColor,
       int? fontSize,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? textErrorColor,
+          Color? textErrorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? placeholderColor});
+          Color? placeholderColor});
 }
 
 /// @nodoc
@@ -563,20 +563,20 @@ abstract class _$$_CardFormStyleConstructorCopyWith<$Res>
   @useResult
   $Res call(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? backgroundColor,
+          Color? backgroundColor,
       int? borderWidth,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? borderColor,
+          Color? borderColor,
       int? borderRadius,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? cursorColor,
+          Color? cursorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? textColor,
+          Color? textColor,
       int? fontSize,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? textErrorColor,
+          Color? textErrorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? placeholderColor});
+          Color? placeholderColor});
 }
 
 /// @nodoc
@@ -647,20 +647,20 @@ class __$$_CardFormStyleConstructorCopyWithImpl<$Res>
 class _$_CardFormStyleConstructor extends _CardFormStyleConstructor {
   _$_CardFormStyleConstructor(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.backgroundColor,
+          this.backgroundColor,
       this.borderWidth,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.borderColor,
+          this.borderColor,
       this.borderRadius,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.cursorColor,
+          this.cursorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.textColor,
+          this.textColor,
       this.fontSize,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.textErrorColor,
+          this.textErrorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.placeholderColor})
+          this.placeholderColor})
       : super._();
 
   factory _$_CardFormStyleConstructor.fromJson(Map<String, dynamic> json) =>
@@ -761,20 +761,20 @@ class _$_CardFormStyleConstructor extends _CardFormStyleConstructor {
 abstract class _CardFormStyleConstructor extends CardFormStyle {
   factory _CardFormStyleConstructor(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? backgroundColor,
+          final Color? backgroundColor,
       final int? borderWidth,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? borderColor,
+          final Color? borderColor,
       final int? borderRadius,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? cursorColor,
+          final Color? cursorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? textColor,
+          final Color? textColor,
       final int? fontSize,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? textErrorColor,
+          final Color? textErrorColor,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? placeholderColor}) = _$_CardFormStyleConstructor;
+          final Color? placeholderColor}) = _$_CardFormStyleConstructor;
   _CardFormStyleConstructor._() : super._();
 
   factory _CardFormStyleConstructor.fromJson(Map<String, dynamic> json) =
diff --git a/packages/stripe_platform_interface/lib/src/models/errors.freezed.dart b/packages/stripe_platform_interface/lib/src/models/errors.freezed.dart
index 615488b71..c6c5fc9a9 100644
--- a/packages/stripe_platform_interface/lib/src/models/errors.freezed.dart
+++ b/packages/stripe_platform_interface/lib/src/models/errors.freezed.dart
@@ -117,7 +117,7 @@ class _$_StripeErrorGeneric<T> implements _StripeErrorGeneric<T> {
   const _$_StripeErrorGeneric(
       {required this.message,
       @JsonKey(fromJson: _dataFromJson, toJson: _dataToJson)
-      required this.code});
+          required this.code});
 
   factory _$_StripeErrorGeneric.fromJson(Map<String, dynamic> json) =>
       _$$_StripeErrorGenericFromJson(json);
@@ -166,7 +166,7 @@ abstract class _StripeErrorGeneric<T> implements StripeError<T> {
   const factory _StripeErrorGeneric(
       {required final String message,
       @JsonKey(fromJson: _dataFromJson, toJson: _dataToJson)
-      required final T code}) = _$_StripeErrorGeneric<T>;
+          required final T code}) = _$_StripeErrorGeneric<T>;
 
   factory _StripeErrorGeneric.fromJson(Map<String, dynamic> json) =
       _$_StripeErrorGeneric<T>.fromJson;
diff --git a/packages/stripe_platform_interface/lib/src/models/payment_methods.freezed.dart b/packages/stripe_platform_interface/lib/src/models/payment_methods.freezed.dart
index 9e562ba0b..9d3a45431 100644
--- a/packages/stripe_platform_interface/lib/src/models/payment_methods.freezed.dart
+++ b/packages/stripe_platform_interface/lib/src/models/payment_methods.freezed.dart
@@ -574,16 +574,24 @@ abstract class _PaymentMethod implements PaymentMethod {
       required final bool livemode,
       required final String paymentMethodType,
       required final BillingDetails billingDetails,
-      @JsonKey(name: 'Card') required final Card card,
-      @JsonKey(name: 'SepaDebit') required final SepaDebit sepaDebit,
-      @JsonKey(name: 'BacsDebit') required final BacsDebit bacsDebit,
-      @JsonKey(name: 'AuBecsDebit') required final AuBecsDebit auBecsDebit,
-      @JsonKey(name: 'Sofort') required final Sofort sofort,
-      @JsonKey(name: 'Ideal') required final Ideal ideal,
-      @JsonKey(name: 'Fpx') required final Fpx fpx,
-      @JsonKey(name: 'Upi') required final Upi upi,
+      @JsonKey(name: 'Card')
+          required final Card card,
+      @JsonKey(name: 'SepaDebit')
+          required final SepaDebit sepaDebit,
+      @JsonKey(name: 'BacsDebit')
+          required final BacsDebit bacsDebit,
+      @JsonKey(name: 'AuBecsDebit')
+          required final AuBecsDebit auBecsDebit,
+      @JsonKey(name: 'Sofort')
+          required final Sofort sofort,
+      @JsonKey(name: 'Ideal')
+          required final Ideal ideal,
+      @JsonKey(name: 'Fpx')
+          required final Fpx fpx,
+      @JsonKey(name: 'Upi')
+          required final Upi upi,
       @JsonKey(name: 'USBankAccount')
-      required final UsBankAccount usBankAccount,
+          required final UsBankAccount usBankAccount,
       final String? customerId}) = _$_PaymentMethod;
 
   factory _PaymentMethod.fromJson(Map<String, dynamic> json) =
diff --git a/packages/stripe_platform_interface/lib/src/models/payment_sheet.freezed.dart b/packages/stripe_platform_interface/lib/src/models/payment_sheet.freezed.dart
index 1e277accc..7413660ed 100644
--- a/packages/stripe_platform_interface/lib/src/models/payment_sheet.freezed.dart
+++ b/packages/stripe_platform_interface/lib/src/models/payment_sheet.freezed.dart
@@ -625,12 +625,13 @@ abstract class _SetupParameters implements SetupPaymentSheetParameters {
       final String? setupIntentClientSecret,
       final String? merchantDisplayName,
       final PaymentSheetApplePay? applePay,
-      @JsonKey(toJson: UserInterfaceStyleKey.toJson) final ThemeMode? style,
+      @JsonKey(toJson: UserInterfaceStyleKey.toJson)
+          final ThemeMode? style,
       final PaymentSheetGooglePay? googlePay,
       final bool allowsDelayedPaymentMethods,
       final PaymentSheetAppearance? appearance,
       @JsonKey(name: 'defaultBillingDetails')
-      final BillingDetails? billingDetails,
+          final BillingDetails? billingDetails,
       final String? returnURL,
       final BillingDetailsCollectionConfiguration?
           billingDetailsCollectionConfiguration}) = _$_SetupParameters;
@@ -753,7 +754,7 @@ mixin _$PaymentSheetApplePay {
   /// ability to track and manage their purchases in Wallet. Stripe calls your implementation after the
   /// payment is complete, but before iOS dismisses the Apple Pay sheet. You must call the `completion`
   /// function, or else the Apple Pay sheet will hang.
-  @JsonKey(ignore: true)
+  @JsonKey(includeFromJson: false, includeToJson: false)
   OnOrderTracking? get setOrderTracking => throw _privateConstructorUsedError;
 
   Map<String, dynamic> toJson() => throw _privateConstructorUsedError;
@@ -773,7 +774,8 @@ abstract class $PaymentSheetApplePayCopyWith<$Res> {
       List<ApplePayCartSummaryItem>? cartItems,
       PlatformButtonType? buttonType,
       PaymentRequestType? request,
-      @JsonKey(ignore: true) OnOrderTracking? setOrderTracking});
+      @JsonKey(includeFromJson: false, includeToJson: false)
+          OnOrderTracking? setOrderTracking});
 
   $PaymentRequestTypeCopyWith<$Res>? get request;
 }
@@ -848,7 +850,8 @@ abstract class _$$_PaymentSheetApplePayCopyWith<$Res>
       List<ApplePayCartSummaryItem>? cartItems,
       PlatformButtonType? buttonType,
       PaymentRequestType? request,
-      @JsonKey(ignore: true) OnOrderTracking? setOrderTracking});
+      @JsonKey(includeFromJson: false, includeToJson: false)
+          OnOrderTracking? setOrderTracking});
 
   @override
   $PaymentRequestTypeCopyWith<$Res>? get request;
@@ -905,7 +908,8 @@ class _$_PaymentSheetApplePay implements _PaymentSheetApplePay {
       final List<ApplePayCartSummaryItem>? cartItems,
       this.buttonType,
       this.request,
-      @JsonKey(ignore: true) this.setOrderTracking})
+      @JsonKey(includeFromJson: false, includeToJson: false)
+          this.setOrderTracking})
       : _cartItems = cartItems;
 
   factory _$_PaymentSheetApplePay.fromJson(Map<String, dynamic> json) =>
@@ -943,7 +947,7 @@ class _$_PaymentSheetApplePay implements _PaymentSheetApplePay {
   /// payment is complete, but before iOS dismisses the Apple Pay sheet. You must call the `completion`
   /// function, or else the Apple Pay sheet will hang.
   @override
-  @JsonKey(ignore: true)
+  @JsonKey(includeFromJson: false, includeToJson: false)
   final OnOrderTracking? setOrderTracking;
 
   @override
@@ -994,12 +998,12 @@ class _$_PaymentSheetApplePay implements _PaymentSheetApplePay {
 
 abstract class _PaymentSheetApplePay implements PaymentSheetApplePay {
   const factory _PaymentSheetApplePay(
-          {required final String merchantCountryCode,
-          final List<ApplePayCartSummaryItem>? cartItems,
-          final PlatformButtonType? buttonType,
-          final PaymentRequestType? request,
-          @JsonKey(ignore: true) final OnOrderTracking? setOrderTracking}) =
-      _$_PaymentSheetApplePay;
+      {required final String merchantCountryCode,
+      final List<ApplePayCartSummaryItem>? cartItems,
+      final PlatformButtonType? buttonType,
+      final PaymentRequestType? request,
+      @JsonKey(includeFromJson: false, includeToJson: false)
+          final OnOrderTracking? setOrderTracking}) = _$_PaymentSheetApplePay;
 
   factory _PaymentSheetApplePay.fromJson(Map<String, dynamic> json) =
       _$_PaymentSheetApplePay.fromJson;
@@ -1027,7 +1031,7 @@ abstract class _PaymentSheetApplePay implements PaymentSheetApplePay {
   /// ability to track and manage their purchases in Wallet. Stripe calls your implementation after the
   /// payment is complete, but before iOS dismisses the Apple Pay sheet. You must call the `completion`
   /// function, or else the Apple Pay sheet will hang.
-  @JsonKey(ignore: true)
+  @JsonKey(includeFromJson: false, includeToJson: false)
   OnOrderTracking? get setOrderTracking;
   @override
   @JsonKey(ignore: true)
@@ -1555,27 +1559,27 @@ abstract class $PaymentSheetAppearanceColorsCopyWith<$Res> {
   @useResult
   $Res call(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? primary,
+          Color? primary,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? background,
+          Color? background,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? componentBackground,
+          Color? componentBackground,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? componentBorder,
+          Color? componentBorder,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? componentDivider,
+          Color? componentDivider,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? componentText,
+          Color? componentText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? primaryText,
+          Color? primaryText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? secondaryText,
+          Color? secondaryText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? placeholderText,
+          Color? placeholderText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? icon,
+          Color? icon,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? error});
+          Color? error});
 }
 
 /// @nodoc
@@ -1664,27 +1668,27 @@ abstract class _$$_PaymentSheetAppearanceColorsCopyWith<$Res>
   @useResult
   $Res call(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? primary,
+          Color? primary,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? background,
+          Color? background,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? componentBackground,
+          Color? componentBackground,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? componentBorder,
+          Color? componentBorder,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? componentDivider,
+          Color? componentDivider,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? componentText,
+          Color? componentText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? primaryText,
+          Color? primaryText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? secondaryText,
+          Color? secondaryText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? placeholderText,
+          Color? placeholderText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? icon,
+          Color? icon,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? error});
+          Color? error});
 }
 
 /// @nodoc
@@ -1766,26 +1770,27 @@ class __$$_PaymentSheetAppearanceColorsCopyWithImpl<$Res>
 class _$_PaymentSheetAppearanceColors implements _PaymentSheetAppearanceColors {
   const _$_PaymentSheetAppearanceColors(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.primary,
+          this.primary,
+      @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
+          this.background,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.background,
+          this.componentBackground,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.componentBackground,
+          this.componentBorder,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.componentBorder,
+          this.componentDivider,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.componentDivider,
+          this.componentText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.componentText,
+          this.primaryText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.primaryText,
+          this.secondaryText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.secondaryText,
+          this.placeholderText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.placeholderText,
-      @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson) this.icon,
+          this.icon,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.error});
+          this.error});
 
   factory _$_PaymentSheetAppearanceColors.fromJson(Map<String, dynamic> json) =>
       _$$_PaymentSheetAppearanceColorsFromJson(json);
@@ -1915,27 +1920,27 @@ abstract class _PaymentSheetAppearanceColors
     implements PaymentSheetAppearanceColors {
   const factory _PaymentSheetAppearanceColors(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? primary,
+          final Color? primary,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? background,
+          final Color? background,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? componentBackground,
+          final Color? componentBackground,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? componentBorder,
+          final Color? componentBorder,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? componentDivider,
+          final Color? componentDivider,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? componentText,
+          final Color? componentText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? primaryText,
+          final Color? primaryText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? secondaryText,
+          final Color? secondaryText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? placeholderText,
+          final Color? placeholderText,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? icon,
+          final Color? icon,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? error}) = _$_PaymentSheetAppearanceColors;
+          final Color? error}) = _$_PaymentSheetAppearanceColors;
 
   factory _PaymentSheetAppearanceColors.fromJson(Map<String, dynamic> json) =
       _$_PaymentSheetAppearanceColors.fromJson;
@@ -2252,7 +2257,7 @@ abstract class $PaymentSheetShadowParamsCopyWith<$Res> {
   @useResult
   $Res call(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? color,
+          Color? color,
       double? opacity,
       PaymentSheetShadowOffset? offset});
 
@@ -2317,7 +2322,7 @@ abstract class _$$_PaymentSheetShadowParamsCopyWith<$Res>
   @useResult
   $Res call(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? color,
+          Color? color,
       double? opacity,
       PaymentSheetShadowOffset? offset});
 
@@ -2364,7 +2369,7 @@ class __$$_PaymentSheetShadowParamsCopyWithImpl<$Res>
 class _$_PaymentSheetShadowParams implements _PaymentSheetShadowParams {
   const _$_PaymentSheetShadowParams(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.color,
+          this.color,
       this.opacity,
       this.offset});
 
@@ -2421,7 +2426,7 @@ class _$_PaymentSheetShadowParams implements _PaymentSheetShadowParams {
 abstract class _PaymentSheetShadowParams implements PaymentSheetShadowParams {
   const factory _PaymentSheetShadowParams(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? color,
+          final Color? color,
       final double? opacity,
       final PaymentSheetShadowOffset? offset}) = _$_PaymentSheetShadowParams;
 
@@ -3315,11 +3320,11 @@ abstract class $PaymentSheetPrimaryButtonThemeColorsCopyWith<$Res> {
   @useResult
   $Res call(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? background,
+          Color? background,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? text,
+          Color? text,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? border});
+          Color? border});
 }
 
 /// @nodoc
@@ -3368,11 +3373,11 @@ abstract class _$$_PaymentSheetPrimaryButtonThemeColorsCopyWith<$Res>
   @useResult
   $Res call(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? background,
+          Color? background,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? text,
+          Color? text,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      Color? border});
+          Color? border});
 }
 
 /// @nodoc
@@ -3415,10 +3420,11 @@ class _$_PaymentSheetPrimaryButtonThemeColors
     implements _PaymentSheetPrimaryButtonThemeColors {
   const _$_PaymentSheetPrimaryButtonThemeColors(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.background,
-      @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson) this.text,
+          this.background,
+      @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
+          this.text,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      this.border});
+          this.border});
 
   factory _$_PaymentSheetPrimaryButtonThemeColors.fromJson(
           Map<String, dynamic> json) =>
@@ -3479,11 +3485,11 @@ abstract class _PaymentSheetPrimaryButtonThemeColors
     implements PaymentSheetPrimaryButtonThemeColors {
   const factory _PaymentSheetPrimaryButtonThemeColors(
       {@JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? background,
+          final Color? background,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? text,
+          final Color? text,
       @JsonKey(toJson: ColorKey.toJson, fromJson: ColorKey.fromJson)
-      final Color? border}) = _$_PaymentSheetPrimaryButtonThemeColors;
+          final Color? border}) = _$_PaymentSheetPrimaryButtonThemeColors;
 
   factory _PaymentSheetPrimaryButtonThemeColors.fromJson(
           Map<String, dynamic> json) =
diff --git a/packages/stripe_platform_interface/pubspec.yaml b/packages/stripe_platform_interface/pubspec.yaml
index 323369e12..66895cc58 100644
--- a/packages/stripe_platform_interface/pubspec.yaml
+++ b/packages/stripe_platform_interface/pubspec.yaml
@@ -1,6 +1,6 @@
 name: stripe_platform_interface
 description: Platform interface for stripe sdk
-version: 9.2.1
+version: 9.2.2
 repository: https://github.com/flutter-stripe/flutter_stripe
 homepage: https://pub.dev/packages/flutter_stripe
 
@@ -12,7 +12,7 @@ dependencies:
   flutter:
     sdk: flutter
   freezed_annotation: ^2.2.0
-  json_annotation: ^4.7.0
+  json_annotation: ^4.8.0
   meta: ^1.3.0
   plugin_platform_interface: ^2.0.0
 
@@ -20,6 +20,6 @@ dev_dependencies:
   build_runner: ^2.3.3
   flutter_test:
     sdk: flutter
-  freezed: ^2.3.2
+  freezed: ^2.3.5
   json_serializable: ^6.5.4
   flutter_lints: ^2.0.1
diff --git a/packages/stripe_web/CHANGELOG.md b/packages/stripe_web/CHANGELOG.md
index 96c9fa818..c3c0862ec 100644
--- a/packages/stripe_web/CHANGELOG.md
+++ b/packages/stripe_web/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 4.2.0
+**Fixes for web**
+- Makes WebStripe a singleton accessible by WebStripe.instance
+- Allows to change the layout for the payment element. Closes [#1260](https://github.com/flutter-stripe/flutter_stripe/pull/1270#:~:text=Makes%20a%20singleton,flow%C2%A0%231075)
+- Allows to change the full appearance for the payment element. It is possible to fully customize it by adding any of the values from the appearance api.
+- Fixes parsing PaymentMethod to contain dates and last4 digits. Closes [#1212](https://github.com/flutter-stripe/flutter_stripe/pull/1270#:~:text=Makes%20a%20singleton,flow%C2%A0%231075)
+- Fixes parsing Address to not add empty strings if null. Closes [#1208](https://github.com/flutter-stripe/flutter_stripe/pull/1270#:~:text=Makes%20a%20singleton,flow%C2%A0%231075)
+- Adds support for confirmAcssDebitPayment on web WebStripe.instance.confirmAcssDebitPayment. Ref [#794](https://github.com/flutter-stripe/flutter_stripe/pull/1270#:~:text=Makes%20a%20singleton,flow%C2%A0%231075)
+- Fixes text color not sync with CardStyle on the web card field. Closes [#541](https://github.com/flutter-stripe/flutter_stripe/pull/1270#:~:text=Makes%20a%20singleton,flow%C2%A0%231075)
+- Adds independent method for confirmIdealPayment: WebStripe.instance.confirmIdealPayment, that allows to pass a custom returnUrl. Ref [#1075](https://github.com/flutter-stripe/flutter_stripe/pull/1270#:~:text=Makes%20a%20singleton,flow%C2%A0%231075)
 ## 4.1.1
 **Fixes**
 - Move amount value to GooglePayPaymentMethodParams #1255 
diff --git a/packages/stripe_web/pubspec.yaml b/packages/stripe_web/pubspec.yaml
index 779dc19c0..c6f181d22 100644
--- a/packages/stripe_web/pubspec.yaml
+++ b/packages/stripe_web/pubspec.yaml
@@ -1,10 +1,10 @@
 name: flutter_stripe_web
 description: Stripe sdk bindings for the Flutter web platform. This package contains the implementation of the platform interface for web.
-version: 4.1.1
+version: 4.2.0
 homepage: https://github.com/flutter-stripe/flutter_stripe
 
 environment:
-  sdk: ">=2.16.0 <4.0.0"
+  sdk: ">=2.17.0 <4.0.0"
   flutter: ">=3.0.0"
 
 dependencies:
@@ -15,13 +15,13 @@ dependencies:
   freezed_annotation: ^2.0.3
   stripe_platform_interface: ^9.2.1
   js: ^0.6.3
-  stripe_js: ^3.0.1
+  stripe_js: ^3.1.0
 
 dev_dependencies:
   flutter_test:
     sdk: flutter
   build_runner: ^2.3.2
-  freezed: ^2.2.1
+  freezed: ^2.3.5
   json_serializable: ^6.5.4
   lints: ^2.0.1