Quickstart
Before using this quick start snippet you must have:
- A validdated account on https://app.paygreen.fr/
- You must have payment configs enabled
- You must create a PaymentOrder (instructions here) to retrieve a payment order ID and an object secret
- A public key (can be found here)
Then add PaygreenJS to your website like this (don't forget to change the parameters at the very end of the snippet) :
<!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", <!--Add your payment order ID-->
objectSecret: "xxxxxxxxxxxx", <!--Add the payment order objectsecret here -->
publicKey: "pk_xxxxxxxxxxx", <!--Add your public key here-->
mode: "payment",
style: {
input: {
base: {
color: 'black',
fontSize: '18px',
},
},
}
});
});
</script>
</html>
Updated about 1 month ago