Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dummy test #8

Open
wants to merge 29 commits into
base: PCPAY-2168
Choose a base branch
from
+614 −294
Open

dummy test #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
d02ce39
Merge pull request #3 from optile/PCPAY-2168
AnwerAR Jul 16, 2024
dad9fff
Merge pull request #4 from optile/PCPAY-2168
AnwerAR Jul 16, 2024
9b6f8bb
Merge pull request #5 from optile/PCPAY-2168
AnwerAR Jul 16, 2024
00cc3ea
Merge pull request #6 from optile/PCPAY-2168
AnwerAR Jul 16, 2024
b9f3f96
Merge pull request #7 from optile/PCPAY-2168
AnwerAR Jul 16, 2024
fdddb3c
Added onPaymentSuccess callback
Jul 29, 2024
fdc83dc
Changed text of onBeforeCharge
Jul 29, 2024
85db3d2
Added onBeforeProvider redirect callback
Jul 31, 2024
10e5198
Add support for ABORT flow (cards only at the moment)
Jul 31, 2024
9a43476
Added the newest callbacks and solved an issue with onBeforeError imp…
Aug 9, 2024
30d4e97
Updates available drop in components when list refreshes
Aug 9, 2024
8fa2c49
Swapped Klarna and Afterpay
Aug 9, 2024
da7bf24
Refactored and improved comments
Aug 13, 2024
5914d44
Replaced with newest API features
Oct 11, 2024
d09c667
Check size of availableComponents and preselect only remaining option
Oct 11, 2024
3ebd95d
Fixed an issue with the pay button listener being instantiated too late
Oct 11, 2024
2bd257f
Added a way to show payment list component
Oct 23, 2024
87df8c2
Added option to select payment list component
Oct 25, 2024
7360290
Fixed a small issue with id of radio buttons for integration type
Oct 25, 2024
381fc1d
Added currency conversion outcome scenario
Nov 5, 2024
70493fe
Small adjustment to naming of success with conversion outcome
Nov 6, 2024
b19fabd
Updated HOSTED to use v5
Nov 7, 2024
bd3e2ba
Swapped order of APMs
Nov 7, 2024
3fd5f43
Added preselection option to the demo page
Nov 12, 2024
52cac47
Added expired list and already paid scenarios
Nov 12, 2024
19e1d63
Update index.html
Dec 12, 2024
ad58b4b
GitHub not Github
doismellburning Dec 13, 2024
eefdc8a
Update index.html
Dec 13, 2024
0de209e
Merge pull request #9 from optile/fix/GitHub
tomswales Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# Cards component demo
This repo is a demo page for testing our new Checkout Web SDK.
The demo page is hosted on Github pages [here](https://optile.github.io/cards-component-demo/)
The demo page is hosted on GitHub pages [here](https://optile.github.io/cards-component-demo/)
78 changes: 56 additions & 22 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<title>Payoneer Cards Demo</title>
<link rel="shortcut icon" type="image/png" href="public/favicon-32x32.png">
<meta charset="utf-8">
<script src="https://resources.pi-nightly.integration.oscato.com/web/libraries/payment-methods-list/umd/payment-methods-list.js"></script>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles.css">
<script src="index.js"></script>
Expand All @@ -14,7 +15,7 @@
<header>
<img alt="Payoneer logo" src="public/payoneer-white-logo.svg">
<!-- <button id="toggle-dark" onclick="handleToggleDarkModeClick()">Dark mode</button>-->
<h2>Cards Demo</h2>
<h2>Web SDK Demo</h2>
</header>
<main id="main-content">
<div class="demo-cards-container">
Expand Down Expand Up @@ -104,6 +105,12 @@ <h3>Payment methods</h3>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<div id="payment-methods-list" class="hidden">
<payoneer-payment-methods-list
env="pi-nightly.integration"
order-components="klarna,afterpay,cards"
id="payment-list-component" />
</div>
<form id="payment-methods">
<div id="cards-payment-method" class="payment-method hidden">
<label for="card-radio" id="cards-select-container" class="payment-method-select-container">
Expand All @@ -126,44 +133,44 @@ <h3>Payment methods</h3>
</div>
</div>
</div>
<div id="afterpay-payment-method" class="payment-method hidden">
<label for="afterpay-radio" id="afterpay-select-container"
<div id="klarna-payment-method" class="payment-method hidden">
<label for="klarna-radio" id="klarna-select-container"
class="payment-method-select-container">
<span>
<input id="afterpay-radio" type="radio" name="payment-option" value="afterpay">
Afterpay
<input id="klarna-radio" type="radio" name="payment-option" value="klarna">
Klarna
</span>
<span id="afterpay-icons" class="payment-method-icon-container">
<span id="klarna-icons" class="payment-method-icon-container">

</span>
</label>
<div id="afterpay-container" class="payment-method-component-container">
<div id="afterpay-component-container" class="payment-component-container">
<div id="klarna-container" class="payment-method-component-container">
<div id="klarna-component-container" class="payment-component-container">
<!-- Add payoneer-redirect element below here -->
</div>
<div class="redirect-button-container" style="display: none;">
<button id="afterpay-hosted-redirect-button" class="redirect-button">Proceed to
<button id="klarna-hosted-redirect-button" class="redirect-button">Proceed to
payment</button>
</div>
</div>
</div>
<div id="klarna-payment-method" class="payment-method hidden">
<label for="klarna-radio" id="klarna-select-container"
<div id="afterpay-payment-method" class="payment-method hidden">
<label for="afterpay-radio" id="afterpay-select-container"
class="payment-method-select-container">
<span>
<input id="klarna-radio" type="radio" name="payment-option" value="klarna">
Klarna
<input id="afterpay-radio" type="radio" name="payment-option" value="afterpay">
Afterpay
</span>
<span id="klarna-icons" class="payment-method-icon-container">
<span id="afterpay-icons" class="payment-method-icon-container">

</span>
</label>
<div id="klarna-container" class="payment-method-component-container">
<div id="klarna-component-container" class="payment-component-container">
<div id="afterpay-container" class="payment-method-component-container">
<div id="afterpay-component-container" class="payment-component-container">
<!-- Add payoneer-redirect element below here -->
</div>
<div class="redirect-button-container" style="display: none;">
<button id="klarna-hosted-redirect-button" class="redirect-button">Proceed to
<button id="afterpay-hosted-redirect-button" class="redirect-button">Proceed to
payment</button>
</div>
</div>
Expand All @@ -185,24 +192,40 @@ <h4>Integration</h4>
<form id="integration-form">
<div class="option-controls">
<div class="option-control-container">
<input type="radio" id="embedded" name="integration" value="embedded" checked>
<label for="embedded">Embedded</label>
<input type="radio" id="embedded-option" name="integration-type" value="embedded" checked>
<label for="embedded-option">Embedded</label>
</div>
<div class="option-control-container">
<input type="radio" id="hosted" name="integration" value="hosted">
<label for="hosted">Hosted</label>
<input type="radio" id="hosted-option" name="integration-type" value="hosted">
<label for="hosted-option">Hosted</label>
</div>
</div>
</form>
<h4 id="payment-list-form-title">Payment list type</h4>
<form id="payment-list-form">
<div class="option-controls">
<div class="option-control-container">
<input type="radio" id="payment-components-option" name="payment-list-type" value="payment-components" checked>
<label for="payment-components-option">Payment components</label>
</div>
<div class="option-control-container">
<input type="radio" id="payment-list-option" name="payment-list-type" value="payment-list">
<label for="payment-list-option">Payment list</label>
</div>
</div>
</form>
<h4>Payment outcome</h4>
<select id="outcome">
<option value="success">Success</option>
<option value="successwithconversion">FX conversion + success</option>
<option value="error">Error</option>
<option value="abort">Abort</option>
<option value="retry">Retry</option>
<option value="3ds2">3DS2</option>
<option value="tryotheraccount">Try other account</option>
<option value="tryothernetwork">Try other network</option>
<option value="expiredlist">Expired list</option>
<option value="alreadypaid">Already paid</option>
</select>
<h4>Language</h4>
<select id="language">
Expand Down Expand Up @@ -233,7 +256,7 @@ <h4>Payment button type</h4>
</div>
</form>
</div>
<div id="cards-options" style="display: none;">
<div id="cards-options">
<div id="styling-options">
<h4>Styling</h4>
<div class="option-controls">
Expand All @@ -248,6 +271,17 @@ <h4>Styling</h4>
</div>
</div>
</div>
<div id="hosted-preselection" class="hosted-preselection-chooser" style="display:none;">
<h4>Preselection</h4>
<form id="hosted-preselection-form">
<div class="option-controls">
<div class="option-control-container">
<input type="checkbox" id="hosted-preselection-checkbox" checked>
<label for="hosted-preselection-checkbox">Use preselection</label>
</div>
</div>
</form>
</div>
<div id="hosted-theme" class="hosted-theme-chooser">
<h4>Hosted page theme</h4>
<form id="hosted-theme-form">
Expand Down
Loading
Loading