jlengrand/checkoutCreate
1
0
Fork 0
mirror of https://github.com/jlengrand/checkoutCreate.git synced 2026-03-10 08:11:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

payment methods blocked via API

Browse Source 
Paypal and Ideal as a start
This commit is contained in:
anamotaadyen
2022-10-19 14:50:00 +01:00
parent f4f6c22c13
commit 9cb4c2fb0b
5 changed files with 108 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/app.py
View File

@@ -29,10 +29,9 @@ def create_app():
@app.route('/api/getPaymentMethods', methods=['GET', 'POST'])
def get_payment_methods():
request_data = request.get_json()
print (request_data)
print ("request_data:\n" + str(request_data))
locale_data = request_data
payMethodsFE = request.get_json()
return adyen_payment_methods(payMethodsFE, locale_data)
return adyen_payment_methods(locale_data)
@app.route('/api/initiatePayment', methods=['POST'])

4
app/main/paymentMethods.py
View File

@@ -10,7 +10,7 @@ Should have a payment state on your server from which you can fetch information
'''
def adyen_payment_methods(locale_data, payMethodsFE):
def adyen_payment_methods(locale_data):
adyen = Adyen.Adyen()
adyen.payment.client.xapikey = get_adyen_api_key()
adyen.payment.client.platform = "test" # change to live for production
@@ -23,7 +23,7 @@ def adyen_payment_methods(locale_data, payMethodsFE):
payment_methods_request['shopperReference'] = "UniqueReference"
payment_methods_request['channel'] = "Web"
payment_methods_request['merchantAccount'] = "CheckoutCreateDemo"
payment_methods_request['blockedPaymentMethods'] = []
payment_methods_request['blockedPaymentMethods'] = locale_data['blockedPaymentMethods']

5
app/main/payments.py
View File

@@ -29,6 +29,8 @@ def adyen_payments(frontend_request, locale_data):
payments_request['countryCode'] = locale_data['countryCode']
payments_request['merchantAccount'] = "CheckoutCreateDemo"
payments_request['recurringExpiry'] = "2022-08-01T23:59:59+02:00"
payments_request['0'] = []
payments_request['1'] = []
# payments_request['paymentMethod'] = {"subtype": "redirect"}
@@ -141,6 +143,9 @@ def sanatizeRequest(payments_request):
del payments_request['houseNumberOrName']
del payments_request['postalCode']
del payments_request['street']
del payments_request['0']
del payments_request['1']
# loaded = json.loads(payments_request)

129
app/static/js/adyen-implementation.js
View File

@@ -1,5 +1,6 @@
const clientKey = JSON.parse(document.getElementById("client-key").innerHTML)
const storedCountry = document.getElementById("country-code")
const currentPM = document.getElementById("pay-methods")
// let country = "GB";
let countrySettings = "NL"
@@ -8,6 +9,9 @@ const urlCountryParams = new URLSearchParams(window.location.search)
const countryURL = urlCountryParams.get("country")
console.log(countryURL)
let payMethods =[];
let payArray = Object.values(payMethods);
// global configuration variables
let openFirst = true
let billAdd = false
@@ -63,6 +67,20 @@ const testCardBrandsMap = {
},
}
// Get old Drop-in
function getOldDiv() {
const oldDiv = document.getElementById("dropin-container")
const newDiv = document.createElement("div")
}
// Create new Drop-in and replace for the old one
function replaceDiv() {
oldDiv.replaceWith(newDiv);
newDiv.setAttribute("id", "dropin-container");
newDiv.setAttribute("class", "payment p-5");
initCheckout();
}
// Country dropdown changes the flag image and reloads the dropin with new country values
function changeSelect(el) {
@@ -350,16 +368,22 @@ function getCountryData(countrySettings) {
)
}
let blockedPM = {"blockedPaymentMethods": payArray};
async function initCheckout() {
try {
const mergeData = {
...countrySettings,
...blockedPM
}
const paymentMethodsResponse = await callServer(
"/api/getPaymentMethods",
countrySettings
mergeData
)
console.log(countrySettings)
console.log(mergeData)
// console.log(payArray)
let prettyResponse = JSON.stringify(paymentMethodsResponse, null, 2)
console.log(prettyResponse)
console.log(openFirst)
let configuration = {
paymentMethodsResponse: paymentMethodsResponse,
clientKey,
@@ -410,7 +434,8 @@ async function initCheckout() {
state,
dropin,
"/api/initiatePayment",
countrySettings
countrySettings,
payArray
)
}
},
@@ -455,6 +480,18 @@ async function initCheckout() {
}
}
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")
}
}
// logging configuration object to UI
function logConfig(cloneConfig) {
console.log(cloneConfig)
@@ -496,12 +533,13 @@ function logConfig(cloneConfig) {
// Event handlers called when the shopper selects the pay button,
// or when additional information is required to complete the payment
async function handleSubmission(state, dropin, url, countrySettings) {
async function handleSubmission(state, dropin, url, countrySettings, payArray) {
try {
//keeping the country data for the /payments call
const mergedData = {
...state.data,
...countrySettings,
...payArray
}
const res = await callServer(url, mergedData)
let prettyResponse = JSON.stringify(res, null, 2)
@@ -724,6 +762,7 @@ function resetCard() {
document.getElementById("card").classList.remove("card-visited")
}
}
// updateCardCopy()
// this updates the button attribute copy text to reflect the current card on UI
function updateCardCopy() {
@@ -789,6 +828,7 @@ function changeFont() {
updateStyleCode()
}
// document.getElementById('placeholderData').parentNode.addEventListener('click', function (event) {
//hiding payment methods functions
// function showPaypal() {
// const paypalState = document.getElementById('showPaypal').checked;
@@ -799,45 +839,68 @@ function changeFont() {
// paypalBox.style.display = "none"
// }
// }
// const filteredPM =[]
// let updatedPM =[]
let payMethods =[
"paypal"
]
// attempt to add txvariant to blockPaymentMethods array on button click
// Add txvariants to blockPaymentMethods array on button click
// -------PayPal---------
function blockPaypal() {
const paypalState = document.getElementById('showPaypal').checked;
// const paypalBox = document.querySelector('.adyen-checkout__payment-method--paypal')
if (paypalState == true) {
payMethods.splice("paypal");
const oldDiv = document.getElementById("dropin-container")
const newDiv = document.createElement("div")
const filteredPM = payMethods.filter((s) => !s.match("paypal"));
payMethods = filteredPM;
payArray = Object.values(payMethods);
blockedPM = {"blockedPaymentMethods": payArray};
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout()
} else {
const oldDiv = document.getElementById("dropin-container")
const newDiv = document.createElement("div")
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() {
const idealState = document.getElementById('showIdeal').checked;
if (idealState == true) {
const oldDiv = document.getElementById("dropin-container")
const newDiv = document.createElement("div")
const filteredPM = payMethods.filter((s) => !s.match("ideal"));
payMethods = filteredPM;
payArray = Object.values(payMethods);
blockedPM = {"blockedPaymentMethods": payArray};
oldDiv.replaceWith(newDiv)
newDiv.setAttribute("id", "dropin-container")
newDiv.setAttribute("class", "payment p-5")
initCheckout();
} else {
const oldDiv = document.getElementById("dropin-container")
const newDiv = document.createElement("div")
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()
}
}
// interim solution to hide payment methods - USE ONLY AT THE END - breaks on dropin reload
function showPaypal() {
const paypalState = document.getElementById("showPaypal").checked
const paypalBox = document.querySelector(
".adyen-checkout__payment-method--paypal"
)
if (paypalState == true) {
paypalBox.style.display = ""
} else {
paypalBox.style.display = "none"
}
}
function showIdeal() {
const idealState = document.getElementById("showIdeal").checked
const idealBox = document.querySelector(
".adyen-checkout__payment-method--ideal"
)
if (idealState == true) {
idealBox.style.display = ""
} else {
idealBox.style.display = "none"
}
}
function showKlarna() {
const klarnaState = document.getElementById("showKlarna").checked

6
app/templates/component.html
View File

@@ -349,7 +349,7 @@
class="custom-control-input"
id="showPaypal"
data-toggle="toggle"
onchange="showPaypal()"
onchange="blockPaypal()"
checked
/>
<label
@@ -372,7 +372,7 @@
class="custom-control-input"
id="showIdeal"
data-toggle="toggle"
onchange="showIdeal()"
onchange="blockIdeal()"
checked
/>
<label
@@ -1255,7 +1255,7 @@
{{ countryCode|default("NL")|tojson }}
</script>
<script id="pay-methods" type="application/json">
{{ payMethodsFE|default("")|tojson}}
{{ payArray|default("")|tojson}}
</script>
<!-- local JS -->