```
import React from 'react';
import {StyleSheet, View, StatusBar} from 'react-native';
import {WebView} from 'react-native-webview';
const genHtml = (amount) =>
`<html>
<body>
<form >
<script src="https://js.paystack.co/v1/inline.js"></script>
</form>
<script>
function payWithPaystack(){
var handler = PaystackPop.setup({
key: "pk_test_23260f68e4476c00189b4a61a060fdc8cb6f8d3c",
email: 'test.user@email.com',
amount: ${amount},
currency: "NGN",
channels: ['card'],
ref: '68a713c6-ea6f-4ea7-980f-737f4fcd17551',
firstname: 'Test',
lastname: 'User',
callback: function(response){
console.log(response)
alert('success. transaction ref is ' + response.reference);
},
onClose: function(){
alert('window closed');
}
});
handler.openIframe();
}
payWithPaystack()
</script>
</body>
</html>`
const App = () => {
const html = genHtml(20000)
return (
<>
<StatusBar barStyle="dark-content" />
<View style={styles.mmmm}></View>
{/* <View style={styles.con}> */}
<WebView
source={{html}}
/>
{/* </View> */}
</>
);
};
const styles = StyleSheet.create({
mmmm: {
height: 80,
marginTop: 8
},
con: {
flex: 1
}
});
export default App;
```