Loading...

RECOMMENDATION: If you are using a version of The Portal Connector higher than 4.0, we strongly recommend utilizing the MVC based widgets and components to create your site. This documentation is for legacy purposes only and will soon be deprecated.

Checkout

API
Widget Type:
Page Widgets
TPC Version:
  • 6.2
checkout

The Checkout widget takes a frontend user through a process of fulfilling a sales order. It starts off by prompting the user to enter in Contact, Billing and Shipping Information, then it proceeds to the preferred Shipping method, then to the payment process before taking the user to a confirmation page of the order.

Graphical user interface, text, application Description automatically generated

Configuration

Basic

To configure the widget, drag and drop the Checkout widget into your page body and click the edit. This should open the widget designer and the Basic tab view should be presented. In the Basic tab, you can set the redirects to the Shopping Cart, Product List, Register and Login Pages. The benefit of setting the Register and Login pages is that unauthenticated users can still see cart items that they last added before they login.


In addition, you can enable checkboxes to allow Custom Shipping Providers and a Tax Provider during the checkout process. You can configure these providers in advanced settings should your CRM not account for this information. To do so, go to the path: 

Administration > Setting > Advanced Setting > PortalConnectorMvcEcommerce > ShippingProviders


Here you have the option to configure Flat Rate Shipping or Pickup. Pickup is when a user picks up the package from the shipper directly rather than having it shipped and you can configure a processing fee here if you would like.

Similarly, you can configure the Tax Provider by going to its path under PortalConnectorMvcEcommerce.

Graphical user interface, text, application, email Description automatically generated

Payment

In the Payment tab, you can set the Payment Provider, Payment Logic, Shipping Provider and Tax Provider. TPC offers out of box integration with Sylogist Pay, however, you can add your own Payment Provider as well. Configuring the Sylogist Payment Provider can be done in the advanced settings of your portal site under PortalConnectorMvcEcommerce.

Next, you can set the Payment Logic on the Checkout. Setting Payment Logic to Default creates a record in the SalesOrder and SalesOrderDetail entities of your CRM when a frontend user pays for the product. To create any other entity, you can implement your own logic provider.

Shipper Provider is a multiselect picklist and you can select the shipping providers you have configured in the advanced settings of your Portal site. Backend users can implement other Shipping Providers like FedEx. In the screenshot below, you can see that both Flat Rate Shipping and Pickup are selected. 

Graphical user interface, text, application, email Description automatically generated

By default, a Flat Tax option is provided for Portal administrators to set. You can configure this like any of the others payments settings in the Portal’s advanced setting under PortalConnectorMvcEcommerce.

Widget Properties

Basic Properties

Advanced Properties

Advanced properties provide additional functionality. They can be accessed by clicking on the "Advanced" Button in the bottom right corner of the widget designer.

API

get_windowPlaceholder()

Returns the modal window associated with the widget.

Returns

jQuery Object

get_orderSummaryPlaceholder()

Returns the div of the order summary.

Returns

jQuery Object

get_kendoWindow()

Returns the Kendo Window Object associated with the widget.

Returns

Object

get_personalInformationContainer()

Returns the div of the contact information.

Returns

jQuery Object

get_errorContainer()

Returns the error containing div. 

Returns

jQuery Object

toggle()

Toggles the visibility of the widget.

Returns

None

get_shippingAddressContainer()

Returns the div of the shipping address.

Returns

jQuery Object

get_postPaymentOrderSummaryTemplate()

Returns the kendo template for the element containing order summary of the widget.

Returns

jQuery Object

get_type()

Returns the type of widget it is. Can be used in conjunction with findAll() e.g., tpc.findAll()[0].get_type().

Returns

String

get_model()

Returns the model configuration object of the widget, which contains several useful properties related to the widget.

Returns

Object

get_shippingMethodOptionsContainer()

Returns the div of the shipping method options.

Returns

jQuery Object

show()

Shows the widget on the page.

Returns

None

get_kendoValidator()

Gets the kendo configurations on the checkout widget.

Returns

get_container()

Returns the container element of the widget.

Returns

jQuery Object

get_billingAddressContainer()

Returns the billing address div container.

Returns

jQuery Object

tpc:checkout-step-change

Event that taps into the loading of the Portal Connector Checkout widget.

Returns

None

get_checkoutPlaceHolder()

Returns the checkout div containing the contact, billing and shipping info.

Returns

jQuery Object

hide()

Hides the widget from the page.

Returns

None

add_paymentButtonClick(selector, clickEvent)

Method adds a click event to any element inside the checkout placeholder. The selector parameter takes a CSS selector on a custom button. The clickEvent parameter is an anonymous method that gets triggered by a click.

Returns

None

Full API With Examples

How to's

Related examples of Checkout Configuration