INFO-Subscription JS/TS Order SDK

This repository contains code for the Orders SDK usable to add orders for Tenants within INFO-Subscription.

Installation

Install the package with:

npm install @infosoftas/s4-orders-js-sdk

Available Scripts

In the project directory, you can run:

npm run build

Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Usage

The package needs to be configured with configuration object:

enum PaymentMethodEnum {
    Vipps = 'Vipps',
    MobilePay = 'MobilePay',
    SwedbankPay = 'SwedbankPay',
    Invoice = 'Invoice',
    Email = 'Email',
    EHF = 'EHF',
    OIO = 'OIO',
}

type OrderFormFieldType = {
    name: string;
    required?: boolean;
    readOnly?: boolean;
    label?: string;
};

type PaymentMethodOptionsType = {
    [key in PaymentMethodEnum]: {
        generateSubscriberContact?: boolean;
        accountId?: string;
        orderFormFields: OrderFormFieldType[];
        paymentInvoiceFields?: OrderFormFieldType[] | never[] | null;
    };
}

type OrderFormInputsType = {
    name?: string;
    email?: string;
    phoneNumber?: string;
    paymentMethod?: PaymentMethodEnum;
    country?: string;
    city?: string;
    address?: string;
    zip?: string;
};

enum UserActionEnum {
    SELECT_FORM = 'selectForm',
    SELECT_PAYMENT_METHOD = 'selectPaymentMethod',
    RETURN_TO_MAIN = 'returnToMain',
}

