Bug | IOS | Hostedfields not showing input on initialization or focus
DiggaDragon opened this issue · 3 comments
General information
- SDK version: 3.81.1, 3.85.6, 3.96.1
- Environment: Sandbox
- Browser and OS: Safari on IPhone 14 (Browserstack), Safari on IPad Pro 11 2023 (IOS 16.6)
- Framework: Angular
- Dependencies: client.min.js, hosted-fields.min.js, data-collector.min.js
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:
- adding ticket into cart
- continue > log-in with given credentials > continue
- choosing Braintree Credit-Card on payment-page and selecting one of the provided installment-options in the dropdown
- on summary-page, accepting the terms-and-conditions and hitting the submit-button
Error happens here:
- in the opened modal-window, all fields appear to be empty (even though the card-holder-field has an initial value)
- focusing a field by clicking on it seems to select the current value, but still does not show it (everything seems rather small)
- typing a new value into the field, shows the current value, but upon "blur" the value disappears again
- the whole form can be filled-out and braintree seems to recognize the valid entries, since submit-button activates, but the customer won't see their input
(on Android and Windows everything is working fine)
Following GIF shows the issue perfectly:
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:
<!-- Credit Card Number -->
<section data-qa="credit-card-number-row" class="card-section align-label">
<ev-forms-form-field>
<ev-forms-field-label>
Credit-card-number:
</ev-forms-field-label>
<div class="input-wrapper" id="card-number"></div>
<div id="card-image" [attr.class]="foundCardType"></div>
</ev-forms-form-field>
</section>
<section data-qa="expiration-row" class="card-section">
<ev-forms-form-field>
<ev-forms-field-label>
Expiration Date:
</ev-forms-field-label>
<div class="expiration-date-fields">
<div class="input-wrapper expiration-date-field" id="expiration-month" data-qa="expiration-month-field"></div>
<div class="input-wrapper expiration-date-field" id="expiration-year" data-qa="expiration-year-field"></div>
</div>
</ev-forms-form-field>
</section>
<!-- Verification Code / CVV -->
<section data-qa="verification-code-row" class="card-section">
<ev-forms-form-field>
<ev-forms-field-label>
CVV
</ev-forms-field-label>
<div class="input-wrapper" id="cvv"></div>
</ev-forms-form-field>
</section>
<section class="card-section">
<button id="button-pay" [disabled]="!isFormValid" type="button"
(click)="this.sendForm()"
class="btn btn-primary btn-lg btn-block theme-btn-font-color">
Submit
</button>
</section>
<section class="card-section">
<button
class="btn-spacing-xs btn btn-secondary btn-block btn-lg first-button"
type="button"
(click)="onSecondaryButtonClick()">
Cancel
</button>
</section>
PS: Sorry for weird formatting of the typescript-code, I don't know how I can get it to look nice
👋 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.
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 ?