Quickstart
Here is a quick start snippet adding PaygreenJS to your website :
<!DOCTYPE html>
<html>
<head>
<title>MyShop - Payment</title>
<script defer type="text/javascript" src="https://pgjs.paygreen.fr/latest/paygreen.min.js"></script>
<link href="https://pgjs.paygreen.fr/latest/paygreen.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="paygreen-container"></div>
<div id="paygreen-methods-container"></div>
<div id="yourCustomDiv">
<div id="paygreen-pan-frame"></div>
<div id="paygreen-cvv-frame"></div>
<div id="paygreen-exp-frame"></div>
<div id="paygreen-reuse-checkbox-container"></div>
<button id="payBtn" type="button" onclick="handleClick()" style="display: none">
Pay
</button>
</div>
</body>
<script type="text/javascript">
const handleClick = () => {
paygreenjs.submitPayment();
};
window.addEventListener("load", function() {
paygreenjs.attachEventListener(
paygreenjs.Events.FULL_PAYMENT_DONE,
(event) => console.log("Payment success"),
);
paygreenjs.attachEventListener(
paygreenjs.Events.REUSABLE_ALLOWED_CHANGE,
(event) => console.log(event.detail.reusable_allowed),
);
paygreenjs.attachEventListener(
paygreenjs.Events.PAYMENT_FLOW_ONCHANGE,
() => {
const flows = paygreenjs.status().flows;
const lastFlow = flows[flows.length - 1];
if (lastFlow?.method) {
document.querySelector('#payBtn').style.display = 'block';
} else {
document.querySelector('#payBtn').style.display = 'none';
}
},
);
paygreenjs.init({
paymentOrderID: "po_xxxxxxxxxxxxxxxxxxx",
objectSecret: "xxxxxxxxxxxx",
publicKey: "pk_xxxxxxxxxxx",
mode: "payment",
style: {
input: {
base: {
color: 'black',
fontSize: '18px',
},
},
}
});
});
</script>
</html>
Updated 3 months ago