@infosoftas/s4-orders-js-sdk 0.1.19 → 0.1.20

package/README.md

@@ -33,6 +33,7 @@ enum PaymentMethodEnum {
     Vipps = 'Vipps',
     MobilePay = 'MobilePay',
     SwedbankPay = 'SwedbankPay',
+    Mollie = 'Mollie',
     Invoice = 'Invoice',
     Email = 'Email',
     EHF = 'EHF',
@@ -46,11 +47,11 @@ type OrderFormFieldType = {
     label?: string;
 };
 
-type PaymentMethodOptionsType = {
-    [key in PaymentMethodEnum]: {
+type PaymentMethodSettingsType = {
+    [key in PaymentMethodEnum]?: {
         generateSubscriberContact?: boolean;
         accountId?: string;
-        orderFormFields: OrderFormFieldType[];
+        orderFormFields?: OrderFormFieldType[];
         paymentInvoiceFields?: OrderFormFieldType[] | never[] | null;
     };
 }
@@ -105,7 +106,7 @@ type ConfigType = {
      * Controls which input fields are shown in the order form for each payment method.
      * Use accountId on SwedbankPay to set your Swedbank Pay account ID.
      */
-    paymentMethodsOptions?: PaymentMethodOptionsType;
+    paymentMethodsOptions?: PaymentMethodSettingsType;
     requireTermsAcceptance?: boolean;
     language?: string;
     merchantAgreementUrl?: string;
@@ -211,6 +212,7 @@ export const prepareConfig = ({
                 { label: "Vipps", value: "Vipps" },
                 { label: "MobilePay", value: "MobilePay" },
                 { label: "Credit Card/Debit Card", value: "SwedbankPay" },
+                { label: "Mollie", value: "Mollie" },
                 { label: 'Invoice', translateKey: 'Invoice', value: 'Invoice' },
                 { label: 'Email', translateKey: 'Email', value: 'Email' },
                 { label: 'EHF', translateKey: 'EHF', value: 'EHF' },
@@ -242,6 +244,22 @@ export const prepareConfig = ({
                     },
                 ],
             },
+            Mollie: {
+                accountId: 'your-mollie-account-id',
+                orderFormFields: [
+                    {
+                        name: OrderModuleFiledNameEnum.name,
+                        label: 'Name',
+                        required: false,
+                    },
+                    {
+                        name: OrderModuleFiledNameEnum.email,
+                        label: 'Email',
+                        required: true,
+                        readOnly: !!userEmail,
+                    },
+                ],
+            },
             Invoice: {
                 orderFormFields: [
                     {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@infosoftas/s4-orders-js-sdk",
-    "version": "0.1.19",
+    "version": "0.1.20",
     "scripts": {
         "build": "rimraf lib && webpack --mode production",
         "release": "release-it"
@@ -11,33 +11,40 @@
         ]
     },
     "dependencies": {
-        "prop-types": "^15.8.1",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "react-hook-form": "^7.66.1"
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8",
+        "react-hook-form": "^7.85.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.29.6",
-        "@babel/preset-env": "^7.28.5",
-        "@babel/preset-react": "^7.28.5",
-        "@babel/preset-typescript": "^7.28.5",
-        "@types/react": "^19.2.6",
-        "@types/react-dom": "^19.2.3",
+        "@babel/core": "^8.0.1",
+        "@babel/preset-env": "^8.0.2",
+        "@babel/preset-react": "^8.0.1",
+        "@babel/preset-typescript": "^8.0.1",
+        "@types/react": "^19.2.18",
+        "@types/react-dom": "^19.2.4",
         "babel-loader": "^10.0.0",
         "copy-webpack-plugin": "^14.0.0",
         "css-loader": "^7.1.2",
         "mini-css-extract-plugin": "^2.9.4",
-        "release-it": "^20.2.1",
+        "release-it": "^21.0.2",
         "rimraf": "^6.1.2",
-        "sass": "^1.94.2",
-        "sass-loader": "^16.0.6",
+        "sass": "^1.102.0",
+        "sass-loader": "^17.0.0",
         "style-loader": "^4.0.0",
-        "ts-loader": "^9.5.4",
+        "ts-loader": "^9.6.2",
         "typescript": "^6.0.2",
-        "webpack": "^5.105.2",
-        "webpack-cli": "^6.0.1"
+        "webpack": "^5.109.2",
+        "webpack-cli": "^7.2.2"
     },
     "publishConfig": {
         "access": "public"
-    }
+    },
+    "engines": {
+        "node": "^22.21.0 || >=24.11.0"
+    },
+    "browserslist": [
+        "> 0.5%",
+        "last 2 versions",
+        "not dead"
+    ]
 }

package/src/App.tsx

@@ -212,11 +212,15 @@ const App: FC<ConfigType> = ({
         setShowOrderForm(true);
     };
 
-    const handleMessageEvent = async (type: MessageEventTypeEnum) => {
+    const handleMessageEvent = async (
+        type: MessageEventTypeEnum,
+        canceledOrderId?: string
+    ) => {
         if (type === MessageEventTypeEnum.CANCEL) {
             try {
-                if (orderId) {
-                    await handleOrderDelete(orderId);
+                const orderIdToCancel = canceledOrderId || orderId;
+                if (orderIdToCancel) {
+                    await handleOrderDelete(orderIdToCancel);
                 }
             } catch (error) {
                 console.log(error);
@@ -284,11 +288,32 @@ const App: FC<ConfigType> = ({
                 return;
             }
 
+            if (
+                data?.paymentMethod === PaymentMethodEnum.Mollie &&
+                data?.orderId
+            ) {
+                try {
+                    sessionStorage.setItem(
+                        'mollieOrderId',
+                        JSON.stringify({ id: data.orderId, ts: Date.now() })
+                    );
+                } catch (e) {
+                    console.warn(
+                        'Could not persist mollieOrderId; return leg will rely on the S4OrderId param.',
+                        e
+                    );
+                }
+            }
+
             setTimeout(() => {
                 window.location.href = url;
             }, 300);
 
             return;
+        } else if (data?.paymentMethod) {
+            setIsFailed(true);
+            setShowOrderForm(true);
+            setFormType(FormTypeEnum.ORDER);
         }
 
         setIframeSrc(null);

package/src/api/OrdersApi.ts

@@ -19,8 +19,8 @@ type OrderCompleteRequestType = {
 };
 
 type OrderResponseType = {
-    terminalRedirectUrl: string;
-    id: string;
+    terminalRedirectUrl: string | null;
+    id: string | null;
 };
 
 export const orderStart = (

package/src/components/EHFForm/EHFForm.tsx

@@ -8,7 +8,7 @@ import InputField from '../FormFields/InputField';
 import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
 import {
     OrderFormFieldType,
-    PaymentMethodOptionsType,
+    PaymentMethodSettingsType,
     ContactRequestType,
     OrderDenialFallbackOfferType,
 } from '../../types/general';
@@ -44,7 +44,7 @@ type Props = {
     language: string;
     merchantAgreementUrl: string;
     orderValues?: OrderFormInputsType;
-    paymentMethodsOptions?: PaymentMethodOptionsType;
+    paymentMethodsOptions?: PaymentMethodSettingsType;
     invoiceAddressSelection?: {
         enabled?: boolean;
         label?: string;

package/src/components/OIOForm/OIOForm.tsx

@@ -10,7 +10,7 @@ import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
 import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
 import {
     OrderFormFieldType,
-    PaymentMethodOptionsType,
+    PaymentMethodSettingsType,
     ContactRequestType,
     OrderDenialFallbackOfferType,
 } from '../../types/general';
@@ -45,7 +45,7 @@ type Props = {
     language: string;
     merchantAgreementUrl: string;
     orderValues?: OrderFormInputsType;
-    paymentMethodsOptions?: PaymentMethodOptionsType;
+    paymentMethodsOptions?: PaymentMethodSettingsType;
     invoiceAddressSelection?: {
         enabled?: boolean;
         label?: string;

package/src/components/OrderForm/OrderForm.tsx

@@ -22,7 +22,8 @@ import formFieldsMapper from '../FormFields/FormFieldsMapper';
 import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
 import { OrderFormInputsType, OrderInfoType } from '../../types/order';
 import {
-    PaymentMethodOptionsType,
+    PaymentMethodSettingsType,
+    PaymentMethodOptionType,
     OrderFormFieldType,
     ContactRequestType,
     OrderDenialFallbackOfferType,
@@ -51,9 +52,9 @@ type Props = {
     showIframe?: boolean;
     language: string;
     merchantAgreementUrl: string;
-    paymentMethodsOptions?: PaymentMethodOptionsType;
+    paymentMethodsOptions?: PaymentMethodSettingsType;
     defaultValues?: OrderFormInputsType;
-    paymentMethods?: { label: string; value: PaymentMethodEnum }[];
+    paymentMethods?: PaymentMethodOptionType[];
     allowedPaymentMethods?: PaymentMethodEnum[];
     submitButtonText?: string;
     orderDenialCloseButtonText?: string;
@@ -324,7 +325,18 @@ const OrderForm: FC<Props> = ({
                                             value={item.value}
                                         />
                                         <span className="value-block">
-                                            <span className="prefix-icon"></span>
+                                            {item.icons &&
+                                            item.icons.length > 0 ? (
+                                                <span className="prefix-icon">
+                                                    {item.icons.map((icon) => (
+                                                        <img
+                                                            key={icon.src}
+                                                            src={icon.src}
+                                                            alt={icon.alt}
+                                                        />
+                                                    ))}
+                                                </span>
+                                            ) : null}
                                             <span className="text-block">
                                                 {item.label}
                                             </span>

package/src/enums/general.ts

@@ -2,6 +2,7 @@ export enum PaymentMethodEnum {
     Vipps = 'Vipps',
     MobilePay = 'MobilePay',
     SwedbankPay = 'SwedbankPay',
+    Mollie = 'Mollie',
     Invoice = 'Invoice',
     Email = 'Email',
     EHF = 'EHF',

package/src/hooks/useMessageEvent.tsx

@@ -4,9 +4,30 @@ import { MessageEventTypeEnum, PaymentMethodEnum } from '../enums/general';
 import { CompleteOrderParamsType, OrderInfoType } from '../types/order';
 import useQueryParams from './useQueryParams';
 
+const MOLLIE_ORDER_TTL_MS = 20 * 60 * 1000;
+
+// Reads and consumes the persisted Mollie order id. The key is always removed:
+// the return leg gets one chance to use it, whether or not it is still valid.
+const takeStoredMollieOrderId = (): string | null => {
+    const raw = sessionStorage.getItem('mollieOrderId');
+    if (!raw) {
+        return null;
+    }
+
+    sessionStorage.removeItem('mollieOrderId');
+
+    try {
+        const { id, ts } = JSON.parse(raw) as { id: string; ts: number };
+
+        return Date.now() - ts <= MOLLIE_ORDER_TTL_MS ? id : null;
+    } catch {
+        return null;
+    }
+};
+
 const useMessageEvent = (
     messageCallback: (data: CompleteOrderParamsType) => Promise<void>,
-    handleMessageEvent: (type: MessageEventTypeEnum) => void,
+    handleMessageEvent: (type: MessageEventTypeEnum, orderId?: string) => void,
     showIframe: boolean,
     orderInfo: OrderInfoType | null
 ) => {
@@ -126,10 +147,13 @@ const useMessageEvent = (
 
         if (
             queryParams.get('action') === MessageEventTypeEnum.CANCEL &&
-            !showIframe
+            (!showIframe || !queryParams.get('TransactionId'))
         ) {
+            const cancelOrderId =
+                queryParams.get('S4OrderId') || takeStoredMollieOrderId();
             handleMessageEvent(
-                queryParams.get('action') as MessageEventTypeEnum
+                queryParams.get('action') as MessageEventTypeEnum,
+                cancelOrderId || undefined
             );
         }
     }, [
@@ -138,6 +162,33 @@ const useMessageEvent = (
         queryParams.get('TransactionId'),
         showIframe,
     ]);
+
+    // Mollie: a completion return with no TransactionId (that one is SwedbankPay's).
+    useEffect(() => {
+        if (
+            queryParams.get('action') !== MessageEventTypeEnum.COMPLETE ||
+            queryParams.get('TransactionId')
+        ) {
+            return;
+        }
+
+        const s4OrderId = queryParams.get('S4OrderId');
+        const storedOrderId = takeStoredMollieOrderId();
+        const mollieOrderId = s4OrderId || storedOrderId;
+        if (!mollieOrderId) {
+            return;
+        }
+
+        messageCallback({
+            orderId: mollieOrderId,
+            agreementId: '',
+            orderInfo: orderInfo || null,
+        });
+    }, [
+        queryParams.get('action'),
+        queryParams.get('S4OrderId'),
+        queryParams.get('TransactionId'),
+    ]);
 };
 
 export default useMessageEvent;

package/src/hooks/useOrderForm.tsx

@@ -15,7 +15,7 @@ import {
     ErrorsMsg,
     OrderFormFieldType,
     OrderDenialFallbackOfferType,
-    PaymentMethodOptionsType,
+    PaymentMethodSettingsType,
     ContactRequestType,
 } from '../types/general';
 import {
@@ -46,7 +46,7 @@ type Props = {
     showIframe?: boolean;
     language: string;
     merchantAgreementUrl: string;
-    paymentMethodsOptions?: PaymentMethodOptionsType;
+    paymentMethodsOptions?: PaymentMethodSettingsType;
     orderFields: OrderFormFieldType[];
     invoiceAddressToggle?: boolean;
     invoiceOrderFields: OrderFormFieldType[];
@@ -293,6 +293,13 @@ const useOrderForm = ({
                     orderReference: data.orderReference || undefined,
                 });
 
+                if (!responseOrder.id) {
+                    callback(null);
+                    setApiErrorMsg(WRONG_MSG);
+                    setErrorsMsg([]);
+                    return;
+                }
+
                 callback(responseOrder.terminalRedirectUrl, {
                     ...(data || {}),
                     orderId: responseOrder.id,

package/src/types/general.ts

@@ -16,8 +16,8 @@ export type OrderFormFieldType = {
     label?: string;
 };
 
-export type PaymentMethodOptionsType = {
-    [key in PaymentMethodEnum]: {
+export type PaymentMethodSettingsType = {
+    [key in PaymentMethodEnum]?: {
         generateSubscriberContact?: boolean;
         accountId?: string;
         orderFormFields?: OrderFormFieldType[];
@@ -45,6 +45,17 @@ export type OrderDenialFallbackOfferType = {
     templatePackageId?: string;
 };
 
+export type PaymentIconType = {
+    src: string;
+    alt: string;
+};
+
+export type PaymentMethodOptionType = {
+    label: string;
+    value: PaymentMethodEnum;
+    icons?: PaymentIconType[];
+};
+
 export type ConfigType = {
     submitStartCallback?: (subscriberId: string) => void;
     userActionCallback?: (
@@ -64,9 +75,9 @@ export type ConfigType = {
     apiUrl?: string;
     redirectUrl?: string;
     showIframe?: boolean;
-    availablePaymentMethods?: { label: string; value: PaymentMethodEnum }[];
+    availablePaymentMethods?: PaymentMethodOptionType[];
     allowedPaymentMethods?: PaymentMethodEnum[];
-    paymentMethodsOptions?: PaymentMethodOptionsType;
+    paymentMethodsOptions?: PaymentMethodSettingsType;
     requireTermsAcceptance?: boolean;
     language?: string;
     merchantAgreementUrl?: string;

package/src/types/order.ts

@@ -42,10 +42,18 @@ export type SwedbankPay = {
     language?: string;
 };
 
+export type Mollie = {
+    accountId?: string;
+    returnUrl: string;
+    cancelUrl?: string;
+    language?: string;
+};
+
 export type AgreementsType = {
     paymentProvider: PaymentMethodEnum;
     vippsMobilePay?: VippsMobilePay;
     swedbankPay?: SwedbankPay;
+    mollie?: Mollie;
 };
 
 export type OrderInfoType = {

package/src/utils/order.helper.ts

@@ -14,7 +14,7 @@ type AgreementModelType = {
     accountId?: string;
 };
 
-const mapToSwedbankLanguage = (language: string) => {
+const mapToPaymentProviderLanguage = (language: string) => {
     const allowedLanguages = [
         'en-US',
         'sv-SE',
@@ -32,7 +32,7 @@ const mapToSwedbankLanguage = (language: string) => {
 
     console.warn(`Language ${language} not supported.`);
 
-    return 'en-US'; // Default value for 'Swedbank'
+    return 'en-US';
 };
 
 export const prepareAgreementModel = ({
@@ -78,13 +78,24 @@ export const prepareAgreementModel = ({
         model.swedbankPay = {
             cancelUrl: `${cancelUrl}`,
             completeUrl: `${confirmUrl}`,
-            language: mapToSwedbankLanguage(language),
+            language: mapToPaymentProviderLanguage(language),
             accountId,
         };
 
         return model;
     }
 
+    if (paymentMethod === PaymentMethodEnum.Mollie) {
+        model.mollie = {
+            accountId,
+            returnUrl: `${confirmUrl}`,
+            cancelUrl: `${cancelUrl}`,
+            language: mapToPaymentProviderLanguage(language),
+        };
+
+        return model;
+    }
+
     if (
         paymentMethod === PaymentMethodEnum.Vipps ||
         paymentMethod === PaymentMethodEnum.MobilePay