Question

我们正在尝试在React本机应用程序中使用Square Payment Form，并能够使用Webview显示该表单，但是我们根本无法与该表单进行交互。

这是具有WebView的squareForm组件：

import React, { Component } from 'react'
import { View, WebView, StyleSheet } from 'react-native'

const squareForm = require('./square/squareForm.html');

const SquareForm = () => {
   return (
      <View style = {{flex: 1}}>
         <WebView
             source = {squareForm}
         />
      </View>
   )
}

export default SquareForm;

这是被称为的地方：

import React, { Component } from 'react';
import {StyleSheet, View, Text} from 'react-native';
import { Container, Content, Form, Item, Label, Input, Button } from 'native-base';

import SquareForm from '../components/SquareForm'


export default class CardAdd extends Component {
  render() {
    return (
        <Container>
            <SquareForm />
        </Container>
    )}
};

html，css和javascript文件均直接从正方形仓库https://github.com/square/connect-api-examples/tree/master/templates/web-ui/payment-form/basic中获得，并且位于正方形文件夹中。

我们还尝试使用webview属性injectedJavaScript链接js文件，如下所示：

import React, { Component } from 'react'
import { View, StyleSheet, WebView } from 'react-native'

const squareForm = require('./square/squareForm.html')
const injectedJs = require('./square/squareForm.js')

const SquareCard = () => {
   return (
      <View style = {{flex: 1}}>
         <WebView
            javaScriptEnabled={true}
            domStorageEnabled={true}
            startInLoadingState={true}
            javaScriptEnabledAndroid={true}
            mixedContentMode={'compatibility'}
            injectedJavaScript={injectedJs}
            javaScriptEnabledAndroid={true}
            source = {squareForm}
         />
      </View>
   )
}

export default SquareCard;

但是这导致了以下错误：sqPaymentForm is not defined，并且由于我们无法连接，因此没有显示任何表单：https://js.squareup.com/v2/paymentform

Square Payment Form不适用于本机

0 个答案: