CVC Field not easy to focus from iOS WebView

[fwebdev]

We have Problems filling out the CreditCard Fields in mobile WebView.
The CVC Field loses focus immediately after selecting it. Only hiding the keyboard makes the focus remain on the field.

• Enter Credit Card Number
• When try to tab into the CVC field, the field is not focusable.

Device: iPhone 14 Pro, (18.6.2) & iPhone SE (15.4)
But is working on iPhone X, (16.7.7)

The Error just occurs when the Page is called within a WebView.

This is our Implementation of the Web Component

#buildAdyenConfig() {  
    const dataset = this.#uiState.secureFields()?.dataset || {};  
    const locale = dataset.locale || '';  
    const countryCode = locale.includes('_') ? locale.split('_')[1] : null;  
  
    return {  
       environment: dataset.environment || null,  
       clientKey: dataset.clientKey || null,  
       showPayButton: false,  
       session: {  
          id: dataset.sessionId || null,  
          sessionData: dataset.sessionData || null,  
       },  
       locale,  
       countryCode,  
       translations: {  
          'de-DE': {  
             'form.instruction': '',  
             'creditCard.securityCode.label': 'Kartenprüfnummer',  
          },  
          'nl_NL': {  
             'form.instruction': '',  
             'creditCard.securityCode.label': 'Card Verification Code',  
             'creditCard.expiryDateField.placeholder': 'MM/JJ',  
          },  
          'en_GB': {  
             'form.instruction': '',  
             'creditCard.securityCode.label': 'Card Security Code',  
             'creditCard.expiryDateField.placeholder': 'MM/YY',  
          },  
       },  
       onPaymentCompleted: (result) => this.#onPaymentCompleted(result),  
       onPaymentFailed: (result) => this.#onPaymentFailed(result),  
       onError: (error, component) => this.#onError(error, component),  
    };  
}  
  
#buildCardConfig() {  
    const allowedPaymentMethods = this.#uiState.secureFields()?.dataset.allowPaymentMethods?.split(',').filter(Boolean);  
  
    return {  
       hasHolderName: true,  
       holderNameRequired: true,  
       positionHolderNameOnTop: true,  
       brands: allowedPaymentMethods,  
       billingAddressRequired: false,  
       showBrandIcon: true,  
       styles: {  
          base: {  
             color: '#4c4c4c',  
             fontSize: '18px',  
             lineHeight: '22px',  
             fontWeight: '400',  
          },  
          error: {  
             color: '#4c4c4c',  
          },  
          validated: {  
             color: '#4c4c4c',  
          },  
       },  
       data: {  
          holderName: '',  
       },  
       onChange: (state) => this.#handleCardChange(state),  
       onConfigSuccess: () => this.#insertCvcInfoLink(),  
       onBinLookup: (event) => this.#handleInvalidCards(event),  
       challengeWindowSize: '05',
    };  
}  
  
async #mountAdyen() {  
    try {  
       const adyenCheckout = await this.AdyenCheckout(this.#adyenConf);  
       this.adyenComponent = new this.Card(adyenCheckout, this.#cardConf).mount('#secureCardFields_cc');  
    } catch (error) {  
       this.#sdkError(error);  
    }  
}

Adyen SDK Version: "@adyen/adyen-web": "6.31.1",

Debugging in the Webview (WKWebview)

This seems to be an combination problem of Adyen & “old” devices. I can see warnings beeing thrown in the console, indicating something is going wrong, when you try to edit the field.

[RTIInputSystemClient remoteTextInputSessionWithID:textSuggestionsChanged:] Can only set suggestions for an active session. sessionID = E04C82C0-0C0B-42F5-AA66-XXXXXXXXX 

[RTIInputSystemClient remoteTextInputSessionWithID:performInputOperation:] perform input operation requires a valid sessionID. inputModality = Keyboard, inputOperation = <null selector>, customInfoType = UIEmojiSearchOperations

Furthermore, I can see hangs which indicate that something is blocking the main thread when trying to edit some fields. IMHO this is not an iOS issue, but a web/adyen bug.