JavaScript integration

Our Widget.js script also opens the possibility of using public JS API for more advanced use cases. With this solution, you have even more control and flexibility in the integration process. It’s a perfect match for JS frameworks like Angular, React, or Vue.js. All public methods are available in the global window.tc variable and use the Promise pattern to handle asynchronous tasks.

To display a product price, use the code below:

tc.getPrice("TC-EXAMPLE-PRODUCT-ID").then(
    (price) => {
        console.log(price);
        // {
        // 	currency: string,
        // 	price: number,
        // 	priceNet: number,
        //	tax: number,
        //	taxName: string,
        //	taxRate: number
        // }
    },
    (error) => console.error(error)
);

To get a full product model, use the code below:

tc.getProduct("TC-EXAMPLE-PRODUCT-ID").then(
    (product) => {
        console.log(product);
        // {
        //     id: string,
        //     name: string,
        //     description: string,
        //     logoUrl: string,
        //     recurring: boolean,
        //     type: 'PRODUCT_TYPE_VAULTED', 'PRODUCT_TYPE_RECURRING', 'PRODUCT_TYPE_ONETIME',
        //     chargeFrequency: null | 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'HALF_YEARLY', 'YEARLY',
        //     price: {
        //         currency: string,
        //         price: number,
        //         priceNet: number,
        //         tax: number,
        //         taxName: string,
        //         taxRate: number
        //     }
        // }
    },
    (error) => console.error(error)
);

To start a payment for a given product, use the code below:

tc.buy("TC-EXAMPLE-PRODUCT-ID").then(
    () => {
        console.log('payment started');
    },
    (error) => console.error(error)
);

By default, a payment form will replace the current page. If you prefer to open it in a pop-up view, pass an additional parameter:

tc.buy("TC-EXAMPLE-PRODUCT-ID", { popup: true }).then(
    (data) => {
        console.log(data);
        // {
        //     type: 'CLOSE' | 'TRANSACTION',
        //     message: string,
        //     transaction null | {
        //         id: string,
        //         email: string,
        //         url: string
        //     }
        // }
    },
    (error) => console.error(error)
);

Not all payment methods are available in this mode. For example, Apple Pay is not allowed in a pop-up view.

You can also pass additional information about the customer if you want to use prefilled details. Please see the full example below:

tc.buy("TC-EXAMPLE-PRODUCT-ID", {
    firstName: 'Test',
    lastName: 'Test',
    companyName: 'Test',
    companyId: '123',
    zipCode: '18951',
    email: 'test@test.com',
    nonEditableEmail: true,
    coupon: 'SPECIAL-COUPON',
    payload: 'secured-encrypted-string-here'
}).then(
    () => {
        console.log('payment started');
    },
    (error) => console.error(error)
);

Please note, the second options argument is optional and can be skipped.