Skip to content

Commit

Permalink
Merge pull request #1669 from Adyen/fix/giftcard-custom-checkout-button
Browse files Browse the repository at this point in the history 
Adds new callback and method to fix giftcard without submit button
  • Loading branch information
@m1aw
m1aw authored Aug 8, 2022
2 parents 8e7dc1f + 747f1d1 commit e6cb6de
Show file tree
Hide file tree
Showing 8 changed files with 258 additions and 128 deletions.
3 changes: 3 additions & 0 deletions packages/e2e/app/src/pages/GiftCardsSessions/GiftCardsSessions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ const initCheckout = async () => {
brand: 'valuelink',
onOrderCreated: (data) => {
window.onOrderCreatedTestData = data;
},
onRequiringConfirmation: () => {
window.onRequiringConfirmationTestData = true;
}
})
.mount('.card-field');
Expand Down
3 changes: 2 additions & 1 deletion packages/e2e/tests/giftcards/onOrderCreated/onOrderCreated.mocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,8 @@ const noCallbackPaymentResponse = {
const loggers = {
setupLogger: RequestLogger({ url: setupUrl, method: 'post' }, { logRequestBody: true }),
balanceLogger: RequestLogger({ url: balanceUrl, method: 'post' }, { logRequestBody: true }),
ordersLogger: RequestLogger({ url: ordersUrl, method: 'post' }, { logRequestBody: true })
ordersLogger: RequestLogger({ url: ordersUrl, method: 'post' }, { logRequestBody: true }),
paymentLogger: RequestLogger({ url: paymentsUrl, method: 'post' }, { logRequestBody: true })
};

const mock = RequestMock()
Expand Down
13 changes: 13 additions & 0 deletions ...ages/e2e/tests/giftcards/onRequiringConfirmation/onRequiringConfirmation.clientScripts.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
window.mainConfiguration = {
allowPaymentMethods: ['giftcard'],
paymentMethodsConfiguration: {
giftcard: {
brandsConfiguration: {
genericgiftcard: {
icon: 'https://checkoutshopper-test.adyen.com/checkoutshopper/images/logos/mc.svg',
name: 'Gifty mcGiftface'
}
}
}
}
};
28 changes: 28 additions & 0 deletions packages/e2e/tests/giftcards/onRequiringConfirmation/onRequiringConfirmation.mocks.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { RequestMock, RequestLogger } from 'testcafe';
import { BASE_URL } from '../../pages';

import { mock, loggers } from '../onOrderCreated/onOrderCreated.mocks';

const path = require('path');
require('dotenv').config({ path: path.resolve('../../', '.env') });

const MOCK_SESSION_ID = 'CS616D08FC28573F9C';
const MOCK_SESSION_DATA = 'Ab02b4c0!BQABAgChW9EQ6U';

const balanceUrl = `https://checkoutshopper-test.adyen.com/checkoutshopper/v1/sessions/${MOCK_SESSION_ID}/paymentMethodBalance?clientKey=${process.env.CLIENT_KEY}`;

const balanceResponse = {
balance: {
currency: 'USD',
value: 1000000
},
sessionData: MOCK_SESSION_DATA
};

const balanceMock = RequestMock()
.onRequestTo(request => request.url === balanceUrl && request.method === 'post')
.respond(balanceResponse, 200, {
'Access-Control-Allow-Origin': BASE_URL
});

export { mock, balanceMock, loggers, MOCK_SESSION_DATA };
47 changes: 47 additions & 0 deletions packages/e2e/tests/giftcards/onRequiringConfirmation/onRequiringConfirmation.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { ClientFunction } from 'testcafe';

import { fillIFrame, getInputSelector } from '../../utils/commonUtils';
import { GIFTCARD_NUMBER, GIFTCARD_PIN } from '../utils/constants';
import { GIFTCARDS_SESSIONS_URL } from '../../pages';
import {mock, loggers, MOCK_SESSION_DATA, balanceMock} from './onRequiringConfirmation.mocks';

import { GiftCardSessionPage } from '../../_models/GiftCardComponent.page';

const giftCard = new GiftCardSessionPage();
const { balanceLogger, ordersLogger, paymentLogger } = loggers;

const getCallBackData = ClientFunction(() => window.onRequiringConfirmationTestData);

// only setup the loggers for the endpoints so we can setup different responses for different scenarios
fixture`Testing gift cards`.page(GIFTCARDS_SESSIONS_URL).requestHooks([balanceLogger, ordersLogger, paymentLogger]);

// set up request hooks for different scenarios
test.requestHooks([balanceMock, mock])('Test if onRequiringConfirmation is retrieved on success', async t => {

await giftCard.pmHolder();
await giftCard.cardUtils.fillCardNumber(t, GIFTCARD_NUMBER);
await fillIFrame(t, giftCard.iframeSelector, 1, getInputSelector('encryptedSecurityCode'), GIFTCARD_PIN);

// first step, request confirmation (.balanceCheck())
await t
.click(giftCard.payButton)
.expect(balanceLogger.count(() => true))
.eql(1)
.expect(
balanceLogger.contains(record => {
const { sessionData } = JSON.parse(record.request.body);
return sessionData === MOCK_SESSION_DATA;
})
)
.ok()
.expect(ordersLogger.count(() => true))
.eql(0)
.expect(getCallBackData())
.ok();

// second step, make payment (.submit())
await t
.click(giftCard.payButton)
.expect(paymentLogger.count(() => true))
.eql(1)
});
10 changes: 10 additions & 0 deletions packages/lib/src/components/Giftcard/Giftcard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,11 @@ export class GiftcardElement extends UIElement {
}
};

public balanceCheck() {
return this.onBalanceCheck();
}


