Method to destroy SDK

[copEquifax]

Hi everyone! I'm developing an Angular implementation of the SDK-JS of Mercado Pago.

Just we need tokenize the credit card and this implementation it's going well, but we have a problem once we initialize by twice the SDK.

I'll try to explain by the calls of components:

1. We create the customer on MP by the SDK of the backend
2. We add a credit card with PCI data and tokenize the card by the SDK of JS in the frontend (reusable component)
3. In this reusable component we initialize the SDK and all PCI fields of the form.
4. We link the credit card tokenized with the client by the SDK of backend.

In the same session and instace (without refresh the page I mean), we can add another credit card, so we call the reusable component which again initialize the SDK and the fields of the form.

In this point, all the validations that the SDK does in the fields are wrong. The validyChanges event do not retrieve any error when there is an explicit error, so we can't validate anymore the fields and we can't follow the normal flow. To use again the SDK we need to refresh the page and therefore our entire app.

In resume, the first time that we initialize the SDK we don't have problem with it, but the second time that we initialize it we have the issues described.

So, is there any function or way to kill the SDK instance from the memory or anything that we can implement?

I'll hope that you understand our case, please let me know if you need more details (in english or spanish)

Thanks in advance!

[lucmantovani]

Hello @copEquifax!

We understand your situation
Currently there isn't a method to destroy the SDK instance, but there is a possible alternative

Instead of always creating the SDK in this reusable component you could have a single instance for your entire application (have a look about this pattern here)
With this single instance you can create and "destroy" instances of Bricks, Card Form or even Fields, because each one of them has the mount and unmount methods.

In summary:

1. When your app starts, create the instance of the SDK
2. When there is the need to add the card, mount Bricks, Card Form or Fields
3. When finished, unmount Bricks, Card Form or fields

[copEquifax]

Hi @lucmantovani !

As like you was told us, we've put the unmount method every time that we destroy the component and when we enter again to the reusable component, works fine!

So thanks you very much.

By other hand, We want you ask another question. There is some event or method to fetch the expiration date dynamically from the PCI fields? In our old implementation (without the SDK), through normal input fields we putted the expiration date on an credit card image template.

Can you please tell us if can we fetch the expiration date? But to discard this feature.

Thanks you in advance!

[lucmantovani]

I'm glad it worked!

As for the other question, unfortunately not
We only provide access to PCI fields when the integrator is PCI compliant

If you are PCI compliant, I recommend you to get in touch with our integration team through support to follow with this implementation: https://www.mercadopago.com/developers/en/support/center/tickets