Skip to content

Instantly share code, notes, and snippets.

@Victor-Ugwueze

Victor-Ugwueze/Payment.js

Last active March 7, 2024 15:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Victor-Ugwueze/0f3dbcd7fc09e42573810d07ba5f460b to your computer and use it in GitHub Desktop.
Save Victor-Ugwueze/0f3dbcd7fc09e42573810d07ba5f460b to your computer and use it in GitHub Desktop.
Download ZIP
Paystack Inline implementation Javascript
Raw
getHtmlTemplate.js
export const htmlTemplate = (email, name) => `<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://js.paystack.co/v1/inline.js"></script>
<style>
.form {
display: flex;
align-items: center;
flex-direction: column;
margin: 0 auto;
background: #000;
height: 100vh;
}
.subscription-text {
color: #FFF;
margin-top: 40px;
width: 80%;
text-align: center;
}
.subscription-text p {
margin-top: 40px;
}
.payment-button {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 400px;
}
.payment-button :last-child {
margin-top: 30px;
}
.payment-button button {
background: #3b5998;
}
button {
color: #FFF;
border-radius: 4px;
width: 80%;
border: none;
padding: 10px 4em;
}
.cancel-button {
width: 100%;
display: flex;
align-self: center;
justify-content: center;
}
.cancel-button button {
width: 80%;
background: gray;
}
</style>
</head>
<body>
<div class="form">
<div class="subscription-text">
<h2> Renew Your Subscription.</h2>
<p> Sorry your subscription has expired. Renew your subscription and
get unlimited acces to resources.</p>
</div>
<div class="payment-button">
<button type="button" onclick="payWithPaystack(1000)">₦1000 Annually</button>
<button type="button" onclick="payWithPaystack(200)">₦200 Monthly</button>
</div>
</div>
<script>
function payWithPaystack(amount){
var handler = PaystackPop.setup({
key: 'pk_test_86d32aa1nV4l1da7120ce530f0b221c3cb97cbcc'',
email: "${email}",
amount: amount * 100,
currency: "NGN",
ref: ''+Math.floor((Math.random() * 1000000000) + 1),
callback: function(response){
var resp = {event:'success', response: response, amount: amount };
window.ReactNativeWebView.postMessage(JSON.stringify(resp))
},
metadata: {
custom_fields: [
{
display_name: '',
variable_name: '',
value: ""
}
]
},
onClose: function(){
var resp = {event:'failed' };
window.ReactNativeWebView.postMessage(JSON.stringify(resp))
}
});
handler.openIframe();
}
</script>
<body>
</html>`;
Raw
Payment.js
import React, { Component } from "react";
import { Alert, Modal, Text } from "react-native";
import { htmlTemplate } from getHtmlTemplate;
....
class Payment extends Component {
.....
_onMessage(data) {
const {
response
} = JSON.parse(data);
Alert.alert("Success", `${JSON.stringify(response)}`, [{ text: "Ok" }]);
}
render() {
const {
isOPen,
loaded,
user: { email, name },
} = this.state;
return (
<SafeAreaView style={{ flex: 1, marginTop: 20 }}>
<Modal
visible={isOPen}
style={[{ flex: 1 }]}
animationType="fade"
transparent={false}
>
<View
style={{
flex: 1,
}}
>
<WebView
source={{ html: htmlTemplate(email, name) }}
onMessage={(e) => {
this._onMessage(e.nativeEvent.data);
}}
/>
</View>
</Modal>
{!loaded && <Loader />}
</SafeAreaView>
);
}
}
export default Payment;
@MrBns
Copy link

MrBns commented Mar 7, 2024

Hi, for somehow I couldn't find any documantation for inlinejs.. can you please send me the docs link please.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment