Created
December 7, 2018 18:44
-
-
Save johnotu/3da475141fa938ac5299ec4f82cf4853 to your computer and use it in GitHub Desktop.
Payment for Messenger - Payment Webview
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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