Inputs not focusable / height: 0

[RyanEwen]

Hi there,

I am interested in using this library to add Bambora custom checkout to a React app I am working on, which uses Material-UI.

I managed to add the fields easily enough, however when they are displayed, only one of the 3 fields is ever focusable. It's usually the expiry field but sometimes it's one of the others. I noticed that the iframe height is 0 when this happens, and if I tweak this in the dev tools then I am able to focus the keyboard on the input again, but the wrapper doesn't seem to be aware that this is happening, causing the input helper to overlap the inputted text.

Have you see this before, and do you know if there's anything I can try to do to resolve this?

[RyanEwen]

I just realized that this is probably because I'm loading my page from localhost and not a valid HTTPS domain. I'll confirm and update.

[MikeIbberson]

Hey Ryan,

Unfortunately, I haven't seen this happen before and it often does work on localhost for me. So far, I've used this in three apps, but each has had a very similar build structure.

Can you tell me a bit more about your project's setup and maybe I can identify some differences there! I'll copy and paste a file from one of my private repositories too in case that helps.

[MikeIbberson]

Not the cleanest code in this screenshot, but this was the last project where I used it:

That project was built with Gatsby JS and supported SSR. Any chance that could have something to do with it?

[RyanEwen]

I can confirm that it works fine when loaded through a valid HTTPS domain. I am not sure why it only partially works when loaded from localhost:5050 since there are no errors about loading unprotected resources or anything from bambora's servers.

So far all I have is your component wrapped inside a box like so:

import React from 'react'
import Box from '@material-ui/core/Box'
import Bambora, { Submit, CreditCardField, CvvField, ExpiryField } from 'bambora-material-ui'

export default class BamboraFrame extends React.Component {
    render() {
        const { processor, src, onTokenize, onPaymentSaveChange, ...otherProps } = this.props

        return (
            <Box {...otherProps}>
                <Bambora onTokenization={(e) => alert(e.token)}>
                    <CreditCardField label="Credit card number" />
                    <CvvField label="CVV" />
                    <ExpiryField label="Expiry" />
                    {/* <Submit /> */}
                </Bambora>
            </Box>
        )
    }
}

[RyanEwen]

Also - thank for the quick responses!

[MikeIbberson]

I have found that occasionally when my app hot reloads during development, sometimes the inputs unmount and only the styled non-interactive MUI components load afterwards. Reviewing some of the code now, I wonder if it has something to do with the useScript hook. When the fields do not load for you, do you see the Bambora script tag in your DOM? If not, that might be the culprit.

[RyanEwen]

When the fields do not load for you, do you see the Bambora script tag in your DOM? If not, that might be the culprit.

The script tag is there and one of the inputs does usually seem to work. But only ever 1 of the 3.