---
# System prepended metadata

title: Untitled

---

```
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;
```