Injecting card information to website checkout React Native WebView

Question

I'm working on a project that allows users to pay for items through virtual generated cards. It is built on React Native and uses WebView to allow in-app browsing of online stores. Since there is no native integration with the stores, I wanted to check how I could inject the virtual card details into checkout form through something like button click. The follow-up question would be if such form fields have similar id's across the online store spectrum - which if not need to be handled (please let me know if I need to inspect each webpage for the id name in such case as I'm fairly new). I've attached an example screenshot of a checkout page that I want to test this on. If possible, please provide an example using the following template (an example I found to change website background color):

const jsCode = `document.querySelector('.HeaderHero').style.backgroundColor = 'purple';`;
    return (
      <View style={styles.container}>
        <WebView
          ref={ref => {
            this.webview = ref;
          }}
          source={{ uri: this.state.webViewUrl }}
          originWhitelist={['*']}
          javaScriptEnabledAndroid={true}
          injectedJavaScript={jsCode}
        />
      </View>
    );