mirror of
https://github.com/jlengrand/adyen-java-spark-online-payments.git
synced 2026-03-10 08:01:24 +00:00
Changed to new adyen-implementation.js file
Updated JS to 3.18.2
This commit is contained in:
Tyler Douglas
@@ -2,7 +2,7 @@
|
||||
|
||||
This repository includes examples of PCI-compliant UI integrations for online payments with Adyen. Within this demo app, we've created a simplified version of an e-commerce website, complete with commented code to highlight key features and concepts of Adyen's API. Check out the underlying code to see how you can integrate Adyen to give your shoppers the option to pay with their preferred payment methods, all in a seamless checkout experience.
|
||||
|
||||
|
||||
|
||||
|
||||
## Integrations
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Enter your information below
|
||||
# No quotation marks are required
|
||||
[DEFAULT]
|
||||
merchantAccount =
|
||||
apiKey =
|
||||
clientKey =
|
||||
merchantAccount = TylerDouglas
|
||||
apiKey = AQEyhmfxL4jIYhVBw0m/n3Q5qf3VaY9UCJ1+XWZe9W27jmlZiiSaWGoa4mOFeQne5hiuhQsQwV1bDb7kfNy1WIxIIkxgBw==-hJYG90gqLYPclLs6We+q8CUtAsa+KgXr/iWftd+rrCM=-89EKHpWfW8ABmGF3
|
||||
clientKey = test_Z7FVF2ENAVHA7BRHUK5JMPJ2M4SMJVAQ
|
||||
|
||||
@@ -134,36 +134,38 @@ public class Main {
|
||||
|
||||
switch (result) {
|
||||
case AUTHORISED:
|
||||
res.redirect("/success");
|
||||
res.redirect("/result/success");
|
||||
break;
|
||||
case RECEIVED: case PENDING:
|
||||
res.redirect("/pending");
|
||||
res.redirect("/result/pending");
|
||||
break;
|
||||
default:
|
||||
res.redirect("/failed");
|
||||
res.redirect("/result/failed");
|
||||
}
|
||||
return res;
|
||||
}
|
||||
});
|
||||
|
||||
get("/success", (req, res) -> {
|
||||
Map<String, Object> context = new HashMap<>();
|
||||
return RenderUtil.render(context, "templates/checkout-success.html");
|
||||
});
|
||||
path("/result", () -> {
|
||||
get("/success", (req, res) -> {
|
||||
Map<String, Object> context = new HashMap<>();
|
||||
return RenderUtil.render(context, "templates/checkout-success.html");
|
||||
});
|
||||
|
||||
get("/failed", (req, res) -> {
|
||||
Map<String, Object> context = new HashMap<>();
|
||||
return RenderUtil.render(context, "templates/checkout-failed.html");
|
||||
});
|
||||
get("/failed", (req, res) -> {
|
||||
Map<String, Object> context = new HashMap<>();
|
||||
return RenderUtil.render(context, "templates/checkout-failed.html");
|
||||
});
|
||||
|
||||
get("/pending", (req, res) -> {
|
||||
Map<String, Object> context = new HashMap<>();
|
||||
return RenderUtil.render(context, "templates/checkout-success.html");
|
||||
});
|
||||
get("/pending", (req, res) -> {
|
||||
Map<String, Object> context = new HashMap<>();
|
||||
return RenderUtil.render(context, "templates/checkout-success.html");
|
||||
});
|
||||
|
||||
get("/error", (req, res) -> {
|
||||
Map<String, Object> context = new HashMap<>();
|
||||
return RenderUtil.render(context, "templates/checkout-failed.html");
|
||||
get("/error", (req, res) -> {
|
||||
Map<String, Object> context = new HashMap<>();
|
||||
return RenderUtil.render(context, "templates/checkout-failed.html");
|
||||
});
|
||||
});
|
||||
|
||||
get("/favicon.ico", (req, res) -> {
|
||||
|
||||
@@ -22,15 +22,8 @@ public class PaymentMethods {
|
||||
PaymentMethodsRequest paymentMethodsRequest = new PaymentMethodsRequest();
|
||||
paymentMethodsRequest.setMerchantAccount(Main.merchantAccount);
|
||||
|
||||
Amount amount = new Amount();
|
||||
if (type.equals("dotpay")) {
|
||||
amount.setCurrency("PLN");
|
||||
} else {
|
||||
amount.setCurrency("EUR");
|
||||
}
|
||||
amount.setValue(1000L);
|
||||
paymentMethodsRequest.setAmount(amount);
|
||||
paymentMethodsRequest.setChannel(PaymentMethodsRequest.ChannelEnum.WEB);
|
||||
paymentMethodsRequest.setShopperReference("SparkJava Checkout Shopper");
|
||||
System.out.println("/paymentMethods context:\n" + paymentMethodsRequest.toString());
|
||||
|
||||
try {
|
||||
|
||||
413
src/main/resources/static/css/application.css
Normal file
413
src/main/resources/static/css/application.css
Normal file
@@ -0,0 +1,413 @@
|
||||
/* General page body */
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-family: "Fakt", sans-serif, Helvetica, Arial;
|
||||
}
|
||||
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a,
|
||||
u {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e6e9eb;
|
||||
height: 44px;
|
||||
left: 0;
|
||||
margin-bottom: 24px;
|
||||
padding: 14px 26px;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
.button {
|
||||
background: #00112c;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
transition: background 0.3s ease-out, box-shadow 0.3s ease-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #1c3045;
|
||||
box-shadow: 0 3px 4px rgba(0, 15, 45, 0.2);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background: #3a4a5c;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
background: #e6e9eb;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
-webkit-user-select: all;
|
||||
-moz-user-select: all;
|
||||
-ms-user-select: all;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
/* end General page body */
|
||||
|
||||
/* Index page */
|
||||
|
||||
.main-container {
|
||||
margin: auto;
|
||||
max-width: 1048px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.integration-list {
|
||||
display: flex;
|
||||
margin-top: 6%;
|
||||
max-width: 1048px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.integration-list {
|
||||
margin-left: -8px;
|
||||
margin-bottom: -8px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.integration-list {
|
||||
margin-left: -16px;
|
||||
margin-bottom: -16px;
|
||||
margin-right: -16px;
|
||||
}
|
||||
}
|
||||
|
||||
.integration-list-item {
|
||||
background: #f7f8f9;
|
||||
border-radius: 6px;
|
||||
flex: 1 1 0;
|
||||
margin: 4px;
|
||||
min-width: 40%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #f7f8f9;
|
||||
}
|
||||
|
||||
.integration-list-item:hover {
|
||||
box-shadow: 0 16px 24px 0 #e5eaef;
|
||||
text-decoration: none;
|
||||
border: 1px solid #06f;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.integration-list-item {
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 16px;
|
||||
margin-top: 16px;
|
||||
min-width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.integration-list-item-link {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.integration-list-item-link {
|
||||
padding-left: 28px;
|
||||
padding-bottom: 28px;
|
||||
padding-right: 28px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.integration-list-item-title {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #00112c;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.integration-list-item-title {
|
||||
font-size: 24px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 6px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.integration-list-item-subtitle {
|
||||
color: #00112c;
|
||||
font-size: 0.67em;
|
||||
font-weight: 700;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.integration-list-item-subtitle {
|
||||
font-size: 16px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 6px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 10%;
|
||||
color: #00112c;
|
||||
}
|
||||
|
||||
/* end Index page */
|
||||
|
||||
/* Cart preview page */
|
||||
|
||||
.shopping-cart {
|
||||
float: right;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.shopping-cart {
|
||||
padding-left: 0;
|
||||
padding-bottom: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 3px;
|
||||
}
|
||||
}
|
||||
.shopping-cart-link {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.order-summary-list {
|
||||
border-top: 1px solid #e6e9eb;
|
||||
}
|
||||
.order-summary-list-list-item {
|
||||
border-bottom: 1px solid #e6e9eb;
|
||||
display: flex;
|
||||
height: 97px;
|
||||
}
|
||||
.order-summary-list-list-item-image {
|
||||
height: 64px;
|
||||
margin: 16px;
|
||||
width: 64px;
|
||||
}
|
||||
.order-summary-list-list-item-title {
|
||||
font-weight: 700;
|
||||
margin: auto auto auto 0;
|
||||
}
|
||||
.order-summary-list-list-item-price {
|
||||
color: #687282;
|
||||
margin: auto 16px;
|
||||
text-align: right;
|
||||
width: 80px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.order-summary-list-list-item-price {
|
||||
margin-left: 24px;
|
||||
margin-bottom: auto;
|
||||
margin-right: 24px;
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
.order-summary-list-list-item-remove-product {
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
height: 25px;
|
||||
margin: auto 0;
|
||||
padding: 0;
|
||||
width: 25px;
|
||||
}
|
||||
.cart {
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
}
|
||||
.cart-footer {
|
||||
font-weight: 700;
|
||||
margin-top: 17px;
|
||||
text-align: right;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.cart-footer {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
.cart-footer .button {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.cart-footer .button {
|
||||
margin-top: 0;
|
||||
width: 288px;
|
||||
}
|
||||
}
|
||||
.cart-footer-amount {
|
||||
margin-left: 16px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
.whole-preview {
|
||||
margin: auto;
|
||||
max-width: 1110px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
@media (min-width: 1440px) {
|
||||
.whole-preview {
|
||||
padding-left: 0;
|
||||
padding-bottom: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* end of Cart preview page */
|
||||
|
||||
/* Payment page */
|
||||
|
||||
#payment-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#payment-page .container {
|
||||
margin-top: 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 1110px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.checkout-component {
|
||||
background: #f7f8f9;
|
||||
border: 1px solid #e6e9eb;
|
||||
border-radius: 12px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/* Adyen Components */
|
||||
.payment {
|
||||
width: 100%;
|
||||
padding-top: 0px !important;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1076px) {
|
||||
#payment-page .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.payment {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #f7f8f9;
|
||||
border: 1px solid #e6e9eb;
|
||||
border-radius: 12px;
|
||||
padding-top: 18px;
|
||||
padding-bottom: 18px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* end Payments page */
|
||||
|
||||
|
||||
/* Status page */
|
||||
|
||||
.status-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin: 100px 0 126px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status .status-image {
|
||||
display: block;
|
||||
height: 100px;
|
||||
margin: 16px auto 0;
|
||||
}
|
||||
|
||||
.status .status-image-thank-you {
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
.status .status-message {
|
||||
margin: 8px 0 24px;
|
||||
}
|
||||
|
||||
.status .button {
|
||||
max-width: 236px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.status .button {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* end Status page */
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9333 2H11.7333H9.06667V1C9.06667 0.4 8.64 0 8 0C7.36 0 6.93333 0.4 6.93333 1V2H4.26667H0.999998C0.359998 2 0 2.4 0 3C0 3.6 0.359998 4 0.999998 4H2V14C2 15.1 2.82667 16 4 16H12C13.3067 16 14 15.1 14 14V4H14.9333C15.5733 4 16 3.6 16 3C16 2.4 15.5733 2 14.9333 2ZM4 4H7V14H4V4ZM9 14H12V4H9V14Z" fill="#687282"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 465 B |
BIN
src/main/resources/static/img/cardcheckout.gif
Normal file
BIN
src/main/resources/static/img/cardcheckout.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
|
Before Width: | Height: | Size: 850 B After Width: | Height: | Size: 850 B |
4
src/main/resources/static/img/failed.svg
Normal file
4
src/main/resources/static/img/failed.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 44C2 20.9046 20.9046 2 44 2C67.0954 2 86 20.9046 86 44C86 67.0954 67.0954 86 44 86C20.9046 86 2 67.0954 2 44Z" stroke="#D10244" stroke-width="4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.5 41.0339L55.8744 28.7009C56.6554 27.9225 57.9218 27.9225 58.7028 28.7009C59.4839 29.4793 59.4839 30.7414 58.7028 31.5199L46.3284 43.8529L58.7028 56.1858C59.4838 56.9643 59.4838 58.2264 58.7028 59.0048C57.9218 59.7832 56.6554 59.7832 55.8744 59.0048L43.5 46.6718L31.1257 59.0048C30.3446 59.7832 29.0783 59.7832 28.2972 59.0048C27.5162 58.2264 27.5162 56.9643 28.2972 56.1858L40.6716 43.8529L28.2972 31.5199C27.5162 30.7414 27.5162 29.4793 28.2972 28.7009C29.0783 27.9225 30.3446 27.9225 31.1256 28.7009L43.5 41.0339Z" fill="#D10244"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 850 B |
BIN
src/main/resources/static/img/headphones.png
Normal file
BIN
src/main/resources/static/img/headphones.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 146 KiB |
24
src/main/resources/static/img/pending.svg
Normal file
24
src/main/resources/static/img/pending.svg
Normal file
@@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M67.7975,34.25 C68.3735,34.25 68.948375,34.469375 69.38825,34.90925 C70.266875,35.787875 70.266875,37.21325 69.38825,38.091875 L43.136375,64.342625 C42.917,64.562 42.629,64.67225 42.341,64.67225 C42.053,64.67225 41.765,64.562 41.545625,64.342625 L30.40925,53.20625 C29.5295,52.3265 29.5295,50.903375 30.40925,50.023625 C30.848,49.584875 31.424,49.364375 32,49.364375 C32.574875,49.364375 33.152,49.584875 33.59075,50.023625 L42.341,58.775 L66.20675,34.90925 C66.646625,34.469375 67.2215,34.25 67.7975,34.25" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="Layouts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Chanel---04---Checkout" transform="translate(-669.000000, -275.000000)">
|
||||
<g id="Group-5" transform="translate(524.000000, 100.000000)">
|
||||
<g id="Group-4" transform="translate(115.000000, 175.000000)">
|
||||
<g id="Icon" transform="translate(30.000000, 0.000000)">
|
||||
<path d="M50,4 C24.709139,4 4,24.709139 4,50 C4,75.290861 24.709139,96 50,96 C75.290861,96 96,75.290861 96,50 C96,24.709139 75.290861,4 50,4 Z M50,0 C77.5,0 100,22.5 100,50 C100,77.5 77.5,100 50,100 C22.5,100 0,77.5 0,50 C0,22.5 22.5,0 50,0 Z" id="Path" fill="#0ABF53" fill-rule="nonzero"></path>
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="Mask" fill="#0ABF53" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -1,4 +1,24 @@
|
||||
<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 44C2 20.9046 20.9046 2 44 2C67.0954 2 86 20.9046 86 44C86 67.0954 67.0954 86 44 86C20.9046 86 2 67.0954 2 44Z" stroke="#0ABF53" stroke-width="4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M59.6617 30.1399C60.1686 30.1399 60.6745 30.3329 61.0616 30.72C61.8348 31.4932 61.8348 32.7476 61.0616 33.5207L37.9599 56.6214C37.7669 56.8145 37.5135 56.9115 37.26 56.9115C37.0066 56.9115 36.7531 56.8145 36.5601 56.6214L26.7601 46.8214C25.9859 46.0472 25.9859 44.7949 26.7601 44.0207C27.1462 43.6346 27.6531 43.4405 28.1599 43.4405C28.6658 43.4405 29.1737 43.6346 29.5598 44.0207L37.26 51.7219L58.2619 30.72C58.649 30.3329 59.1549 30.1399 59.6617 30.1399Z" fill="#0ABF53"/>
|
||||
</svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M67.7975,34.25 C68.3735,34.25 68.948375,34.469375 69.38825,34.90925 C70.266875,35.787875 70.266875,37.21325 69.38825,38.091875 L43.136375,64.342625 C42.917,64.562 42.629,64.67225 42.341,64.67225 C42.053,64.67225 41.765,64.562 41.545625,64.342625 L30.40925,53.20625 C29.5295,52.3265 29.5295,50.903375 30.40925,50.023625 C30.848,49.584875 31.424,49.364375 32,49.364375 C32.574875,49.364375 33.152,49.584875 33.59075,50.023625 L42.341,58.775 L66.20675,34.90925 C66.646625,34.469375 67.2215,34.25 67.7975,34.25" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="Layouts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Chanel---04---Checkout" transform="translate(-669.000000, -275.000000)">
|
||||
<g id="Group-5" transform="translate(524.000000, 100.000000)">
|
||||
<g id="Group-4" transform="translate(115.000000, 175.000000)">
|
||||
<g id="Icon" transform="translate(30.000000, 0.000000)">
|
||||
<path d="M50,4 C24.709139,4 4,24.709139 4,50 C4,75.290861 24.709139,96 50,96 C75.290861,96 96,75.290861 96,50 C96,24.709139 75.290861,4 50,4 Z M50,0 C77.5,0 100,22.5 100,50 C100,77.5 77.5,100 50,100 C22.5,100 0,77.5 0,50 C0,22.5 22.5,0 50,0 Z" id="Path" fill="#0ABF53" fill-rule="nonzero"></path>
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="Mask" fill="#0ABF53" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 786 B After Width: | Height: | Size: 1.9 KiB |
BIN
src/main/resources/static/img/sunglasses.png
Normal file
BIN
src/main/resources/static/img/sunglasses.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 110 KiB |
137
src/main/resources/static/js/adyen-implementation.js
Normal file
137
src/main/resources/static/js/adyen-implementation.js
Normal file
@@ -0,0 +1,137 @@
|
||||
const clientKey = document.getElementById('client-key').innerHTML;
|
||||
const type = document.getElementById('integration-type').innerHTML;
|
||||
|
||||
async function initCheckout() {
|
||||
try {
|
||||
const paymentMethodsResponse = JSON.parse(document.getElementById('payment-methods').innerHTML);
|
||||
const configuration = {
|
||||
paymentMethodsResponse: filterUnimplemented(paymentMethodsResponse),
|
||||
clientKey,
|
||||
locale: "en_US",
|
||||
environment: "test",
|
||||
showPayButton: true,
|
||||
paymentMethodsConfiguration: {
|
||||
ideal: {
|
||||
showImage: true,
|
||||
},
|
||||
card: {
|
||||
hasHolderName: true,
|
||||
holderNameRequired: true,
|
||||
name: "Credit or debit card",
|
||||
amount: {
|
||||
value: 1000,
|
||||
currency: "EUR",
|
||||
},
|
||||
},
|
||||
paypal: {
|
||||
amount: {
|
||||
currency: "USD",
|
||||
value: 1000
|
||||
},
|
||||
environment: "test", // Change this to "live" when you're ready to accept live PayPal payments
|
||||
countryCode: "US", // Only needed for test. This will be automatically retrieved when you are in production.
|
||||
intent: "authorize", // Change this to "authorize" if the payments should not be captured immediately. Contact Support to enable this flow.
|
||||
}
|
||||
},
|
||||
onSubmit: (state, component) => {
|
||||
console.log(state);
|
||||
|
||||
if (state.isValid) {
|
||||
handleSubmission(state, component, "/api/initiatePayment");
|
||||
}
|
||||
},
|
||||
onAdditionalDetails: (state, component) => {
|
||||
handleSubmission(state, component, "/api/submitAdditionalDetails");
|
||||
},
|
||||
};
|
||||
|
||||
const checkout = new AdyenCheckout(configuration);
|
||||
checkout.create(type).mount("#component");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Error occurred. Look at console for details");
|
||||
}
|
||||
}
|
||||
|
||||
function filterUnimplemented(pm) {
|
||||
pm.paymentMethods = pm.paymentMethods.filter((it) =>
|
||||
[
|
||||
"scheme",
|
||||
"ideal",
|
||||
"dotpay",
|
||||
"giropay",
|
||||
"sepadirectdebit",
|
||||
"directEbanking",
|
||||
"ach",
|
||||
"alipay",
|
||||
"klarna_paynow",
|
||||
"klarna",
|
||||
"klarna_account",
|
||||
"paypal",
|
||||
"boletobancario_santander",
|
||||
].includes(it.type)
|
||||
);
|
||||
return pm;
|
||||
}
|
||||
|
||||
// Event handlers called when the shopper selects the pay button,
|
||||
// or when additional information is required to complete the payment
|
||||
async function handleSubmission(state, component, url) {
|
||||
try {
|
||||
const res = await callServer(url, state.data);
|
||||
handleServerResponse(res, component);
|
||||
} 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();
|
||||
}
|
||||
|
||||
// Handles responses sent from your server to the client
|
||||
function handleServerResponse(res, component) {
|
||||
if (res.action) {
|
||||
component.handleAction(res.action);
|
||||
} else {
|
||||
switch (res.resultCode) {
|
||||
case "Authorised":
|
||||
window.location.href = "/result/success";
|
||||
break;
|
||||
case "Pending":
|
||||
case "Received":
|
||||
window.location.href = "/result/pending";
|
||||
break;
|
||||
case "Refused":
|
||||
window.location.href = "/result/failed";
|
||||
break;
|
||||
default:
|
||||
window.location.href = "/result/error";
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust style for Specific Components
|
||||
if (type === 'dropin') {
|
||||
document.getElementById('component').style.padding = '0em';
|
||||
let container = document.getElementsByClassName('checkout-component')[0];
|
||||
container.style.border = 'none';
|
||||
container.style.padding = '0';
|
||||
} else if (type === 'paypal') {
|
||||
let el = document.querySelector('.payment');
|
||||
el.style.display = 'flex';
|
||||
el.style.justifyContent = 'center';
|
||||
}
|
||||
|
||||
initCheckout();
|
||||
@@ -8,14 +8,14 @@
|
||||
<div class="order-summary">
|
||||
<ul class="order-summary-list">
|
||||
<li class="order-summary-list-list-item">
|
||||
<img src="/img/sunglasses.svg"
|
||||
class="order-summary__list__list-item__image"/>
|
||||
<img src="/img/sunglasses.png"
|
||||
class="order-summary-list-list-item-image"/>
|
||||
<p class="order-summary-list-list-item-title">Sunglasses</p>
|
||||
<p class="order-summary-list-list-item-price">€5.00</p>
|
||||
</li>
|
||||
<li class="order-summary-list-list-item">
|
||||
<img src="/img/headphones.svg"
|
||||
class="order-summary__list__list-item__image"/>
|
||||
<img src="/img/headphones.png"
|
||||
class="order-summary-list-list-item-image"/>
|
||||
<p class="order-summary-list-list-item-title">Headphones</p>
|
||||
<p class="order-summary-list-list-item-price">€5.00</p>
|
||||
</li>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
<div class="status-container">
|
||||
<div class="status">
|
||||
<img src="/img/failure.svg" class="status-image"/>
|
||||
<img src="/img/failed.svg" class="status-image"/>
|
||||
<p class="status-message">Your order has failed. Please try again.</p>
|
||||
<a class="button" href="/">Try Again</a>
|
||||
</div>
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet"
|
||||
href="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.17.0/adyen.css"
|
||||
integrity="sha384-gbQyzqV1xX+snFEMrubEm0IpmYSufBjUnHzTaJZ+dcWCyxl0j94IZhnfC2gbxgeu"
|
||||
crossorigin="anonymous">
|
||||
href="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.18.2/adyen.css"
|
||||
integrity="sha384-5K4T5NNVv7ZBvNypROEUSjvOL45HszUg/eYfYadY82UF4b+hc+TPQ4SsfTGXufJp"
|
||||
crossorigin="anonymous">
|
||||
|
||||
<div id="payment-page">
|
||||
<div class="container">
|
||||
@@ -21,13 +21,13 @@
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.17.0/adyen.js"
|
||||
integrity="sha384-G9jkTAyCOIVdksXbtrNgdur2DyRi85ujYLXbqe5AvvH23rN21d7xiU7cRIqvsEaH"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.18.2/adyen.js"
|
||||
integrity="sha384-/5SuEQKK7mLmDWB+eUPAur02KPkNC7pwAqyPez1TuNjeqRjsNDJdAnrbSxrzua2P"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script id="payment-methods" type="application/json">{{ paymentMethods }}</script>
|
||||
<script id="client-key" type="application/json">{{ clientKey }}</script>
|
||||
<script id="integration-type" type="application/json">{{ integrationType }}</script>
|
||||
|
||||
<script src="/js/adyen_implementations.js"></script>
|
||||
<script src="/js/adyen-implementation.js"></script>
|
||||
{% endblock %}
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
||||
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<link rel="stylesheet" type="text/css" href="/css/main.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/application.css">
|
||||
|
||||
<title>Checkout Demo</title>
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user