destroy()

Call this method to release the resources occupied by the Payment Element component and resets the SDK’s internal state to the state before the ​mount()​ call.

After the component resources are released:

• The mounted Payment Element will be removed from the page.
• Internal states, event listeners, and other data related to this mounting will be cleared.
• To display the Payment Element again, you need to call mount() once more.

Method signature

destroy()

destroy(): void

Parameters

This method takes no input parameters.

Return values

This method does not return any value.

Usage scenarios

Note: The following are typical examples and not an exhaustive list. You can determine how to release the component based on your specific business needs.

Manual call

In the following cases, call this method to release SDK component resources:

• When the buyer leaves the checkout page or switches views
  When the buyer leaves the current checkout page (for example, navigates to another page or closes the checkout modal), it is recommended to call destroy() to release the component resources created by mount().
• When recreating the Payment Element results in parameter changes
  When the buyer initiates multiple payments and the Payment Element configuration (such as sessionData, available payment methods, or appearance settings) changes, you need to release the previous Payment Element instance and call mount() again with the new parameters.
• When switching to a payment method not provided by Payment Element
  When the Payment Element has been mounted and rendered, but you need to switch to a payment method not integrated with Payment Element (for example, a custom form or another independent component), you should first call destroy() to unmount the current Payment Element, and display the other payment component.
  

Automatic release

In the following cases, the SDK automatically releases resources:

• Payment succeeds without redirection to a result page
  When the payment is successful and the process is configured not to redirect to a separate result page, the SDK automatically reclaims part of the resources used for the payment and resets the state to what it was before the mount() call.