mirror of
https://github.com/jlengrand/checkoutCreate.git
synced 2026-03-10 08:11:18 +00:00
1101 lines
37 KiB
JavaScript
1101 lines
37 KiB
JavaScript
const clientKey = JSON.parse(document.getElementById("client-key").innerHTML)
|
|
const storedCountry = document.getElementById("country-code")
|
|
|
|
|
|
/**
|
|
* Global configuration variables
|
|
* @param {HTMLHtmlElement} r - Identifies root of document for css variables
|
|
* @param {boolean} openFirst - Status of "Open first payment method" toggle
|
|
* @param {boolean} billAdd - Status of "Add billing address" toggle
|
|
* @param {boolean} onlyStored - Status of "Add card holder name" toggle
|
|
* @param {boolean} holderName - Status of "Show only stored payment methods" toggle
|
|
* @param {boolean} showPayMethod - Status of "Show stored payment methods" toggle
|
|
* @param {boolean} hideCVC - Status of "Hide CVC field" toggle
|
|
* @param {boolean} placeholderData - Status of "Include placeholder data" toggle
|
|
* @param {Array} instantArray - Instant Payment Methods "Enable" toggle - populate array if active = true
|
|
* @param {Array} payMethods - Payment methods included in the array will be "blocked"
|
|
* @param {Array} payArray - Payment methods values to include in the blockedPaymentMethods array
|
|
* @param {string} countrySettings - Value of the currently selected shopper's country
|
|
*
|
|
*/
|
|
let r = document.querySelector(":root")
|
|
let openFirst = true
|
|
let billAdd = false
|
|
let onlyStored = false
|
|
let holderName = false
|
|
let showPayMethod = true
|
|
let hideCVC = false
|
|
let placeholderData = false
|
|
let instantArray = []
|
|
let payMethods =[];
|
|
let payArray = Object.values(payMethods);
|
|
let countrySettings = "NL"
|
|
|
|
/**
|
|
* Hiding toggles of local payment methods not supported for NL (initial page load)
|
|
*
|
|
*/
|
|
document.getElementById('trustlyCol').style.display = "none"
|
|
document.getElementById('trustlyBox').style.display = "none"
|
|
document.getElementById('trustlyToggle').style.display = "none"
|
|
document.getElementById('clearpayCol').style.display = "none"
|
|
document.getElementById('clearpayBox').style.display = "none"
|
|
document.getElementById('clearpayToggle').style.display = "none"
|
|
|
|
// identify checkout div and create new empty div to replace with
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
|
|
/**
|
|
* Country flag svg image location
|
|
*/
|
|
const flagUrlMap = {
|
|
NL: {
|
|
src: "https://ca-test.adyen.com/ca/adl/img/flags/nl.svg"
|
|
},
|
|
GB: {
|
|
src: "https://ca-test.adyen.com/ca/adl/img/flags/gb.svg"
|
|
},
|
|
US: {
|
|
src: "https://ca-test.adyen.com/ca/adl/img/flags/us.svg"
|
|
}
|
|
}
|
|
/**
|
|
* Country specific variables
|
|
*/
|
|
const countryVariables = [
|
|
{
|
|
countryCode: "NL",
|
|
currency: "EUR",
|
|
locale: "en_NL",
|
|
city: "Amsterdam",
|
|
postalCode: "1011DJ",
|
|
street: "Simon Carmiggeltstraat",
|
|
houseNumberOrName: "6 - 50",
|
|
},
|
|
{
|
|
countryCode: "GB",
|
|
currency: "GBP",
|
|
locale: "en_GB",
|
|
city: "London",
|
|
postalCode: "W1T3HE",
|
|
street: "Wells Mews",
|
|
houseNumberOrName: "12 13",
|
|
},
|
|
{
|
|
countryCode: "US",
|
|
currency: "USD",
|
|
locale: "en_US",
|
|
city: "New York City",
|
|
postalCode: "10003",
|
|
street: "71 5th Avenue",
|
|
stateOrProvince: "NY",
|
|
houseNumberOrName: "Floor 11",
|
|
},
|
|
]
|
|
|
|
/**
|
|
* Country dropdown changes the flag image and reloads the dropin with new country values
|
|
* Calls /paymentMethods to retrieve available txvariants for that country
|
|
* @param {*} el
|
|
*/
|
|
async function changeSelect(el) {
|
|
// let countryPM = getConfiguration();
|
|
console.log(Object.values)
|
|
document.getElementById("flag_img").src = flagUrlMap[el.value].src
|
|
const country = el.value
|
|
countrySettings = getCountryData(country)
|
|
let txvariants = await getCountryPM()
|
|
console.log(txvariants)
|
|
if (txvariants.includes("trustly") === true) {
|
|
document.getElementById('trustlyCol').style.display = ""
|
|
document.getElementById('trustlyBox').style.display = ""
|
|
document.getElementById('trustlyToggle').style.display = ""
|
|
} else {
|
|
document.getElementById('trustlyCol').style.display = "none"
|
|
document.getElementById('trustlyBox').style.display = "none"
|
|
document.getElementById('trustlyToggle').style.display = "none"
|
|
}
|
|
if (txvariants.includes("clearpay") === true) {
|
|
document.getElementById('clearpayCol').style.display = ""
|
|
document.getElementById('clearpayBox').style.display = ""
|
|
document.getElementById('clearpayToggle').style.display = ""
|
|
} else {
|
|
document.getElementById('clearpayCol').style.display = "none"
|
|
document.getElementById('clearpayBox').style.display = "none"
|
|
document.getElementById('clearpayToggle').style.display = "none"
|
|
}
|
|
if (
|
|
document.getElementById("dropin-container") &&
|
|
document.getElementById("placeholderData").checked == true
|
|
) {
|
|
placeholderData = {
|
|
holderName: "Jane Doe",
|
|
billingAddress: {
|
|
street: countrySettings.street,
|
|
postalCode: countrySettings.postalCode,
|
|
city: countrySettings.city,
|
|
country: countrySettings.countryCode,
|
|
stateOrProvince: countrySettings.stateOrProvince,
|
|
houseNumberOrName: countrySettings.houseNumberOrName,
|
|
},
|
|
}
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout();
|
|
} else if (document.getElementById("dropin-container")) {
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Funtion to toggle first payment method open
|
|
*/
|
|
document
|
|
.getElementById("firstPayBox")
|
|
.parentNode.addEventListener("click", function (event) {
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (this.querySelector("input").checked) {
|
|
openFirst = true
|
|
} else {
|
|
openFirst = false
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout();
|
|
})
|
|
|
|
// Function to add billing address
|
|
document
|
|
.getElementById("billAdd")
|
|
.parentNode.addEventListener("click", function (event) {
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (this.querySelector("input").checked) {
|
|
billAdd = true
|
|
} else {
|
|
billAdd = false
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout()
|
|
})
|
|
|
|
// Function to show only saved payment methods
|
|
document
|
|
.getElementById("onlyStored")
|
|
.parentNode.addEventListener("click", async function (event) {
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (this.querySelector("input").checked) {
|
|
onlyStored = true
|
|
} else {
|
|
onlyStored = false
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout()
|
|
})
|
|
|
|
// function to show holder name field
|
|
document
|
|
.getElementById("holderName")
|
|
.parentNode.addEventListener("click", function (event) {
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (this.querySelector("input").checked) {
|
|
holderName = true
|
|
} else {
|
|
holderName = false
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout()
|
|
})
|
|
|
|
// Funtion to show all payment methods
|
|
document
|
|
.getElementById("showPayMethod")
|
|
.parentNode.addEventListener("click", function (event) {
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (this.querySelector("input").checked) {
|
|
showPayMethod = false
|
|
} else {
|
|
showPayMethod = true
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout()
|
|
})
|
|
|
|
// Funtion to hide or show cvc
|
|
document
|
|
.getElementById("hideCVC")
|
|
.parentNode.addEventListener("click", function (event) {
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (this.querySelector("input").checked) {
|
|
hideCVC = true
|
|
} else {
|
|
hideCVC = false
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout()
|
|
})
|
|
|
|
// Funtion for including placeholder data
|
|
document
|
|
.getElementById("placeholderData")
|
|
.parentNode.addEventListener("click", function (event) {
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (this.querySelector("input").checked) {
|
|
placeholderData = {
|
|
holderName: "Jane Doe",
|
|
billingAddress: {
|
|
street: countrySettings.street,
|
|
postalCode: countrySettings.postalCode,
|
|
city: countrySettings.city,
|
|
country: countrySettings.countryCode,
|
|
stateOrProvince: countrySettings.stateOrProvince,
|
|
houseNumberOrName: countrySettings.houseNumberOrName,
|
|
},
|
|
}
|
|
} else {
|
|
placeholderData = false
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout()
|
|
})
|
|
|
|
if (storedCountry) {
|
|
const selectedCountry = JSON.parse(storedCountry.innerHTML)
|
|
countrySettings = getCountryData(selectedCountry)
|
|
}
|
|
|
|
function getCountryData(countrySettings) {
|
|
return countryVariables.find(
|
|
(locality) => locality.countryCode === countrySettings
|
|
)
|
|
}
|
|
|
|
/**
|
|
* setting the array of blockedPaymentMethods
|
|
*/
|
|
let blockedPM = {"blockedPaymentMethods": payArray};
|
|
|
|
async function getCountryPM() {
|
|
let noBlock = {"blockedPaymentMethods": []};
|
|
const mergeData = {
|
|
...countrySettings,
|
|
...noBlock
|
|
}
|
|
const unblockedResponse = await callServer(
|
|
"/api/getPaymentMethods",
|
|
mergeData
|
|
)
|
|
let payMethodArray = unblockedResponse.paymentMethods
|
|
let txvariants = payMethodArray.map(({ type }) => type);
|
|
return await txvariants
|
|
}
|
|
|
|
async function paymentMethods() {
|
|
const mergeData = {
|
|
...countrySettings,
|
|
...blockedPM
|
|
}
|
|
const paymentMethodsResponse = await callServer(
|
|
"/api/getPaymentMethods",
|
|
mergeData
|
|
)
|
|
console.log(paymentMethodsResponse)
|
|
return await paymentMethodsResponse
|
|
}
|
|
|
|
async function getConfiguration() {
|
|
const paymentMethodsResponse = await paymentMethods();
|
|
let prettyResponse = JSON.stringify(paymentMethodsResponse, null, 2)
|
|
console.log(prettyResponse)
|
|
let configuration = {
|
|
paymentMethodsResponse: paymentMethodsResponse,
|
|
clientKey,
|
|
locale: countrySettings.locale || "en_NL",
|
|
countryCode: countrySettings.countryCode || "NL",
|
|
environment: "test",
|
|
showPayButton: true,
|
|
paymentMethodsConfiguration: {
|
|
ideal: {
|
|
showImage: true,
|
|
},
|
|
card: {
|
|
hasHolderName: holderName,
|
|
holderNameRequired: true,
|
|
hideCVC: hideCVC,
|
|
// brands: ['mc','visa','amex'],
|
|
name: "Credit or debit card",
|
|
data: {
|
|
holderName: placeholderData.holderName,
|
|
billingAddress: placeholderData.billingAddress,
|
|
},
|
|
enableStoreDetails: true,
|
|
billingAddressRequired: billAdd,
|
|
amount: {
|
|
value: 4000,
|
|
currency: countrySettings.currency || "EUR",
|
|
},
|
|
},
|
|
storedCard: {
|
|
hideCVC: hideCVC,
|
|
},
|
|
paypal: {
|
|
amount: {
|
|
currency: countrySettings.currency || "EUR",
|
|
value: 4000,
|
|
},
|
|
environment: "test", // Change this to "live" when you're ready to accept live PayPal payments
|
|
countryCode: countrySettings.countryCode || "NL", // Only needed for test. This will be automatically retrieved when you are in production.
|
|
showPayButton: true,
|
|
merchantId: "AD74FQNVXQY5E",
|
|
}
|
|
},
|
|
onSubmit: (state, dropin) => {
|
|
if (state.isValid) {
|
|
handleSubmission(
|
|
state,
|
|
dropin,
|
|
"/api/initiatePayment",
|
|
countrySettings,
|
|
payArray
|
|
)
|
|
}
|
|
},
|
|
onAdditionalDetails: (state, dropin) => {
|
|
handleSubmission(state, dropin, "/api/submitAdditionalDetails")
|
|
}
|
|
}
|
|
let cloneConfig = Object.assign({}, configuration)
|
|
logConfig(cloneConfig)
|
|
return await configuration
|
|
}
|
|
|
|
async function initCheckout() {
|
|
try {
|
|
let configuration = await getConfiguration()
|
|
const checkout = await AdyenCheckout(configuration)
|
|
checkout
|
|
.create("dropin", {
|
|
showRemovePaymentMethodButton: true,
|
|
openFirstPaymentMethod: openFirst,
|
|
showStoredPaymentMethods: onlyStored,
|
|
showPaymentMethods: showPayMethod,
|
|
onDisableStoredPaymentMethod: (
|
|
storedPaymentMethodId,
|
|
resolve,
|
|
reject
|
|
) => {
|
|
callServer("/api/disable", {
|
|
storedPaymentMethodId: storedPaymentMethodId,
|
|
})
|
|
resolve()
|
|
reject()
|
|
},
|
|
instantPaymentTypes: instantArray
|
|
})
|
|
.mount("#dropin-container")
|
|
return await checkout
|
|
} catch (error) {
|
|
console.error(error)
|
|
alert("Error occurred. Look at console for details")
|
|
}
|
|
}
|
|
|
|
|
|
function showInstantPay(){
|
|
const instantPayState = document.getElementById('instantPay').checked;
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (instantPayState == true) {
|
|
instantArray = ['paywithgoogle']
|
|
} else {
|
|
instantArray = []
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout()
|
|
}
|
|
|
|
async function unmountDropin() {
|
|
const checkout = await initCheckout()
|
|
checkout.unmount("#dropin-container")
|
|
}
|
|
|
|
|
|
async function unmountContainer() {
|
|
try {
|
|
const checkout = await AdyenCheckout();
|
|
checkout
|
|
.unmount("#dropin-container")
|
|
} catch (error) {
|
|
console.error(error)
|
|
alert("Error occurred. Look at console for details")
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @function handleSubmission - Event handlers called when the shopper selects the pay button, or when additional information is required to complete the payment
|
|
* @param state - Dropin state data
|
|
* @param dropin - Dropin
|
|
* @param url - web address
|
|
* @param countrySettings - country specific data
|
|
*/
|
|
async function handleSubmission(state, dropin, url, countrySettings) {
|
|
try {
|
|
//keeping the country data for the /payments call
|
|
const mergedData = {
|
|
...state.data,
|
|
...countrySettings
|
|
}
|
|
const res = await callServer(url, mergedData)
|
|
let prettyResponse = JSON.stringify(res, null, 2)
|
|
console.log(prettyResponse)
|
|
handleServerResponse(res, dropin)
|
|
} catch (error) {
|
|
console.error(error)
|
|
alert("Error occurred. Look at console for details")
|
|
}
|
|
}
|
|
|
|
// Calls your server endpoints
|
|
async function callServer(url, data) {
|
|
const res = await fetch(url, {
|
|
method: "POST",
|
|
body: data ? JSON.stringify(data) : "",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
return await res.json()
|
|
}
|
|
|
|
const successDiv = document.querySelector(".successDiv")
|
|
successDiv.style.display = "none"
|
|
const errorDiv = document.querySelector(".errorDiv")
|
|
errorDiv.style.display = "none"
|
|
|
|
/**
|
|
* @function handleServerResponse - Handles responses sent from your server to the client
|
|
* @param res - API response payload
|
|
* @param dropin - Dropin
|
|
*/
|
|
function handleServerResponse(res, dropin) {
|
|
if (res.action) {
|
|
dropin.handleAction(res.action)
|
|
} else {
|
|
switch (res.resultCode) {
|
|
case "Authorised":
|
|
let currentDiv = document.getElementById("dropin-container")
|
|
successDiv.style.display = ""
|
|
currentDiv.style.display = "none"
|
|
// window.location.href = "/result/success";
|
|
break
|
|
case "Pending":
|
|
case "Received":
|
|
window.location.href = "/result/pending"
|
|
break
|
|
case "Refused":
|
|
let thisDiv = document.getElementById("dropin-container")
|
|
errorDiv.style.display = ""
|
|
thisDiv.style.display = "none"
|
|
// window.location.href = "/result/failed";
|
|
break
|
|
default:
|
|
window.location.href = "/result/error"
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add txvariants to blockPaymentMethods array on button click
|
|
// ------- Cards ---------
|
|
/**
|
|
* @function blockCard - adds/removes visa, amex and mastercard as txvariants to blockPaymentMethods array
|
|
*/
|
|
function blockCard() {
|
|
const CardState = document.getElementById('showCard').checked;
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (CardState == true) {
|
|
const filteredPM = payMethods.filter((s) => !s.match("visa") && !s.match("mc") && !s.match("amex"));
|
|
payMethods = filteredPM;
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
} else {
|
|
payMethods.push("visa");
|
|
payMethods.push("mc");
|
|
payMethods.push("amex");
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout()
|
|
}
|
|
// -------PayPal---------
|
|
/**
|
|
* @function blockPaypal - adds/removes paypal as txvariant to blockPaymentMethods array
|
|
*/
|
|
function blockPaypal() {
|
|
const paypalState = document.getElementById('showPaypal').checked;
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (paypalState == true) {
|
|
const filteredPM = payMethods.filter((s) => !s.match("paypal"));
|
|
payMethods = filteredPM;
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
} else {
|
|
payMethods.push("paypal");
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout()
|
|
}
|
|
// -------Ideal---------
|
|
/**
|
|
* @function blockIdeal - adds/removes ideal as txvariant to blockPaymentMethods array
|
|
*/
|
|
function blockIdeal() {
|
|
const idealState = document.getElementById('showIdeal').checked;
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (idealState == true) {
|
|
const filteredPM = payMethods.filter((s) => !s.match("ideal"));
|
|
payMethods = filteredPM;
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
} else {
|
|
payMethods.push("ideal");
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout();
|
|
}
|
|
// -------Klarna---------
|
|
/**
|
|
* @function blockKlarna - adds/removes klarna as txvariant to blockPaymentMethods array
|
|
*/
|
|
function blockKlarna() {
|
|
const klarnaState = document.getElementById('showKlarna').checked;
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (klarnaState == true) {
|
|
const filteredPM = payMethods.filter((s) => !s.match("klarna"));
|
|
payMethods = filteredPM;
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
} else {
|
|
payMethods.push("klarna");
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout();
|
|
}
|
|
// -------GooglePay---------
|
|
/**
|
|
* @function blockGooglePay - adds/removes paywithgoogle as txvariant to blockPaymentMethods array
|
|
*/
|
|
function blockGooglePay() {
|
|
const GooglePayState = document.getElementById('showGooglePay').checked;
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (GooglePayState == true) {
|
|
const filteredPM = payMethods.filter((s) => !s.match("paywithgoogle"));
|
|
payMethods = filteredPM;
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
} else {
|
|
payMethods.push("paywithgoogle");
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout();
|
|
}
|
|
// -------WeChat---------
|
|
/**
|
|
* @function blockWeChat - adds/removes wechatpayQR as txvariant to blockPaymentMethods array
|
|
*/
|
|
function blockWeChat() {
|
|
const WeChatState = document.getElementById('showWeChat').checked;
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (WeChatState == true) {
|
|
const filteredPM = payMethods.filter((s) => !s.match("wechatpayQR"));
|
|
payMethods = filteredPM;
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
} else {
|
|
payMethods.push("wechatpayQR");
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout();
|
|
}
|
|
// -------AliPay---------
|
|
/**
|
|
* @function blockAliPay - adds/removes alipay as txvariant to blockPaymentMethods array
|
|
*/
|
|
function blockAliPay() {
|
|
const AliPayState = document.getElementById('showAliPay').checked;
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (AliPayState == true) {
|
|
const filteredPM = payMethods.filter((s) => !s.match("alipay"));
|
|
payMethods = filteredPM;
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
} else {
|
|
payMethods.push("alipay");
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout();
|
|
}
|
|
// -------Paysafecard---------
|
|
/**
|
|
* @function blockPaysafecard - adds/removes paysafecard as txvariant to blockPaymentMethods array
|
|
*/
|
|
function blockPaysafecard() {
|
|
const PaysafecardState = document.getElementById('showPaysafecard').checked;
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (PaysafecardState == true) {
|
|
const filteredPM = payMethods.filter((s) => !s.match("paysafecard"));
|
|
payMethods = filteredPM;
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
} else {
|
|
payMethods.push("paysafecard");
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout();
|
|
}
|
|
// -------Clearpay---------
|
|
/**
|
|
* @function blockClearpay - adds/removes clearpay as txvariant to blockPaymentMethods array
|
|
*/
|
|
function blockClearpay() {
|
|
const ClearpayState = document.getElementById('showClearpay').checked;
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (ClearpayState == true) {
|
|
const filteredPM = payMethods.filter((s) => !s.match("clearpay"));
|
|
payMethods = filteredPM;
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
} else {
|
|
payMethods.push("clearpay");
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout();
|
|
}
|
|
// -------Trustly---------
|
|
/**
|
|
* @function blockTrustly - adds/removes trustly as txvariant to blockPaymentMethods array
|
|
*/
|
|
function blockTrustly() {
|
|
const TrustlyState = document.getElementById('showTrustly').checked;
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
if (TrustlyState == true) {
|
|
const filteredPM = payMethods.filter((s) => !s.match("trustly"));
|
|
payMethods = filteredPM;
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
} else {
|
|
payMethods.push("trustly");
|
|
payArray = Object.values(payMethods);
|
|
blockedPM = {"blockedPaymentMethods": payArray};
|
|
}
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout();
|
|
}
|
|
|
|
/**
|
|
* @function setDynamicCSS - Colour picker that changes button colour
|
|
*/
|
|
function setDynamicCSS() {
|
|
colorVal = document.getElementById("buttonColorPick").value
|
|
r.style.setProperty("--background-color", colorVal)
|
|
updateStyleCode()
|
|
}
|
|
/**
|
|
* @function backgroudColor - Changes page background colour
|
|
*/
|
|
function backgroundColor() {
|
|
let bgVal = document.getElementById("bgColorPick").value
|
|
r.style.setProperty("--bg-color", bgVal)
|
|
}
|
|
/** @function dropinColor - Changes active payment method colour */
|
|
function dropinColor() {
|
|
let dropinColor = document.getElementById("dropinColorPick").value
|
|
r.style.setProperty("--dropin-color", dropinColor)
|
|
updateStyleCode()
|
|
}
|
|
/**
|
|
* @function updateColorPickers - Gets current colour value to show on colour pickers
|
|
*/
|
|
function updateColorPickers() {
|
|
// font color
|
|
let fontColorInput = document.getElementById("textColorPick")
|
|
let fontColor = getComputedStyle(r).getPropertyValue("--text-color")
|
|
let fontColorNoSpace = fontColor.replace(/\s/g, '');
|
|
fontColorInput.value = fontColorNoSpace
|
|
// website background
|
|
let bgColorInput = document.getElementById("bgColorPick")
|
|
let bgColor = getComputedStyle(r).getPropertyValue("--bg-color")
|
|
let bgColorNoSpace = bgColor.replace(/\s/g, '');
|
|
bgColorInput.value = bgColorNoSpace
|
|
// active payment method background
|
|
let activeColorInput = document.getElementById("dropinColorPick")
|
|
let activeColor = getComputedStyle(r).getPropertyValue("--dropin-color")
|
|
let activeColorNoSpace = activeColor.replace(/\s/g, '');
|
|
activeColorInput.value = activeColorNoSpace
|
|
// collapsed payment methods
|
|
let tabColorInput = document.getElementById("dropinTabColorPick")
|
|
let tabColor = getComputedStyle(r).getPropertyValue("--dropin-tab-color")
|
|
let tabColorNoSpace = tabColor.replace(/\s/g, '');
|
|
tabColorInput.value = tabColorNoSpace
|
|
// pay button
|
|
let buttonColorInput = document.getElementById("buttonColorPick")
|
|
let buttonColor = getComputedStyle(r).getPropertyValue("--background-color")
|
|
let buttonColorNoSpace = buttonColor.replace(/\s/g, '');
|
|
buttonColorInput.value = buttonColorNoSpace
|
|
//
|
|
}
|
|
// console.log(tabColorNoSpace.constructor)
|
|
/** @function dropinTabColor - Changes collapsed payment methods' colours */
|
|
function dropinTabColor() {
|
|
let dropinTabColor = document.getElementById("dropinTabColorPick").value
|
|
r.style.setProperty("--dropin-tab-color", dropinTabColor)
|
|
updateStyleCode()
|
|
}
|
|
// change text colour
|
|
function textColor() {
|
|
let textColor = document.getElementById("textColorPick").value
|
|
r.style.setProperty("--text-color", textColor)
|
|
updateStyleCode()
|
|
}
|
|
// change pay buttons' edges (staright to round)
|
|
function buttonEdges() {
|
|
let edgeValue = document.getElementById("buttonEdges").value
|
|
let pixelVal = edgeValue + "px"
|
|
r.style.setProperty("--button-edges", pixelVal)
|
|
updateStyleCode()
|
|
}
|
|
// change Drop-in's edges (straight to round)
|
|
function bodyEdges() {
|
|
let bodyEdgeValue = document.getElementById("bodyEdges").value
|
|
let bodyPixelVal = bodyEdgeValue + "px"
|
|
r.style.setProperty("--body-edges", bodyPixelVal)
|
|
r.style.setProperty("--selectedBody-edges", bodyPixelVal)
|
|
r.style.setProperty("--topedges-left", bodyPixelVal)
|
|
r.style.setProperty("--topedges-right", bodyPixelVal)
|
|
r.style.setProperty("--bottomedges-left", bodyPixelVal)
|
|
r.style.setProperty("--bottomedges-right", bodyPixelVal)
|
|
updateStyleCode()
|
|
}
|
|
|
|
// Function to remove borders
|
|
document
|
|
.getElementById("noBorder")
|
|
.parentNode.addEventListener("click", function (event) {
|
|
if (this.querySelector("input").checked) {
|
|
r.style.setProperty("--border-off", "0")
|
|
updateStyleCode()
|
|
} else {
|
|
r.style.setProperty("--border-off", null)
|
|
updateStyleCode()
|
|
}
|
|
})
|
|
|
|
// change dropin container width
|
|
function dropinWidth() {
|
|
let widthValue = document.getElementById("changeWidth").value
|
|
let widthpx = widthValue + "px"
|
|
r.style.setProperty("--dropin-width", widthpx)
|
|
console.log(widthpx)
|
|
updateStyleCode()
|
|
}
|
|
// change pay buttons' width
|
|
function payButtonWidth() {
|
|
let payWidthValue = document.getElementById("payButtonWidth").value
|
|
let payWidthpx = payWidthValue + "px"
|
|
r.style.setProperty("--payButton-width", payWidthpx)
|
|
updateStyleCode()
|
|
}
|
|
// change spacing of payment methods tabs
|
|
function paymentsSpacing() {
|
|
let paymentSpacingValue = document.getElementById("paymentsSpacing").value
|
|
let paymentSpacingpx = paymentSpacingValue + "px"
|
|
r.style.setProperty("--payments-spacing", paymentSpacingpx)
|
|
r.style.setProperty("--paymentselected-margin", paymentSpacingpx)
|
|
updateStyleCode()
|
|
}
|
|
// change font size
|
|
function fontWidth() {
|
|
let fontValue = document.getElementById("fontSize").value
|
|
let fontpx = fontValue + "px"
|
|
r.style.setProperty("--dropin-font", fontpx)
|
|
updateStyleCode()
|
|
}
|
|
|
|
|
|
// make text italic
|
|
function makeItalic() {
|
|
if (
|
|
document.getElementById("makeItalic").classList.contains("italic-active")
|
|
) {
|
|
document.getElementById("makeItalic").classList.remove("italic-active")
|
|
r.style.setProperty("--text-italic", null)
|
|
r.style.setProperty("--italic-selected", null)
|
|
updateStyleCode()
|
|
} else {
|
|
document.getElementById("makeItalic").classList.add("italic-active")
|
|
r.style.setProperty("--text-italic", "italic")
|
|
r.style.setProperty("--italic-selected", "1px solid #36bf52")
|
|
updateStyleCode()
|
|
}
|
|
}
|
|
|
|
|
|
// make text bold
|
|
function makeBold() {
|
|
if (
|
|
document.getElementById("makeBold").classList.contains("bold-active")
|
|
) {
|
|
document.getElementById("makeBold").classList.remove("bold-active")
|
|
r.style.setProperty("--text-bold", null)
|
|
r.style.setProperty("--bold-selected", null)
|
|
updateStyleCode()
|
|
} else {
|
|
document.getElementById("makeBold").classList.add("bold-active")
|
|
r.style.setProperty("--text-bold", "bold")
|
|
r.style.setProperty("--bold-selected", "1px solid #36bf52")
|
|
updateStyleCode()
|
|
}
|
|
}
|
|
|
|
//drop down selector for the different font styles
|
|
function changeFont() {
|
|
r.style.setProperty("--font-options", null)
|
|
let fontValue = document.getElementById("font_select").value
|
|
r.style.setProperty("--font-options", fontValue)
|
|
updateStyleCode()
|
|
}
|
|
|
|
|
|
// Reset CSS values to default Drop-in
|
|
function resetDynamicCSS() {
|
|
r.style.setProperty("--background-color", '#00112c')
|
|
r.style.setProperty("--dropin-width", null)
|
|
r.style.setProperty("--body-edges", null)
|
|
r.style.setProperty("--selectedBody-edges", null)
|
|
r.style.setProperty("--topedges-left", null)
|
|
r.style.setProperty("--topedges-right", null)
|
|
r.style.setProperty("--bottomedges-left", null)
|
|
r.style.setProperty("--bottomedges-right", null)
|
|
r.style.setProperty("--button-edges", null)
|
|
r.style.setProperty("--bg-color", '#ffffff')
|
|
r.style.setProperty("--dropin-color", '#f7f8f9')
|
|
r.style.setProperty("--dropin-tab-color", '#ffffff')
|
|
r.style.setProperty("--dropin-font", null)
|
|
r.style.setProperty("--text-color", '#00112c')
|
|
r.style.setProperty("--text-bold", null)
|
|
r.style.setProperty("--text-italic", null)
|
|
r.style.setProperty("--text-align", null)
|
|
r.style.setProperty("--payButton-width", null)
|
|
r.style.setProperty("--payments-spacing", null)
|
|
r.style.setProperty("--paymentselected-margin", null)
|
|
r.style.setProperty("--font-options", null)
|
|
updateColorPickers()
|
|
}
|
|
|
|
// logging configuration object to UI
|
|
function logConfig(cloneConfig) {
|
|
console.log(cloneConfig)
|
|
// let filteredConfig = loggedConfig
|
|
|
|
delete cloneConfig.paymentMethodsResponse
|
|
cloneConfig.clientKey = "***"
|
|
cloneConfig.paymentMethodsConfiguration.paypal.merchantId = "***"
|
|
|
|
let finalConfig = { configuration: cloneConfig }
|
|
let stringConfig = JSON.stringify(finalConfig, null, 2)
|
|
|
|
console.log(stringConfig)
|
|
|
|
document.getElementById("configCode").innerHTML =
|
|
syntaxHighlight(stringConfig)
|
|
}
|
|
|
|
//JSON highlight code styling
|
|
function syntaxHighlight(json) {
|
|
json = json.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">")
|
|
return json.replace(
|
|
/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
|
|
function (match) {
|
|
var cls = "number"
|
|
if (/^"/.test(match)) {
|
|
if (/:$/.test(match)) {
|
|
cls = "key"
|
|
} else {
|
|
cls = "string"
|
|
}
|
|
} else if (/true|false/.test(match)) {
|
|
cls = "boolean"
|
|
} else if (/null/.test(match)) {
|
|
cls = "null"
|
|
}
|
|
return '<span class="' + cls + '">' + match + "</span>"
|
|
}
|
|
)
|
|
}
|
|
|
|
function updateStyleCode() {
|
|
let cssjson = {
|
|
".adyen-checkout__payment-method": {
|
|
width: getComputedStyle(r).getPropertyValue("--dropin-width"),
|
|
"font-size": getComputedStyle(r).getPropertyValue("--dropin-font"),
|
|
"font-family": getComputedStyle(r).getPropertyValue("--font-options"),
|
|
"text-align": getComputedStyle(r).getPropertyValue("--text-align"),
|
|
"border-radius": getComputedStyle(r).getPropertyValue("--body-edges"),
|
|
border: getComputedStyle(r).getPropertyValue("--border-off"),
|
|
background: getComputedStyle(r).getPropertyValue("--dropin-tab-color"),
|
|
"font-weight": getComputedStyle(r).getPropertyValue("--text-bold"),
|
|
margin: getComputedStyle(r).getPropertyValue("--payments-spacing"),
|
|
},
|
|
".adyen-checkout__button.adyen-checkout__button--pay": {
|
|
width: getComputedStyle(r).getPropertyValue("--payButton-width"),
|
|
background: getComputedStyle(r).getPropertyValue("--background-color"),
|
|
"border-radius": getComputedStyle(r).getPropertyValue("--button-edges"),
|
|
},
|
|
".adyen-checkout__payment-methods-list li:nth-child(2)": {
|
|
"border-top-left-radius":
|
|
getComputedStyle(r).getPropertyValue("--topedges-left"),
|
|
"border-top-right-radius":
|
|
getComputedStyle(r).getPropertyValue("--topedges-right"),
|
|
},
|
|
".adyen-checkout__payment-methods-list li:last-child": {
|
|
"border-bottom-left-radius":
|
|
getComputedStyle(r).getPropertyValue("--bottomedges-left"),
|
|
"border-bottom-right-radius": getComputedStyle(r).getPropertyValue(
|
|
"--bottomedges-right"
|
|
),
|
|
},
|
|
".adyen-checkout__dropin": {
|
|
"text-align": getComputedStyle(r).getPropertyValue("--text-align"),
|
|
},
|
|
".adyen-checkout__payment-method--selected": {
|
|
background: getComputedStyle(r).getPropertyValue("--dropin-color"),
|
|
margin: getComputedStyle(r).getPropertyValue("--paymentselected-margin"),
|
|
"border-radius": getComputedStyle(r).getPropertyValue(
|
|
"--selectedBody-edges"
|
|
),
|
|
},
|
|
".adyen-checkout__payment-method__name": {
|
|
"font-weight": getComputedStyle(r).getPropertyValue("--text-bold"),
|
|
"font-style": getComputedStyle(r).getPropertyValue("--text-italic"),
|
|
color: getComputedStyle(r).getPropertyValue("--text-color"),
|
|
},
|
|
".adyen-checkout__label__text": {
|
|
"font-weight": getComputedStyle(r).getPropertyValue("--text-bold"),
|
|
"font-style": getComputedStyle(r).getPropertyValue("--text-italic"),
|
|
color: getComputedStyle(r).getPropertyValue("--text-color"),
|
|
},
|
|
".adyen-checkout__checkbox__label": {
|
|
"font-weight": getComputedStyle(r).getPropertyValue("--text-bold"),
|
|
"font-style": getComputedStyle(r).getPropertyValue("--text-italic"),
|
|
color: getComputedStyle(r).getPropertyValue("--text-color"),
|
|
},
|
|
".adyen-checkout__button__text": {
|
|
"font-weight": getComputedStyle(r).getPropertyValue("--text-bold"),
|
|
"font-style": getComputedStyle(r).getPropertyValue("--text-italic"),
|
|
color: getComputedStyle(r).getPropertyValue("--text-color"),
|
|
}
|
|
}
|
|
var styleStr = ""
|
|
for (var i in cssjson) {
|
|
styleStr += i + " {\n"
|
|
for (var j in cssjson[i]) {
|
|
styleStr += "\t" + j + ":" + cssjson[i][j] + ";\n"
|
|
}
|
|
styleStr += "}\n"
|
|
}
|
|
// let stringCSS = JSON.stringify(css, null, 2);
|
|
document.getElementById("cssCode").innerHTML = styleStr
|
|
}
|
|
updateStyleCode()
|
|
|
|
function restartDropin() {
|
|
const oldDiv = document.getElementById("dropin-container")
|
|
const newDiv = document.createElement("div")
|
|
oldDiv.replaceWith(newDiv)
|
|
newDiv.setAttribute("id", "dropin-container")
|
|
newDiv.setAttribute("class", "payment p-5")
|
|
initCheckout()
|
|
successDiv.style.display = "none"
|
|
}
|
|
|
|
updateColorPickers()
|
|
|
|
initCheckout()
|