@gr4vy/secure-fields-react 2.7.1 → 2.9.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v2.9.0 (Tue Jun 23 2026)
+
+#### 🚀 Enhancement
+
+- feat: add click to pay method to update checkout options [#1236](https://github.com/gr4vy/secure-fields/pull/1236) ([@luca-gr4vy](https://github.com/luca-gr4vy) [@cbetta](https://github.com/cbetta))
+
+#### Authors: 2
+
+- Cristiano Betta ([@cbetta](https://github.com/cbetta))
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
 # v2.7.1 (Wed May 20 2026)
 
 #### 🐛 Bug Fix

package/README.md

@@ -268,3 +268,23 @@ The following props can be used on the `SecureFields` component to listen to spe
 | `onClickToPayCheckoutWithNewCard` | An event handler that listens for users checking out with a new card. It listens for the [`CLICK_TO_PAY_CHECKOUT_WITH_NEW_CARD`](https://docs.gr4vy.com/guides/payments/secure-fields/events#global-events) event and accepts a callback function.                                                                                                                                                        |
 | `onClickToPayUnableToLoadDpa`     | An event handler that listens for Click to Pay not being able to load the provided DPA. It listens for the [`CLICK_TO_PAY_UNABLE_TO_LOAD_DPA`](https://docs.gr4vy.com/guides/payments/secure-fields/events#global-events) event and accepts a callback function.                                                                                                                                          |
 | `onMethodChange`                  | An event handler that listens for users selecting a different method (either `card` or `click-to-pay`). It listens for the [`METHOD_CHANGE`](https://docs.gr4vy.com/guides/payments/secure-fields/events#global-events) event and accepts a callback function with the selected method.                                                                                                                   |
+
+### Updating Checkout Options
+
+Update the Click to Pay checkout options after initialization. This is useful when the transaction amount changes (e.g. cart updates) before the user submits.
+
+```js
+const { secureFields } = useSecureFields()
+
+secureFields.clickToPay.updateCheckoutOptions({
+  transactionAmount: 9.99,
+  transactionCurrencyCode: 'AUD',
+})
+```
+
+Options are merged with previously set values, so you can update individual fields without losing the rest.
+
+| Option                    | Type     | Description                    |
+| ------------------------- | -------- | ------------------------------ |
+| `transactionAmount`       | `number` | The transaction amount.        |
+| `transactionCurrencyCode` | `string` | The transaction currency code. |

package/lib/components/CardForm/CardForm.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { ClickToPayComponentProps } from "../../types";
-export declare const CardForm: ({ children, id: _, style, onVisibilityChange, ...rest }: PropsWithChildren<ClickToPayComponentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const CardForm: ({ children, id: _, style, onVisibilityChange, ...rest }: PropsWithChildren<ClickToPayComponentProps>) => import("react").JSX.Element;

package/lib/components/ClickToPay/ClickToPay.d.ts

@@ -1,2 +1,2 @@
 import { ClickToPayOptions } from "../../types";
-export declare const ClickToPay: (options: ClickToPayOptions) => import("react/jsx-runtime").JSX.Element;
+export declare const ClickToPay: (options: ClickToPayOptions) => import("react").JSX.Element;

package/lib/components/ClickToPay/ClickToPaySignIn.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { ClickToPayComponentProps } from "../../types";
-export declare const ClickToPaySignIn: ({ children, id: _, style, onVisibilityChange, ...rest }: PropsWithChildren<ClickToPayComponentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const ClickToPaySignIn: ({ children, id: _, style, onVisibilityChange, ...rest }: PropsWithChildren<ClickToPayComponentProps>) => import("react").JSX.Element;

package/lib/components/FieldGroup/FieldGroup.d.ts

@@ -1,4 +1,4 @@
 export declare const FieldGroup: ({ children, ...rest }: {
     [x: string]: any;
     children: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/lib/components/SecureFields/SecureFields.d.ts

@@ -3,4 +3,4 @@ import { Config } from "../../types";
 export type Props = {
     children?: ReactNode;
 } & Config;
-export declare const SecureFields: ({ children, ...config }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SecureFields: ({ children, ...config }: Props) => import("react").JSX.Element;

package/lib/hooks/use-secure-fields.d.ts

@@ -7,7 +7,7 @@ export declare const SecureFieldsContext: import("react").Context<{
     clickToPay?: ClickToPayInstance;
     setClickToPay?: Dispatch<ClickToPayInstance>;
 }>;
-export declare const SecureFieldsProvider: ({ children, ...config }: PropsWithChildren<Config>) => import("react/jsx-runtime").JSX.Element;
+export declare const SecureFieldsProvider: ({ children, ...config }: PropsWithChildren<Config>) => import("react").JSX.Element;
 export declare const useSecureFields: () => {
     secureFields: SecureFields;
     debug: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields-react",
-  "version": "2.7.1",
+  "version": "2.9.0",
   "description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
   "main": "lib/index",
   "types": "lib/index",
@@ -42,7 +42,7 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@gr4vy/secure-fields": "^2.7.1"
+    "@gr4vy/secure-fields": "^2.9.0"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.5",
@@ -56,5 +56,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "83a98fd6f3322aaa7229e49ae89671b4453cfde4"
+  "gitHead": "5420fcc4a7977fafc84ca551e5acad083cd70d4d"
 }