public onBalanceCheck = () => {
// skip balance check if no onBalanceCheck event has been defined
const hasBalanceCheck = this.props.session || this.props.onBalanceCheck;
Expand Down Expand Up @@ -111,6 +116,11 @@ export class GiftcardElement extends UIElement {
this.submit();
});
}
else {
if (this.props.onRequiringConfirmation) {
this.props.onRequiringConfirmation();
}
}
})
.catch(error => {
this.setStatus(error?.message || 'error');
Expand Down
245 changes: 125 additions & 120 deletions packages/playground/src/pages/GiftCards/GiftCards.html
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,136 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Adyen Web | Gift Cards</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>Adyen Web | Gift Cards</title>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
</head>

<body class="giftcard-demo">
<header></header>
<main>
<div class="merchant-checkout__form">
<div class="merchant-checkout__payment-method">
<div class="merchant-checkout__payment-method__header">
<h2>Giftcard</h2>
</div>
<div class="merchant-checkout__payment-method__details">
<div id="genericgiftcard-container"></div>
</div>
</div>
<body class="giftcard-demo">
<header></header>
<main>
<div class="merchant-checkout__form">
<div class="merchant-checkout__payment-method">
<div class="merchant-checkout__payment-method__header">
<h2>Giftcard</h2>
</div>
<div class="merchant-checkout__payment-method__details">
<div id="genericgiftcard-container"></div>
</div>
</div>
</div>

<div class="merchant-checkout__form">
<div class="merchant-checkout__payment-method">
<div class="merchant-checkout__payment-method__header">
<h2>Mealvoucher</h2>
</div>
<div class="merchant-checkout__payment-method__details">
<div id="mealvoucher-fr-container"></div>
</div>
</div>
<div class="merchant-checkout__form">
<div class="merchant-checkout__payment-method">
<div class="merchant-checkout__payment-method__header">
<h2>Mealvoucher</h2>
</div>
<div class="merchant-checkout__payment-method__details">
<div id="mealvoucher-fr-container"></div>
</div>
</div>
</div>

<div class="merchant-checkout__form">
<div class="merchant-checkout__payment-method">
<div class="merchant-checkout__payment-method__header">
<h2>Gift Card Component (w/ Sessions)</h2>
</div>
<div class="merchant-checkout__payment-method__details">
<div id="giftcard-session-container"></div>
</div>
<div class="merchant-checkout__payment-method__details">
<div id="payment-method-container"></div>
</div>
</div>
<div class="merchant-checkout__form">
<div class="merchant-checkout__payment-method">
<div class="merchant-checkout__payment-method__header">
<h2>Gift Card Component (w/ Sessions)</h2>
</div>
<div class="merchant-checkout__payment-method__details">
<div id="giftcard-session-container"></div>
</div>
<div class="merchant-checkout__payment-method__details">
<div id="payment-method-container"></div>
</div>
<div class="merchant-checkout__payment-method__details">
<button class="adyen-checkout__button adyen-checkout__button--pay" id="custom-checkout-button">Custom
Checkout Button
</button>
</div>
</div>
</div>

<div class="info">
<table>
<caption>
Test gift cards
</caption>
<thead>
<tr>
<th scope="col">Card Type</th>
<th scope="col">Card Number</th>
<th scope="col">PIN</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gall & Gall Card</td>
<td>60643650100000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Baby Gift Card</td>
<td>60643622000000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Gift Card</td>
<td>62805011000000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Kado Wereld</td>
<td>60643625100000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Entertainment Card</td>
<td>60643611000000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Plastix</td>
<td>4010100000000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Webshop Giftcard</td>
<td>60643620700000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Leasure Giftcard</td>
<td>60643622800000000000</td>
<td>73737</td>
</tr>
<tr>
<td>VVV Giftcard</td>
<td>6064364240000000000</td>
<td>737373</td>
</tr>
<tr>
<td>GiftForYou (Bloemen)</td>
<td>60643647103300000000</td>
<td>737373</td>
</tr>
</tbody>
</table>
<div class="info">
<table>
<caption>
Test gift cards
</caption>
<thead>
<tr>
<th scope="col">Card Type</th>
<th scope="col">Card Number</th>
<th scope="col">PIN</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gall & Gall Card</td>
<td>60643650100000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Baby Gift Card</td>
<td>60643622000000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Gift Card</td>
<td>62805011000000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Kado Wereld</td>
<td>60643625100000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Entertainment Card</td>
<td>60643611000000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Plastix</td>
<td>4010100000000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Webshop Giftcard</td>
<td>60643620700000000000</td>
<td>73737</td>
</tr>
<tr>
<td>Leasure Giftcard</td>
<td>60643622800000000000</td>
<td>73737</td>
</tr>
<tr>
<td>VVV Giftcard</td>
<td>6064364240000000000</td>
<td>737373</td>
</tr>
<tr>
<td>GiftForYou (Bloemen)</td>
<td>60643647103300000000</td>
<td>737373</td>
</tr>
</tbody>
</table>

<p>
<a
href="https://docs.adyen.com/development-resources/test-cards/test-card-numbers#gift-cards"
target="_blank"
rel="noopener noreferrer"
>
More information →
</a>
</p>
</div>
</main>
<script type="text/javascript">
window.htmlPages = <%= JSON.stringify(htmlWebpackPlugin.htmlPages) || '' %>;
</script>
</body>
<p>
<a
href="https://docs.adyen.com/development-resources/test-cards/test-card-numbers#gift-cards"
target="_blank"
rel="noopener noreferrer"
>
More information →
</a>
</p>
</div>
</main>
<script type="text/javascript">
window.htmlPages = <%= JSON.stringify(htmlWebpackPlugin.htmlPages) || '' % >;
</script>
</body>
</html>
Loading

0 comments on commit e6cb6de

Please sign in to comment.