Test Spotflow Vue SDK Compatibility Across Multiple Vue Versions

Description

The Vue SDK needs to be tested for compatibility across different major and minor versions of Vue (e.g., Vue 2, Vue 3.2, Vue 3.3+) to ensure it works reliably in various user environments.

Steps to Reproduce

• Create separate Vue projects using the following versions: [list the versions you installed e.g., Vue 2 (Options API), Vue 3.2, Vue 3.3+ (Composition API)].

• Install the latest version of the Spotflow Vue SDK in each project.

• Attempt a full checkout flow (initiation, payment, callback) in each environment.

• Check the browser console and the Vue devtools for errors, warnings, or inconsistent behavior.

Expected Behavior

• The Vue SDK should adapt and function correctly in both Vue 2 and modern Vue 3 environments, utilizing the appropriate lifecycle hooks and component structure for each version if necessary.

Proposed Solution

• Document the compatibility findings for each Vue version tested.

• For any bugs or compatibility issues found, open a new, detailed issue. Please use the issue template in the repository as a guide and include steps to reproduce, screenshots, and relevant logs.

To Test

To test payments in Vue SDK, you'll need a secret key and/or encryption key (needed only for card payments). You can test in either live or test mode. For test mode, you'll interact with our test cards here and for live mode, you have to use a real card and transfer actual money to the bank displayed. We advise to use a small amount for tests e.g 100 NGN, 1 GHS etc.

Live Public key: pk_live_af1d99a9cee8482aa4d350fea4da2172

Test Public key: pk_test_d7443052f34b4c3ca08857b07e820949

Live Encryption key: HziLxqxa+9QgMyb0kqk1xYqjn1P23f4McHaqHJph41A=

Test Encryption key: 47qqVD15YhEbmF8EhY/3F9aICG/Hn96NMz4AbLb1cRk=

Contribution Guidelines

• Pull the latest changes from our hacktoberfest branch.

• Create your own branch from hacktoberfest (e.g., git checkout -b your-name/vue-hacktoberfest).

• Ensure you add the "hacktoberfest-accepted" label to your PRs.

• Once you have submitted one or more PRs, feel free to share your contribution with screenshots on Twitter or LinkedIn! Please tag our official handle @spotflow_one and include the hashtags #Hacktoberfest and #Opensource.

Helpful Resources/Links:

• https://docs.spotflow.one/

• https://www.npmjs.com/package/@spot-flow/vue-spotflow-checkout