我要在React Native Webview中呈现PayZen提供的付款表格。
以下是该组件的代码:
const PaymentForm = ({ navigation }): ReactElement => {
const amount = navigation.getParam('amount');
const [formHtml, setFormHtml] = useState('');
const [retrievePayZenData] = useMutation(RETRIEVE_PAYZEN_DATA_MUTATION);
return (
<View style={{ flex: 1 }}>
{!!formHtml && (
<WebView
scalesPageToFit={true}
source={{
html: formHtml,
}}
originWhitelist={['*']}
javaScriptEnabled
/>
)}
<Button
title="Submit"
onPress={async (): Promise<void> => {
const { data } = await retrievePayZenData({
variables: { amount: parseInt(amount, 10) },
});
const payZenUrl = data?.payZenData.url;
const payZenData = data?.payZenData.data;
const payZenResponse = await axios.post(
payZenUrl,
qs.stringify(payZenData),
);
setFormHtml(payZenResponse.data);
}}
/>
</View>
);
};
单击提交后,我在发布请求的响应的数据字段中接收html,并将其显示在WebView中。这部分正常工作。
不起作用的是,当我输入付款信息并在WebView中显示的表单中单击Submit(提交)时。我看到一种加载方式,它永远不会消失,而且由于付款提供商的后台没有交易记录,因此请求似乎也没有得到处理。
任何有关如何使付款表格在WebView中工作的想法都会受到赞赏。