braintree / braintree-web

A suite of tools for integrating Braintree in the browser
https://developer.paypal.com/braintree/docs/start/hello-client/javascript/v3
MIT License
444 stars 134 forks source link

Bug | IOS | Hostedfields not showing input on initialization or focus #690

Closed DiggaDragon closed 1 year ago

DiggaDragon commented 1 year ago

General information

Issue description

We found an issue with hostedfields not showing user-inputs after gaining or losing focus, or initial values before being touched. It is reproducible in our testing-system, for which I can provide URL and test-account for login via PM.

Steps to reproduce are as follows:

(on Android and Windows everything is working fine)

Following GIF shows the issue perfectly: iphone-14-hostedfields-not-shown-properly

Integration

The braintree-scripts are injected right after the summary-page is loaded on initialization. When the customer is ticking the checkbox for the terms-and-conditions and hitting the submit-button right after, the scripts are already fully loaded. After that a modal-window is opened, which is executing the following code after Angulars "ngAfterViewInit" is triggered: this.document.defaultView.braintree.hostedFields.create({ client: this.clientInstance, fields: { cardholderName: { selector: '#card-holder', placeholder: 'Dwink Baxon', prefill: 'Daniel Migration' }, number: { selector: '#card-number', placeholder: '1111 1111 1111 1111' }, cvv: { selector: '#cvv', placeholder: '123' }, expirationMonth: { selector: '#expiration-month', placeholder: 'month', select: [ '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12' ] }, expirationYear: { selector: '#expiration-year', placeholder: 'year', select: ['2023', '2024', '2025', '2026'] } } }, (err, hostedFieldsInstance) => { // hostedFields are used to activate submit-button on "validityChange" });

The template of the modal-window looks as follows:

Card-Holder:
Credit-card-number:
Expiration Date:
CVV

PS: Sorry for weird formatting of the typescript-code, I don't know how I can get it to look nice

hollabaq86 commented 1 year ago

đź‘‹ Thanks for reaching out and the thorough notes! Can you contact Braintree Support referencing this Github issue and provide them your test URL and account details? We'll partner with them to work with you on investigating this issue.

insanidade commented 1 year ago

Hi, @DiggaDragon : you mentioned SDK version: 3.81.1, 3.85.6, 3.96.1. Do you refere to server SDK (and if so, which one?) or iOS SDK ?

DiggaDragon commented 1 year ago

Hi Otávio,

neither, actually I mean the scripts that we inject into our angular-website (so we are talking about the frontend here). Sorry for the confusion.

Thank you

Regards, Daniel Nikolic Software Development Expert WEB @.**@.> | http://www.eventim.dehttp://www.eventim.de | http://www.fansale.dehttp://www.fansale.de | https://urldefense.com/v3/__http://www.fanticket.de__;!!AEl5w8WD!uNMrRB4E1xAElWRBDjB37v7ZN-sPR-uOCxp9b9N_gTxEQ0tDTKl2LLM3MFhc_2rEjXqvLwfD2xI499t3SQpeyjZ9vWduOfeyEgtFUXvdtKw7kKtFIpzbdHwMovYuY6NQeiw8sUDkA8vVMg$ <https://urldefense.com/v3/__http://www.fanticket.de__;!!AEl5w8WD!uNMrRB4E1xAElWRBDjB37v7ZN-sPR-uOCxp9b9N_gTxEQ0tDTKl2LLM3MFhc_2rEjXqvLwfD2xI499t3SQpeyjZ9vWduOfeyEgtFUXvdtKw7kKtFIpzbdHwMovYuY6NQeiw8sUDkA8vVMg$ > CTS EVENTIM AG & Co. KGaA | Contrescarpe 75A | D- 28195 Bremen Persönlich haftende Gesellschafterin: EVENTIM Management AG // AG Hamburg HRB 129556 // Vorstand: Klaus-Peter Schulenberg (Vors.), Holger Hohrein, Alexander Ruoff // Vorsitzender des Aufsichtsrats: Dr. Bernd Kundrun Verwaltungsanschrift: Contrescarpe 75A – D-28195 Bremen // AG München, HRB 212700 – Ust.-ID Nr.: DE 181155470

Von: Otávio Augusto R. de França @.> Gesendet: Freitag, 4. August 2023 18:21 An: braintree/braintree-web @.> Cc: Nikolic, Daniel @.>; Mention @.> Betreff: Re: [braintree/braintree-web] Bug | IOS | Hostedfields not showing input on initialization or focus (Issue #690)

EXTERNAL

Hi, @DiggaDragonhttps://urldefense.com/v3/__https:/github.com/DiggaDragon__;!!AEl5w8WD!u7yUA6AqbUkqNkHE5RESBt1gxT7diBICeQy0dUg-bYJ-AsiHJ-OPCuEEeObXddjOqNqoWoQBJrf4bQYL7FmNE21equ_2o1k$ : you mentioned SDK version: 3.81.1, 3.85.6, 3.96.1. Do you refere to server SDK (and if so, which one?) or iOS SDK ?

— Reply to this email directly, view it on GitHubhttps://urldefense.com/v3/__https:/github.com/braintree/braintree-web/issues/690*issuecomment-1665873492__;Iw!!AEl5w8WD!u7yUA6AqbUkqNkHE5RESBt1gxT7diBICeQy0dUg-bYJ-AsiHJ-OPCuEEeObXddjOqNqoWoQBJrf4bQYL7FmNE21etJVYvR0$, or unsubscribehttps://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/BBU5EAOLJHYDHUFXG7BAJRDXTUOOTANCNFSM6AAAAAA273RIQM__;!!AEl5w8WD!u7yUA6AqbUkqNkHE5RESBt1gxT7diBICeQy0dUg-bYJ-AsiHJ-OPCuEEeObXddjOqNqoWoQBJrf4bQYL7FmNE21e9HL6ZuA$. You are receiving this because you were mentioned.Message ID: @.**@.>>

Bitte beachten Sie die CTS EVENTIM Solutions GmbH Datenschutzinformation<https://urldefense.com/v3/__https://eventimproc.sharepoint.com/:b:/s/Dataprotection-M365/EbjAM5u6dN1JqqqAtEOrWvABqTSDhGMyi0kF_4axxreUTg?e=kRoih6__;!!AEl5w8WD!uNMrRB4E1xAElWRBDjB37v7ZN-sPR-uOCxp9b9N_gTxEQ0tDTKl2LLM3MFhc_2rEjXqvLwfD2xI499t3SQpeyjZ9vWduOfeyEgtFUXvdtKw7kKtFIpzbdHwMovYuY6NQeiw8sUCOUvSWHg$ >. Please refer to CTS EVENTIM Solutions GmbH privacy policy<https://urldefense.com/v3/__https://eventimproc.sharepoint.com/:b:/s/Dataprotection-M365/EbjAM5u6dN1JqqqAtEOrWvABqTSDhGMyi0kF_4axxreUTg?e=kRoih6__;!!AEl5w8WD!uNMrRB4E1xAElWRBDjB37v7ZN-sPR-uOCxp9b9N_gTxEQ0tDTKl2LLM3MFhc_2rEjXqvLwfD2xI499t3SQpeyjZ9vWduOfeyEgtFUXvdtKw7kKtFIpzbdHwMovYuY6NQeiw8sUCOUvSWHg$ >.