type ConfigType = {
    domElementId: string;
    moduleTitle?: string;
    submitStartCallback?: (subscriberId: string) => void;
    userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
    setContactCallback?: (contactInfo: ContactRequestType) => void;
    cancelVippsCallback?: () => void;
    apiKey?: string;
    apiUrl?: string;
    templatePackageId: string;
    subscriberId: string;
    userId: string;
    identityProviderId: string;
    organizationId: string;
    redirectUrl?: string;
    showIframe?: boolean;
    /**
     * The full list of payment methods displayed in the UI, each with a display label and value.
     * Controls what the user sees in the payment method selector.
     * @example [{ label: 'Credit Card', value: 'SwedbankPay' }, { label: 'Invoice', value: 'Invoice' }]
     */
    availablePaymentMethods?: { label: string; value: PaymentMethodEnum }[];
    /**
     * Whitelist of payment methods the subscriber is permitted to use.
     * If a method is in availablePaymentMethods but not here, it will be shown but blocked.
     * @example ['SwedbankPay', 'Invoice']
     */
    allowedPaymentMethods?: PaymentMethodEnum[];
    /**
     * Per-payment-method form field configuration.
     * 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;
    requireTermsAcceptance?: boolean;
    language?: string;
    merchantAgreementUrl?: string;
    invoiceAddressSelection?: {
        enabled?: boolean;
        label?: string;
        fields?: OrderFormFieldType[];
    };
    settings?: {
        successText?: string;
        failureText?: string;
        submitButtonText?: string;
        backButtonText?: string;
        verifyButtonText?: string;
        organizationNumberLabel?: string;
        cvrLabel?: string;
        glnLabel?: string;
        orderDefaultValues?: OrderFormInputsType;
        paymentMethodLabel?: string;
        errorReqMsg?: string;
        errorInvalidEmailMsg?: string;
        errorInvalidPhoneMsg?: string;
        errorValidationTitleMsg?: string;
        errorValidationDenialOrderBlockingMsg?: string;
        errorValidationBlockingOffersMsg?: string;
        paymentMethodNotAllowedMsg?: string;
        invoiceLookupNotFoundText?: string;
        orderDenialOfferBaseText?: string;
        orderDenialOfferWithFallbackText?: string;
        orderDenialAmountText?: string;
        fetchDenialFallbackOffer?: (organizationId: string) => Promise<OrderDenialFallbackOfferType | undefined>;
        termsAndConditionsText?: string | ReactNode;
    };
}

Usage example OrderPlace react component:

enum OrderModuleFiledNameEnum {
    name = 'name',
    email = 'email',
    phoneNumber = 'phoneNumber',
    address = 'address',
    country = 'country',
    city = 'city',
    zip = 'zip',
    careOf = 'careOf',
    organizationNumber = 'organizationNumber',
    buyerReference = 'buyerReference',
    orderReference = 'orderReference',
    invoiceName = 'invoiceName',
    invoiceAddress = 'invoiceAddress',
    invoiceCity = 'invoiceCity',
    invoiceZip = 'invoiceZip',
    invoiceCountry = 'invoiceCountry',
    invoicePhone = 'invoicePhoneNumber',
    invoiceEmail = 'invoiceEmail',
    invoiceCareOf = 'invoiceCareOf',
    invoiceBuyerReference ='invoiceBuyerReference',
}

export const prepareConfig = ({
    submitStartCallback,
    apiKey,
    apiUrl,
    userId,
    subscriberId,
    templatePackageId,
    identityProviderId,
    organizationId,
    selfServiceUrl,
    userEmail,
    name,
    city,
    country,
    postalCode,
    streetAddress,
}: Props) => {

    const config = {
        submitStartCallback,
        userActionCallback: (action, args) => {
          console.log(action);
          console.table(args);
        },
        moduleTitle: '',
        domElementId: ORDER_PLACE_ID,
        redirectUrl: window.location.href,
        merchantAgreementUrl: selfServiceUrl,
        showIframe: true,
        apiKey,
        apiUrl,
        userId,
        subscriberId,
        templatePackageId,
        identityProviderId,
        organizationId,
        language: 'en-US',
        availablePaymentMethods: [
                { label: "Vipps", value: "Vipps" },
                { label: "MobilePay", value: "MobilePay" },
                { label: "Credit Card/Debit Card", value: "SwedbankPay" },
                { label: 'Invoice', translateKey: 'Invoice', value: 'Invoice' },
                { label: 'Email', translateKey: 'Email', value: 'Email' },
                { label: 'EHF', translateKey: 'EHF', value: 'EHF' },
                { label: 'OIO', translateKey: 'OIO', value: 'OIO' },
        ],
        paymentMethodsOptions: {
            Vipps: {
                generateSubscriberContact: true,
                orderFormFields: [],
            },
            SwedbankPay: {
                orderFormFields: [
                    {
                        name: OrderModuleFiledNameEnum.name,
                        label: 'Name',
                        required: false,
                    },
                    {
                        name: OrderModuleFiledNameEnum.phoneNumber,
                        label: 'Phone',
                        readOnly: false,
                        required: false,
                    },
                    {
                        name: OrderModuleFiledNameEnum.email,
                        label: 'Email',
                        required: true,
                        readOnly: !!userEmail,
                    },
                ],
            },
            Invoice: {
                orderFormFields: [
                    {
                        name: OrderModuleFiledNameEnum.address,
                        label: 'Address',
                        required: false,
                        readOnly: false,
                    },
                ],
            },
            Email: {
                orderFormFields: [
                    {
                        name: OrderModuleFiledNameEnum.address,
                        label: 'Address',
                        required: false,
                        readOnly: false,
                    },
                ],
                paymentInvoiceFields: [
                    {
                        name: OrderModuleFiledNameEnum.invoiceEmail,
                        label: 'Email',
                        required: true,
                        readOnly: false,
                    },
            ],
            },
            EHF: {
                orderFormFields: [
                    {
                        name: OrderModuleFiledNameEnum.address,
                        label: 'Address',
                        required: false,
                        readOnly: false,
                    },
                ],
            },
            OIO: {
                orderFormFields: [
                    {
                        name: OrderModuleFiledNameEnum.address,
                        label: 'Address',
                        required: false,
                        readOnly: false,
                    },
                ],
            },
        },
        invoiceAddressSelection: {
            enabled: true,
            label: 'Invoice Address',
            fields: [
                {
                    name: OrderModuleFiledNameEnum.invoiceAddress,
                    label: 'Address',
                    required: false,
                    readOnly: false,
                },
            ],
        },
        settings: {
            submitButtonText: 'Continue',
            backButtonText: 'Back',
            verifyButtonText: 'Verify',
            organizationNumberLabel: 'Organization Number',
            glnLabel: 'GLN/EAN',
            cvrLabel: 'CVR',
            paymentMethodLabel: 'Select Payment Method',
            errorReqMsg: 'This field is required!',
            errorInvalidEmailMsg: 'Invalid email address!',
            errorInvalidPhoneMsg: 'Invalid phone number!',
            errorValidationTitleMsg: 'One or more validation errors occurred.',
            errorValidationDenialOrderBlockingMsg: 'The order/subscription will not be created because the subscriber has a denial order blocking all.',
            errorValidationBlockingOffersMsg: 'The order/subscription will not be created because the subscriber has a denial order blocking offers.',
            paymentMethodNotAllowedMsg: 'This payment method not allowed!',
            invoiceLookupNotFoundText: 'There was no recipient found for the given information',
            successText: 'Success message',
            failureText: 'Failed message',
            orderDefaultValues: {
                name,
                email: userEmail || '',
                phoneNumber: '',
                city,
                country,
                zip: postalCode,
                address: streetAddress,
                paymentMethod: undefined,
            },
        },
    };

    return config as ConfigType;
};


import { FC, useEffect, useRef, useCallback } from 'react';
import { useSearchParams } from 'react-router-dom';
import { orderComponent } from '@infosoftas/s4-orders-js-sdk/src/index';

import { prepareConfig } from 'Utils/moduleConfig';
import { encodeJwt } from 'Utils/helper';

const ORDER_PLACE_ID = 'sdk-order';

const OrderPlace: FC = ({journey, userEmail, sub, emails, userId, name, city, country, postalCode, streetAddress}) => {
    const moduleMount = useRef(false);
    const [searchParams, setSearchParams] = useSearchParams();

    const submitStartCallback = useCallback(
        (subscriberId: string) => {
            const hashTokenValue = {
                extension_SubscriberId: subscriberId,
                emails: emails,
                sub: sub,
            };

            searchParams?.set('hashToken', encodeJwt(hashTokenValue) as string);
            setSearchParams(searchParams);
        },
        [emails, sub, searchParams, setSearchParams]
    );

    useEffect(() => {
        if (!moduleMount.current && idTokenClaims) {
            moduleMount.current = true;
            const config = prepareConfig({
                apiKey: API_KEY,
                apiUrl: API_URL,
                userId: userId || '',
                subscriberId: userEmail || '',
                identityProviderId: IDENTITY_PROVIDER_ID,
                templatePackageId: TEMPLATE_PACKAGE_ID,
                selfServiceUrl: SELF_SERVICE_URL,
                organizationId: ORGANIZATION_ID,
                userEmail: userEmail || '',
                name: name,
                city: city,
                country: country,
                postalCode: postalCode,
                streetAddress: streetAddress,
                journey: journey,
                submitStartCallback: submitStartCallback,
            });
            orderComponent?.remove();
            orderComponent?.init(config);
        }
    }, [userEmail, userId, name, city, country, postalCode, streetAddress, journey, submitStartCallback]);

    return (
        <div
            id={ORDER_PLACE_ID}
            className="w-100 order-wrapper"
            data-testid="order-place-id"
        />
    );
};

export default OrderPlace;

| Option | Default | Description | | --------------------- | :----------------------------------------------------------------------------: | -------------------------: | | moduleTitle | '' | module title | | apiKey | '' | order api key | | apiUrl | '' | order api url | | templatePackageId | '' | template package id | | subscriberId | '' | subscriber id | | identityProviderId | '' | identity provider id | | organizationId | '' | organization id | | redirectUrl | window.location.href | redirect url | | showIframe | false | show credit card in iframe | | userActionCallback | undefined | function for tracking user actions | | cancelVippsCallback | undefined | callback invoked when a Vipps/MobilePay payment is cancelled | | paymentMethodsOptions | orderFormFields: [{name: 'phoneNumber', required: false, readOnly: false, label: ''}] | default form fields | | availablePaymentMethods | [] | available payment methods to display | | allowedPaymentMethods | [] | list of payment methods the subscriber is allowed to use | | requireTermsAcceptance | false | when true, the user must accept terms and conditions before submitting | | language | 'en-US' | language | | merchantAgreementUrl | '' | vipps and MobilePay property | | settings | {successText: 'Order completed successfully!', failureText: 'Something went wrong!', submitButtonText: 'Start', backButtonText: 'Back', verifyButtonText: 'Verify', organizationNumberLabel: 'Organization Number', cvrLabel: 'CVR', glnLabel: 'GLN', paymentMethodLabel: 'Select Payment Method', orderDefaultValues: 'Default order form values', errorReqMsg: '', errorInvalidEmailMsg: '', errorInvalidPhoneMsg: '', errorValidationTitleMsg: 'One or more validation errors occurred.', errorValidationDenialOrderBlockingMsg: '...', errorValidationBlockingOffersMsg: '...', paymentMethodNotAllowedMsg: 'This payment method not allowed!', invoiceLookupNotFoundText: 'There was no recipient found for the given information', termsAndConditionsText: '' } | label and text properties |