The checkout drop-in component GraphQL API has been extended exposing new fragments:
BILLING_CART_ADDRESS_FRAGMENT
SHIPPING_CART_ADDRESS_FRAGMENT
AVAILABLE_PAYMENT_METHOD_FRAGMENT
SELECTED_PAYMENT_METHOD_FRAGMENT
The Error Handling has been implemented in some containers (still work in progress):
BillToShippingAddress
LoginForm
PaymentMethods
ShippingMethods
The Event Handling has been documented within the list of events emitted and subscribed by the checkout drop-in component containers.
A new Active property has been added for all containers: This property activates/deactivates the container.
A new AutoSync property has been added for some containers: This property allows the container automatically synchronizing its state changes with the backend.
A new TitleProps interface has been created to customize the title and header of some containers.
The BillToShippingAddress container configuration structure has been modified. A new property has been added to the BillToShippingAddressProps interface:
BillToShippingAddressProps.onCartSyncError property added: This property allows performing some actions in case of an error is thrown when the bill to shipping checkbox is checked.
Implemented an error handling mechanism for the BillToShippingAddress container based on the “Optimistic” UI updates with rollback pattern consisting on the following:
-
It provides a callback function onCartSyncError() to be used in the integration layer in case the merchant wanted to perform some actions like showing an error message etc.
-
It performs a rollback reverting to the previous valid checkbox state.
-
In case the callback is not implemented, a fallback will be used, which consists of displaying an inline alert message.
The LoginForm container configuration structure has been modified. New properties have been added to the LoginFormProps interface:
-
LoginFormProps.displayHeadingContent property added: This property allows displaying the container heading content.
-
LoginFormProps.slots.Heading property added: This property allows customizing the container heading content based on the user authentication status.
… and the following properties have been added extending from TitleProps interface:
-
LoginFormProps.displayTitle property inherited: This property allows displaying the container title.
-
LoginFormProps.slots.Title property inherited: This property allows customizing the container title.
The PaymentMethods container configuration structure has been modified. Deprecated properties have been removed from the PaymentMethodsProps interface:
… the following property has been renamed:
PaymentMethodsProps.slots.Methods[code].setOnChange property renamed to PaymentMethodsProps.slots.Methods[code].autoSync.
… the following properties have been added:
-
PaymentMethodsProps.onSelectionChange property added: This property allows performing some actions when a payment method is selected.
-
PaymentMethodsProps.onCartSyncError property added: This property allows performing some actions in case of an error is thrown during the payment method selection.
-
PaymentMethodsProps.UIComponentType property added: This property allows using a different UI component type as a selector for each payment method. UI components available are: ‘ToggleButton’ and ‘RadioButton’.
… and the following properties have been added extending from TitleProps interface:
-
PaymentMethodsProps.displayTitle property inherited: This property allows displaying the container title.
-
PaymentMethodsProps.slots.Title property inherited: This property allows customizing the container title.
Implemented an error handling mechanism for the PaymentMethods container based on the “Optimistic” UI updates with rollback pattern consisting on the following:
-
It provides a callback function onCartSyncError() to be used in the integration layer in case the merchant wanted to perform some actions like showing an error message etc.
-
It performs a rollback reverting to the previous valid payment method selected.
-
In case the callback is not implemented, a fallback will be used, which consists of displaying an inline alert message.
The ShippingMethods container configuration structure has been modified. A property has been removed from the ShippingMethodsProps interface:
ShippingMethodsProps.preSelectedMethod property removed: This was an obsolete and unused property without business logic behind.
… the following property has been renamed:
ShippingMethodsProps.onShippingMethodSelect property renamed to ShippingMethodsProps.onSelectionChange.
… the following properties have been added:
-
ShippingMethodsProps.onCartSyncError property added: This property allows performing some actions in case of an error is thrown during the shipping method selection.
-
ShippingMethodsProps.UIComponentType property added: This property allows using a different UI component type as a selector for each shipping method. The available UI components are: ToggleButton and RadioButton.
… and the following properties have been added extending from TitleProps interface:
-
ShippingMethodsProps.displayTitle property inherited: This property allows displaying the container title.
-
ShippingMethodsProps.slots.Title property inherited: This property allows customizing the container title.
Implemented an error handling mechanism for the ShippingMethods container based on the “Optimistic” UI updates with rollback pattern consisting on the following:
-
It provides a callback function onCartSyncError() to be used in the integration layer in case the merchant wanted to perform some actions like showing an error message etc.
-
It performs a rollback reverting to the previous valid shipping method selected.
-
In case the callback is not implemented, a fallback will be used, which consists of displaying an inline alert message.
The TermsAndConditions container is now visible for both the anonymous and authenticated checkout processes.