I have installed the plugin WPCode to implement the script where I inserted it before the Payment Button. The script below, by the way is for the sandbox environment, but when I was testing it on the website, I cannot get past the Address details. Snap Finance’s interface wanted to find the address via Postal Code, but upon countless use of different post codes and even real addresses, it says: “Unable to find any addresses with that Postcode”. I searched everything online, but I can’t find any solution how to implement Snap finance payment except from their website: https://developer.snapfinance.co.uk/sdks/javascript.
So in conclusion, I don’t know if the integration really works. Now, our client has given us the Client ID for live production and wants to integrate and make it live in this coming week. Can anyone help how to implement this correctly? I don’t even know if I did the right thing with the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SNAP UK SDK EXAMPLE</title>
<script src="https://sandbox-sdk.snapfinance.co.uk/v1/snapuk.min.js"></script>
<style>
/* Styles to center the snap checkout button container */
#snap-uk-checkout {
display: flex;
justify-content: center;
align-items: center; /* Vertically center */
}
/* Styles for the text */
.pay-with-snap-finance {
text-align: center;
font-size: 18px;
margin-bottom: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="pay-with-snap-finance">Pay With Snap Finance</div>
<div id="snap-uk-checkout"></div>
<div class="pay-with-snap-finance">OR</div>
<script>
const clientId = "P6cQzoD9DS6SeerbD6bnBZ4V7WXGPn8z"
const merchantId = "<!-- PLEASE ADD merchantId HERE -->"
snapuk.init(clientId);
const transaction = {
invoiceNumber: 51174155,
deliveryDate: "2024-06-06",
shippingCost: 50.12,
customer: {
firstName: "Monday",
lastName: "Smith",
email: "[email protected]",
mobileNumber: "07570032890",
streetAddress: "The Quays",
city: "Manchester",
postcode: "M50 3BE",
houseName: "",
houseNumber: "7",
unit: "Flat 165"
},
products: [
{
quantity: 2,
productId: "iphone",
price: 500.99,
description: "BED and FRAME"
}
]
};
snapuk.checkout.button({
merchantId: merchantId,
transaction: transaction,
onApplicationId: (applicationId, token) => {
console.log("onApplicationId triggered. We recommend verifying the status code with our Status API before updating the order on your side.");
},
onClose: (applicationId, token) => {
console.log("onClose triggered. We recommend verifying the status code with our Status API before updating the order on your side.");
},
onSuccess: async (applicationId, token) => {
console.log("onSuccess triggered. We recommend verifying the status code with our Status API before updating the order on your side.");
},
onError: (applicationId, token, message) => {
console.log("onError triggered. We recommend verifying the status code with our Status API before updating the order on your side.");
},
onDenied: (applicationId, token) => {
console.log("onDenied triggered. We recommend verifying the status code with our Status API before updating the order on your side.");
},
onUnverifiedAccount: (applicationId, token) => {
console.log("onUnverifiedAccount triggered. We recommend verifying the status code with our Status API before updating the order on your side.");
},
onPaymentFailure: (applicationId, token) => {
console.log("onPaymentFailure triggered. We recommend verifying the status code with our Status API before updating the order on your side.");
},
onWithdrawn: (applicationId, token) => {
console.log("onWithdrawn triggered. We recommend verifying the status code with our Status API before updating the order on your side.");
}
});
</script>
</body>
</html>
To be honest, I am afraid of using the live client ID as I don’t really feel confident with what I am doing.
New contributor
neptune_ is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.