Multiple Forms Initialization with VGSCollect

[luizgamabh]

Expected Behavior

VGSCollect should allow specifying a unique form ID or a selector for each form initialization, enabling multiple forms to coexist on the same page without conflicts or duplication of fields and event listeners.

Current Behavior

Currently, VGSCollect requires forms to have an ID of "collect-form". When multiple forms with the same ID are present on the page, the first form is initialized multiple times, leading to duplicated fields and event listeners, the other forms are ignored. This not only causes a validation error in HTML but also results in improper handling of form data and events.

Possible Solution

• Allow passing a form ID or CSS selector in the VGSCollect.create method to specify the scope of initialization.

Steps to Reproduce (for bugs)

1. Create a page with multiple credit card forms.
2. Ensure each form has the ID "collect-form".
3. Initialize VGSCollect for each form using the current API.
4. Observe that only the first form is initialized, but multiple times, resulting in field duplication and multiple event listeners being attached.

Context

We are integrating VGSCollect on a page with multiple tabs containing forms for adding or managing payment methods. The current limitation with form IDs causes significant issues, including HTML validation errors and improper handling of form interactions. This issue is critical as it affects the usability and security of the payment forms on our platform.