@chainplatform/paypal
Version:
The library allows you to use Paypal Payment with react-native without ejecting support both react-native and react-native-web.
69 lines (63 loc) • 2.39 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Accept a payment</title>
<meta name="author" content="santran686@gmail.com">
<meta name="author" content="chainplatform.net">
<style>
* {
box-sizing: border-box;
}
body {
font-family: system-ui, sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
display: flex;
justify-content: center;
}
@media screen and (max-width: 400px) {
#paypal-button-container {
width: 100%;
}
}
@media screen and (min-width: 400px) {
#paypal-button-container {
width: 100%;
max-width: 250px;
}
}
</style>
</head>
<body>
<div id="paypal-button-container"></div>
<script>
const parsedUrl = new URL(window.location.href),
env = parsedUrl.searchParams.get("env"),
order_id = parsedUrl.searchParams.get("order_id"),
client_id = parsedUrl.searchParams.get("client_id"),
theme = parsedUrl.searchParams.get("theme");
let tag = document.createElement('script');
tag.src = `https://${env == "sandbox" ? env : "www"}.paypal.com/sdk/js?client-id=${client_id}&components=buttons&debug=false`;
tag.onload = () => {
document.documentElement.style.colorScheme = `${theme}`;
paypal.Buttons({
createOrder: function (data, actions) {
return `${order_id}`;
},
onApprove: function (data, actions) {
actions.order.capture().then(function (details) {
let result = { paymentResult: 1, datas: details };
(window.ReactNativeWebView || window.parent || window).postMessage(JSON.stringify(result), '*');
});
}
}).render('#paypal-button-container');
};
tag.onerror = () => { };
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
</body>
</html>