Stripe element not loading on iOS, only Safari

I am having issues getting the pay-with-stripe btn element to load on iOS mobile. It works fine on desktop (and when viewing in responsive mode) as well as Brave on mobile.

I checked the console logs when running the iOS simulator and can see that https://js.stripe.com/v3/ is loaded. Code:

<h3 class="pmbx__title">Payment Information</h3>
<div ref="card" class="stripe-box"></div>
<div v-if="stripeError !== ''">{{ stripeError }}</div>
<button @click.stop.prevent="onOrder" class='pay-with-stripe btn' :disabled='!loadedStripe || disablePaying'>Pay £{{calPrice(totalPrice)}}</button>

In the vue component:

const url = 'https://js.stripe.com/v3/';
if (process.client) {
    if (stripeLoadStart) {
            this.loadedStripe = true;
        return;
    }
    let domElement = document.createElement('script')
    domElement.setAttribute('src', url)
    domElement.onload = () => {
        this.loadedStripe = true
        this.stripe = Stripe(this.stripeKey)
        const elements = this.stripe.elements()
        this.card = elements.create('card')
        this.card.mount(this.$refs.card)
        this.card.addEventListener('change', ({
            error
        }) => {
            this.stripeError = error ? error.message : '';
            console.log(this.stripeError)
        })
    }
    document.body.appendChild(domElement)
    stripeLoadStart = true;
}

Any help appreciated.