<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Apple Pay Button Example</title> <style> .apple-pay-button { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy; height: 50px; width: 200px; border-radius: 5px; } </style>
<script src="https://js.braintreegateway.com/web/3.92.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.92.0/js/apple-pay.min.js%22%3E%3C/script> <!-- includes the Braintree JS client SDK --> <script src="https://js.braintreegateway.com/web/dropin/1.44.0/js/dropin.min.js"></script> <script crossorigin src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"> </script> <!-- includes jQuery --> <script src="http://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
</script> </head>
<body>
<h2>Pay with Apple Pay</h2> <button id="apple-pay-button" class="apple-pay-button"></button>
<script> let applePayInstance; // Keep it available for later use let authorization = ""; // Store the client token
// Preload Braintree client token and Apple Pay instance
async function initializeBraintree() {
try {
const response = await fetch("https://api.paybito.com:9443/ApplePay/api/braintree/client-token");
const data = await response.json();
authorization = data?.btToken;
const clientInstance = await braintree.client.create({
authorization,
});
applePayInstance = await braintree.applePay.create({
client: clientInstance,
});
console.log("Braintree Apple Pay initialized");
} catch (error) {
console.error("Error initializing Braintree:", error);
}
}
// Start Apple Pay session on button click
function startApplePaySession() {
if (!applePayInstance) {
alert("Apple Pay is not ready. Please try again.");
return;
}
const paymentRequest = applePayInstance.createPaymentRequest({
total: {
label: "Apple Pay Example",
amount: "8.99",
},
currencyCode: "USD",
countryCode: "US",
supportedNetworks: ["visa", "masterCard", "amex", "discover"],
merchantCapabilities: ["supports3DS"],
});
const session = new ApplePaySession(3, paymentRequest);
session.onvalidatemerchant = async (event) => { try { const merchantSession = await fetch( "https://api.paybito.com:9443/ApplePay/api/apple-pay/createPaymentSessionGet", { method: "GET", headers: { "Content-Type": "application/json" }, // body: JSON.stringify({ validationURL: event.validationURL }), } ).then((res) => res.json()).then((data)=>{ console.log("data",data) session.completeMerchantValidation(data); })
// console.log("Merchant Session:", );
} catch (err) { console.error("Merchant validation failed:", err); session.abort(); } };
session.onpaymentmethodselected = event => { // No updates or errors are needed, pass an empty object. const update = {}; session.completePaymentMethodSelection(update); };
session.onshippingmethodselected = event => { // No updates or errors are needed, pass an empty object. const update = {}; session.completeShippingMethodSelection(update); }; session.onshippingcontactselected = event => { const update = {}; session.completeShippingContactSelection(update); }; session.onpaymentauthorized = async (event) => {
const payment = event.payment;
console.log(event,"event",payment)
try {
const payload = await applePayInstance.tokenize({
token: event.payment.token,
});
console.log(payload,"payload")
const response = await fetch(
"https://api.paybito.com:9443/ApplePay/api/braintree/process-payment",
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ nonce: payload.nonce}),
}
).then((res) => res.json());
if (response.success) {
session.completePayment(ApplePaySession.STATUS_SUCCESS);
alert("Payment successful!");
} else {
session.completePayment(ApplePaySession.STATUS_FAILURE);
alert("Payment failed.");
}
} catch (err) {
console.error("Payment authorization failed:", err);
session.completePayment(ApplePaySession.STATUS_FAILURE);
}
};
session.oncancel = (event) => {
console.log("Payment was cancelled by the user:", event);
const reason = event.sessionError?.code || "User closed the payment modal.";
console.error("Cancellation reason:", event?.sessionError?.info || "Unknown reason");
console.error("Cancellation reason:", reason); };
session.begin();
}
// Initialize Braintree on page load
document.addEventListener("DOMContentLoaded", () => {
initializeBraintree();
// Attach click event to the Apple Pay button
if (window.ApplePaySession && ApplePaySession.canMakePayments()) {
console.log("Apple Pay is available!");
document
.getElementById("apple-pay-button")
.addEventListener("click", startApplePaySession);
} else {
console.error("Apple Pay is not supported on this device.");
document.getElementById("apple-pay-button").style.display = "none";
}
});
</script>
</body>
</html>