Skip to content

Instantly share code, notes, and snippets.

@johnotu
Created December 7, 2018 18:44
Show Gist options
  • Save johnotu/3da475141fa938ac5299ec4f82cf4853 to your computer and use it in GitHub Desktop.
Save johnotu/3da475141fa938ac5299ec4f82cf4853 to your computer and use it in GitHub Desktop.
Payment for Messenger - Payment Webview
<html lang="en">
<head>
<title>Card payment</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"> >
<meta name="viewport" , content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<style>
#item-list {
margin-top: 3.5em;
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-light" style="background-color: #ecf0f1">
<div>
<h5 class="font-weight-bold">
<%= page_name %>
</h5>
</div>
</nav>
<div id="item-list">
<div class='container'>
<h5>Payment for Order #
<%= order_number %>
</h5>
<div id="paystackEmbedContainer"></div>
</div>
</div>
<script type="text/javascript" src="https://ravesandboxapi.flutterwave.com/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>
<script>
// Facebook JavaScript SDK
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.com/en_US/messenger.Extensions.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));
window.extAsyncInit = function () {
}
// Get URL parameters
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
let store_name = getParameterByName('store_name'), userPSID = getParameterByName('user_id'), page_id = getParameterByName('page_id');
const API_publicKey = "FLWPUBK-144f6ce78a70af769b682b23c55c5396-X";
// Made this an IIFE so it runs as soon as page loads
(function payWithRave() {
var x = getpaidSetup({
PBFPubKey: API_publicKey,
customer_email: "<%= user_email %>",
amount: '<%= order_total %>',
custom_logo: 'https://i.postimg.cc/nc49nnqc/jstitbit-logo.png',
customer_phone: "233264537375",
currency: "GHS",
country: 'GH',
txref: "rave-test-jstitbit-123456",
meta: [{
metaname: "orderNumber",
metavalue: "<%=order_number%>"
}],
onclose: function () { },
callback: function (response) {
var txRef = response.tx.txRef;
let confirmReq = new Request(`/payment/card/status`, {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/json',
'bot-token': '234dhfjrtuyildkjeuuthnselki'
}),
body: JSON.stringify({
"response": response,
"order_id": '<%= order_id %>',
"order_number": '<%= order_number %>',
"user_psid": userPSID,
"page_id": page_id
})
});
fetch(confirmReq)
.then(
response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ', response.status);
return;
} else {
response.json().then(data => {
// Close payment modal
x.close();
// Close Messenger webview and return to conversation thread
MessengerExtensions.requestCloseBrowser(function success() {
//console.log(success)
}, function error(err) {
console.log(err)
});
})
}
}
)
.catch(err => {
console.log('Fetch Error :-S', err);
});
}
});
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment