@infosoftas/s4-orders-js-sdk 0.1.18 → 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.18",
+    "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.28.5",
-        "@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.0.0",
+        "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;
@@ -304,123 +305,153 @@ const OrderForm: FC<Props> = ({
                 data-testid="sdk-order-form-id"
             >
                 {paymentMethods?.length > 0 && (
-                    <div className="field-wrapper radio-button-group">
-                        <div className="field-label">{paymentMethodLabel}</div>
-                        {paymentMethods.map((item) => (
-                            <div
-                                className="radio-button-control"
-                                key={item.value}
-                            >
-                                <label className="radio-badge">
-                                    <input
-                                        {...register('paymentMethod', {
-                                            required: true,
-                                        })}
-                                        onChange={handlePaymentChange}
-                                        type="radio"
-                                        value={item.value}
-                                    />
-                                    <span className="value-block">
-                                        <span className="prefix-icon"></span>
-                                        <span className="text-block">
-                                            {item.label}
-                                        </span>
-                                    </span>
-                                </label>
+                    <div className="sdk-payment-method-section">
+                        <div className="field-wrapper radio-button-group">
+                            <div className="field-label">
+                                {paymentMethodLabel}
                             </div>
-                        ))}
-                        {errors.paymentMethod && (
-                            <div className="text-error caption">
-                                {errors.paymentMethod.message}
-                            </div>
-                        )}
+                            {paymentMethods.map((item) => (
+                                <div
+                                    className="radio-button-control"
+                                    key={item.value}
+                                >
+                                    <label className="radio-badge">
+                                        <input
+                                            {...register('paymentMethod', {
+                                                required: true,
+                                            })}
+                                            onChange={handlePaymentChange}
+                                            type="radio"
+                                            value={item.value}
+                                        />
+                                        <span className="value-block">
+                                            {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>
+                                        </span>
+                                    </label>
+                                </div>
+                            ))}
+                            {errors.paymentMethod && (
+                                <div className="text-error caption">
+                                    {errors.paymentMethod.message}
+                                </div>
+                            )}
+                        </div>
                     </div>
                 )}
-                {orderFields?.length > 0 && allowPaymentMethod && (
-                    <Suspense fallback={null}>
-                        {orderFields.map((field) => {
-                            const Component = formFieldsMapper[field.name];
+                <div className="sdk-order-details-section">
+                    {orderFields?.length > 0 && allowPaymentMethod && (
+                        <Suspense fallback={null}>
+                            {orderFields.map((field) => {
+                                const Component = formFieldsMapper[field.name];
 
-                            return Component ? (
-                                <Component
-                                    key={field.name}
-                                    name={field.name}
-                                    label={field.label}
-                                    required={field.required || false}
-                                    readOnly={field.readOnly || false}
-                                    errors={errors}
-                                    errorReqMsg={errorReqMsg}
-                                    errorInvalidEmailMsg={errorInvalidEmailMsg}
-                                    errorInvalidPhoneMsg={errorInvalidPhoneMsg}
-                                />
-                            ) : null;
-                        })}
-                    </Suspense>
-                )}
-                {showInvoiceToggle && (
-                    <ToggleField
-                        name="invoiceAddressSelection"
-                        label={
-                            invoiceAddressSelection?.label ?? 'Invoice Address'
-                        }
-                        toggleCallback={(e) =>
-                            userActionCallback?.(
-                                UserActionEnum.TOGGLE_INVOICE_ADDRESS,
-                                { value: e }
-                            )
-                        }
-                    />
-                )}
-                {showInvoiceFields && (
-                    <Suspense fallback={null}>
-                        {invoiceOrderFields.map((field) => {
-                            const Component = formFieldsMapper[field.name];
+                                return Component ? (
+                                    <Component
+                                        key={field.name}
+                                        name={field.name}
+                                        label={field.label}
+                                        required={field.required || false}
+                                        readOnly={field.readOnly || false}
+                                        errors={errors}
+                                        errorReqMsg={errorReqMsg}
+                                        errorInvalidEmailMsg={
+                                            errorInvalidEmailMsg
+                                        }
+                                        errorInvalidPhoneMsg={
+                                            errorInvalidPhoneMsg
+                                        }
+                                    />
+                                ) : null;
+                            })}
+                        </Suspense>
+                    )}
+                    {showInvoiceToggle && (
+                        <ToggleField
+                            name="invoiceAddressSelection"
+                            label={
+                                invoiceAddressSelection?.label ??
+                                'Invoice Address'
+                            }
+                            toggleCallback={(e) =>
+                                userActionCallback?.(
+                                    UserActionEnum.TOGGLE_INVOICE_ADDRESS,
+                                    { value: e }
+                                )
+                            }
+                        />
+                    )}
+                    {showInvoiceFields && (
+                        <Suspense fallback={null}>
+                            {invoiceOrderFields.map((field) => {
+                                const Component = formFieldsMapper[field.name];
 
-                            return Component ? (
-                                <Component
-                                    key={field.name}
-                                    name={field.name}
-                                    label={field.label}
-                                    required={field.required || false}
-                                    readOnly={field.readOnly || false}
-                                    errors={errors}
-                                    errorReqMsg={errorReqMsg}
-                                    errorInvalidEmailMsg={errorInvalidEmailMsg}
-                                    errorInvalidPhoneMsg={errorInvalidPhoneMsg}
-                                />
-                            ) : null;
-                        })}
-                    </Suspense>
-                )}
-                {requireTermsAcceptance && (
-                    <TermsCheckbox
-                        name="termsAccept"
-                        label={termsAndConditionsText}
-                        required
-                        errors={errors}
-                    />
-                )}
-                {allowPaymentMethod && (
-                    <Button
-                        type="submit"
-                        loading={loading}
-                        buttonText={submitButtonText}
-                        disable={isSubmitButtonDisabled}
+                                return Component ? (
+                                    <Component
+                                        key={field.name}
+                                        name={field.name}
+                                        label={field.label}
+                                        required={field.required || false}
+                                        readOnly={field.readOnly || false}
+                                        errors={errors}
+                                        errorReqMsg={errorReqMsg}
+                                        errorInvalidEmailMsg={
+                                            errorInvalidEmailMsg
+                                        }
+                                        errorInvalidPhoneMsg={
+                                            errorInvalidPhoneMsg
+                                        }
+                                    />
+                                ) : null;
+                            })}
+                        </Suspense>
+                    )}
+                    {requireTermsAcceptance && (
+                        <TermsCheckbox
+                            name="termsAccept"
+                            label={termsAndConditionsText}
+                            required
+                            errors={errors}
+                        />
+                    )}
+                    {allowPaymentMethod && (
+                        <Button
+                            type="submit"
+                            loading={loading}
+                            buttonText={submitButtonText}
+                            disable={isSubmitButtonDisabled}
+                        />
+                    )}
+                    <Alert
+                        className="mt-2"
+                        msg={
+                            allowPaymentMethod
+                                ? apiErrorMsg
+                                : paymentMethodNotAllowedMsg
+                        }
                     />
-                )}
-                <Alert
-                    className="mt-2"
-                    msg={
-                        allowPaymentMethod
-                            ? apiErrorMsg
-                            : paymentMethodNotAllowedMsg
-                    }
-                />
-                {errorsMsg?.length > 0 &&
-                    allowPaymentMethod &&
-                    errorsMsg.map((i, index) => (
-                        <Alert key={`${i}-${index}`} className="mt-2" msg={i} />
-                    ))}
+                    {errorsMsg?.length > 0 &&
+                        allowPaymentMethod &&
+                        errorsMsg.map((i, index) => (
+                            <Alert
+                                key={`${i}-${index}`}
+                                className="mt-2"
+                                msg={i}
+                            />
+                        ))}
+                </div>
                 <OrderDenialModal
                     isOpen={!!orderDenialType}
                     message={orderDenialMessage}

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