Skip to content
This repository has been archived by the owner on Feb 20, 2024. It is now read-only.

Destory the element and reset the Stripe object #14

Merged
merged 2 commits into from
Oct 13, 2017

Conversation

jasonlfunk
Copy link

This code makes the code destroy the element and reset the Stripe object when the element is unloaded.

The destroy() is needed to prevent the "IntegrationError: Can only create one Element of type card".

Resetting the Stripe object is necessary to have Stripe re-initialized on the next component mount. This is necessary in order to load remote fonts (and probably other reasons as well.)

This PR isn't throughly tested but it is working fine in my environment.

Copy link

@sam3d sam3d left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, thank you for doing this! This is the recommended way to destroy components in Vue.

Any updates on this @nkoehring?

Copy link
Contributor

@nkoehring nkoehring left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot for your PR!

Copy link
Collaborator

@softbeehive softbeehive left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jasonlfunk thank you for your contribution! Could you also update package.json version to 0.2.3?

export function destroy() {
Stripe.instance = null;
Stripe.elements = null;
Stripe.createToken = null;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you remove semicolons?

@@ -26,6 +26,8 @@ export default {

beforeDestroy () {
this._element.unmount()
this._element.destroy()
destroy();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove semicolon

@softbeehive softbeehive merged commit fbe2c4c into ectoflow:master Oct 13, 2017
@morrislaptop
Copy link

Is this supposed to work when hot reloading?

@lisa13
Copy link

lisa13 commented Aug 6, 2018

This is the solution for Angular 2+ :
Add OnDestroy Lifecycle hook.

ngOnDestroy(): void { this.card.unmount(); this.card.destroy(); }

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants