onProductSelect

Registers a callback that runs when a user selects a product via the product catalog.

Usage

(async () => {
const api = await Canva.Partnership.initialize({
apiKey: "<partner_api_key>",
autoAuthToken: "<auto_auth_token>",
container: document.getElementById("container"),
});
const onProductSelect = (opts) => {
// the user has selected a product via the catalog
console.log(opts);
};
api.showCatalog({
onProductSelect,
});
})();

You don't need to directly access the properties in the opts object. You only need to pass them straight into the createDesign method.

Parameters

To understand the meaning of the Volatile column, see the definition of Volatile parameters in the Glossary.

Parameter

Type

Required

Volatile

Description

opts

object

Yes

N/A

Options for configuring the editor.

opts.productId

string

Yes

Yes

The ID of the partner's product in Canva's backend. This is unique for each partner.

opts.productSizeOptionId

string

Yes

Yes

The ID of the partner's product size option.

opts.category

string

Yes

Yes

The ID of a category.

opts.maxPages

number

Yes

No

The maximum number of pages a user can print.

opts.partnerProductId

string

Yes

No

The ID of a product in the partner's backend.

opts.doctype

string

No

Yes

The ID of a doctype.

opts.template

string

No

Yes

The ID of a template.

opts.height

number

No

No

The height of the design. The unit of measurement is determined by the units property.

opts.units

string

No

No

A unit of measurement. The supported values are "px", "cm", "mm", "in".

opts.width

number

No

No

The width of the design. The unit of measurement is determined by the units property.