Test automation card payment in flutter app that uses adyen with appium?

Question

I'm using adyen_dropin plugin within my flutter app to manage payments. For the payment flow im trying to run an automation test that should enter card values and proceed to pay. See the screen shot here

The automation im writing using appium and webdriver.io. and following is a test script that run.

const { expect, browser, $ } = require('@wdio/globals')
const screenPayment = require('../pageobjects/payments.page')

    describe('Launch app and proceed to payments', () => {
        it('Click on Basket counter icon and Proceed on payment flow', async () => {
            await screenPayment.clickProceedToPayment();
        })
    })

The page model is

const find = require('appium-flutter-finder');
const assert = require('assert');

class PaymentsPage{
    //click on basket icon in bottom navigation
    async clickProceedToPayment(){
        

        const checkoutButton = find.byText("Checkout Now");
        await driver.execute('flutter:waitFor', checkoutButton);
        assert.strictEqual(await driver.getElementText(checkoutButton), 'Checkout Now');
        await driver.elementClick(checkoutButton);

        const proceedButton = find.byText("Proceed to Payment");
        await driver.execute('flutter:waitFor', proceedButton);
        assert.strictEqual(await driver.getElementText(proceedButton), 'Proceed to Payment');
        await driver.elementClick(proceedButton);

        const contexts = await driver.getContexts();
        console.log('Available contexts now: ', contexts);

        await driver.switchContext('FLUTTER');

        const modalSheetTitle = find.byText("PAYMENT METHODS");
        await driver.execute('flutter:waitFor', modalSheetTitle);  
        assert.strictEqual(await driver.getElementText(modalSheetTitle), 'PAYMENT METHODS');
       
        // const creditcardOption = find.byText("Credit Card");
        // await driver.execute('flutter:waitFor', creditcardOption);   
        // assert.strictEqual(await driver.getElementText(creditcardOption), 'Credit Card');
        // await driver.elementClick(creditcardOption);

        const cardPayTitle = find.byText("CREDIT CARD");
        await driver.execute('flutter:waitFor', cardPayTitle);  
        assert.strictEqual(await driver.getElementText(cardPayTitle), 'CREDIT CARD');
        

        // const cardNumberField = find.byValueKey("app:id/editText_cardNumber");
        // // await driver.execute('flutter:waitFor', cardNumberField);   
        // await driver.waitFor(cardNumberField);
        // await driver.tap(cardNumberField);
        // await driver.enterText('5555 5555 5555 4444');

        // const expiryDateField = find.byValueKey("app:id/editText_expiryDate");
        // // await driver.execute('flutter:waitFor', expiryDateField);
        // await driver.waitFor(expiryDateField);   
        // await driver.tap(expiryDateField);
        // await driver.enterText('03/2030');

        // const cvcField = find.byValueKey("app:id/editText_securityCode");
        // // await driver.execute('flutter:waitFor', cvcField);   
        // await driver.waitFor(cvcField);
        // await driver.tap(cvcField);
        // await driver.enterText('737');

        // const cardHolderField = find.byValueKey("app:id/editText_cardHolder");
        // // await driver.execute('flutter:waitFor', cardHolderField);
        // await driver.waitFor(cardHolderField);   
        // await driver.tap(cardHolderField);
        // await driver.enterText('Corporate');

        // const payButton = find.byValueKey("app:id/payButton");
        // // await driver.execute('flutter:waitFor', payButton);   
        // await driver.waitFor(payButton);
        // await driver.tap(payButton);
    }
}
module.exports = new PaymentsPage()

When in run the test script it does not identify the elements in adyen dropin (the commented lines for card payment fields). the log shows Available contexts now: [ 'NATIVE_APP', 'FLUTTER' ].

How can i properly format or update this test to work ?