@payriff-sdk/react 1.0.2 → 1.1.0

package/dist/PayriffProvider.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { PayriffApiBase, PayriffError, PayriffEvents, PayriffField, PayriffInstance, PayriffLocale, PayriffOptions, PayriffOrder, PayriffResult, PayriffTheme } from '@payriff-sdk/payriff-js';
+import type { PayriffApiBase, PayriffError, PayriffEvents, PayriffField, PayriffInstance, PayriffLocale, PayriffOptions, PayriffOrder, PayriffRegion, PayriffResult, PayriffTheme } from '@payriff-sdk/payriff-js';
 export interface PayOptions {
     /** Cardholder name collected in your own input, when the form has no holder field. */
     holderValue?: string;
@@ -11,9 +11,11 @@ export type PayriffReactError = PayriffError & {
 export interface PayriffProviderProps {
     /** Your publishable key (pr_pk_live_…). Never the secret key. */
     publishableKey: string;
-    /** Default (and only accepted value) `https://api.payriff.com`. */
+    /** Where your merchant account is. Default `AZ`; Saudi merchants pass `KSA`. */
+    region?: PayriffRegion;
+    /** @deprecated Use `region`. If passed, it must be the API host of `region`. */
     apiBase?: PayriffApiBase;
-    /** Default `az`. */
+    /** Default `az` for region `AZ`, `ar` for `KSA`. `ar` is right-to-left. */
     locale?: PayriffLocale;
     /** Text styling inside the card fields. With `<CardForm>`, prefer its `appearance`. */
     theme?: PayriffTheme;
@@ -55,7 +57,7 @@ export interface FormLink {
 }
 export declare function toReactError(err: unknown): PayriffReactError;
 /** Loads Payriff.js once for everything inside it, and shares the payment state with usePayriff(). */
-export declare function PayriffProvider({ publishableKey, apiBase, locale, theme, autoAdvance, children }: PayriffProviderProps): import("react").JSX.Element;
+export declare function PayriffProvider({ publishableKey, region, apiBase, locale, theme, autoAdvance, children }: PayriffProviderProps): import("react").JSX.Element;
 /** Payment state and actions for the card form inside the nearest <PayriffProvider>. */
 export declare function usePayriff(): UsePayriff;
 /** @internal Used by <CardForm> and <CardFields>. */

package/dist/PayriffProvider.js

@@ -24,7 +24,7 @@ export function toReactError(err) {
     return { ...err, message };
 }
 /** Loads Payriff.js once for everything inside it, and shares the payment state with usePayriff(). */
-export function PayriffProvider({ publishableKey, apiBase, locale, theme, autoAdvance, children }) {
+export function PayriffProvider({ publishableKey, region, apiBase, locale, theme, autoAdvance, children }) {
     const [payriff, setPayriff] = useState(null);
     const [order, setOrder] = useState(null);
     const [complete, setComplete] = useState(false);
@@ -34,7 +34,7 @@ export function PayriffProvider({ publishableKey, apiBase, locale, theme, autoAd
     const current = useRef(null);
     // Compare the theme by value, so an inline object doesn't remount the form on every render.
     const themeKey = theme ? JSON.stringify(theme) : '';
-    const options = useMemo(() => ({ apiBase, locale, autoAdvance, theme: themeKey ? JSON.parse(themeKey) : undefined }), [apiBase, locale, autoAdvance, themeKey]);
+    const options = useMemo(() => ({ region, apiBase, locale, autoAdvance, theme: themeKey ? JSON.parse(themeKey) : undefined }), [region, apiBase, locale, autoAdvance, themeKey]);
     const link = useMemo(() => ({
         options,
         publishableKey,

package/dist/index.d.ts

@@ -7,4 +7,4 @@ export type { CardFieldsProps, CardFieldProps } from './CardFields.js';
 export { usePaymentResult } from './usePaymentResult.js';
 export type { UsePaymentResult } from './usePaymentResult.js';
 export type { FormCallbacks } from './useMountedForm.js';
-export type { PayriffAppearance, PayriffCardLayout, PayriffError, PayriffField, PayriffLocale, PayriffOrder, PayriffResult, PayriffTheme, } from '@payriff-sdk/payriff-js';
+export type { PayriffAppearance, PayriffCardLayout, PayriffError, PayriffField, PayriffLocale, PayriffOrder, PayriffRegion, PayriffResult, PayriffTheme, } from '@payriff-sdk/payriff-js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payriff-sdk/react",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "React components for Payriff.js card payments",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -13,16 +13,26 @@
       "default": "./dist/index.js"
     }
   },
-  "files": ["dist", "README.md", "LICENSE"],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "sideEffects": false,
-  "keywords": ["payriff", "payments", "card", "3ds", "react"],
+  "keywords": [
+    "payriff",
+    "payments",
+    "card",
+    "3ds",
+    "react"
+  ],
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.json",
     "test": "npm run build && node --test test/*.test.js",
     "prepublishOnly": "npm test"
   },
   "dependencies": {
-    "@payriff-sdk/payriff-js": "^1.2.3"
+    "@payriff-sdk/payriff-js": "^1.3.0"
   },
   "peerDependencies": {
     "react": ">=18"