Skip to content

Commit

Permalink
Small changes to html to correct invalid code
Browse files Browse the repository at this point in the history
  • Loading branch information
Tom Schneider-Swales committed Feb 16, 2024
1 parent b89190a commit dff839b
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 24 deletions.
40 changes: 19 additions & 21 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h2>Cards Demo</h2>
<main id="main-content">
<div class="demo-cards-container">
<button id="demo-show" class="demo-cards-button" onclick="handleShowDemoCardsClick()">
<div>Demo card numbers</div>
<span>Demo card numbers</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-credit-card" viewBox="0 0 16 16">
<path
Expand Down Expand Up @@ -98,19 +98,19 @@ <h3>Payment methods</h3>
<form id="payment-methods">
<div id="cards-payment-method" style="display: none;">
<label for="card-radio" id="cards-select-container" class="payment-method-select-container">
<div>
<span>
<input id="card-radio" type="radio" name="payment-option" value="cards">
Credit / Debit card
</div>
<div class="payment-method-icon-container">
</span>
<span class="payment-method-icon-container">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
class="bi bi-credit-card" viewBox="0 0 16 16">
<path
d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z" />
<path
d="M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" />
</svg>
</div>
</span>
</label>
<div id="cards-container" class="payment-method-component-container">
<div id="component-container">
Expand All @@ -126,13 +126,13 @@ <h3>Payment methods</h3>
<div id="other-payment-method" style="display: none;">
<label for="other-radio" id="other-select-container"
class="payment-method-select-container">
<div>
<span>
<input id="other-radio" type="radio" name="payment-option" value="other">
Afterpay
</div>
<div class="payment-method-icon-container afterpay">
</span>
<span class="payment-method-icon-container afterpay">
<svg role="img" aria-hidden="true" height="100%" viewBox="0 0 108 20"><path d="M8.724 9.787c0-1.798-1.338-3.061-2.982-3.061-1.644 0-2.982 1.285-2.982 3.061 0 1.755 1.338 3.06 2.982 3.06 1.646 0 2.982-1.262 2.982-3.06zm.024 5.35v-1.391c-.811.963-2.019 1.561-3.464 1.561C2.28 15.307 0 12.953 0 9.787c0-3.146 2.367-5.542 5.351-5.542 1.404 0 2.587.6 3.398 1.54V4.437h2.697v10.7H8.748zM24.544 12.761c-.944 0-1.206-.342-1.206-1.24V6.77h1.733V4.436h-1.733v-2.61h-2.764v2.61h-3.56v-.65c0-.9.352-1.243 1.317-1.243h.606V.468h-1.33c-2.28 0-3.354.728-3.354 2.953v1.014h-1.535V6.77h1.535v8.366h2.764V6.77h3.56v5.243c0 2.183.854 3.125 3.09 3.125h1.426v-2.376h-.55zM34.455 8.823c-.197-1.39-1.36-2.225-2.719-2.225-1.36 0-2.478.813-2.762 2.225h5.48zm-5.504 1.67c.198 1.583 1.36 2.483 2.829 2.483 1.162 0 2.062-.536 2.587-1.392h2.83c-.659 2.268-2.742 3.723-5.483 3.723-3.31 0-5.634-2.267-5.634-5.499 0-3.231 2.456-5.564 5.702-5.564 3.267 0 5.634 2.354 5.634 5.564 0 .236-.021.47-.065.685h-8.4zM54.987 9.787c0-1.734-1.338-3.061-2.982-3.061-1.644 0-2.982 1.285-2.982 3.061 0 1.755 1.338 3.06 2.982 3.06 1.644 0 2.982-1.326 2.982-3.06zm-8.684-5.35H49v1.391c.81-.985 2.016-1.583 3.464-1.583 2.96 0 5.283 2.376 5.283 5.52 0 3.147-2.367 5.544-5.349 5.544-1.382 0-2.522-.536-3.31-1.434v5.665h-2.785V4.437zM67.467 9.787c0-1.798-1.336-3.061-2.982-3.061-1.644 0-2.982 1.285-2.982 3.061 0 1.755 1.338 3.06 2.982 3.06 1.646 0 2.982-1.262 2.982-3.06zm.024 5.35v-1.391c-.811.963-2.019 1.561-3.464 1.561-3.004 0-5.284-2.354-5.284-5.52 0-3.146 2.367-5.542 5.35-5.542 1.403 0 2.587.6 3.398 1.54V4.437h2.696v10.7h-2.696zM41.443 5.486s.686-1.24 2.367-1.24c.719 0 1.184.24 1.184.24v2.73s-1.014-.611-1.946-.488c-.932.123-1.521.958-1.518 2.076v6.335h-2.784v-10.7h2.697v1.047zM82.781 4.437l-6.808 15.069h-2.871l2.673-5.826-4.52-9.243h3.254l2.644 6.176 2.713-6.176h2.915zM104.514 4.194L97.764.393c-1.98-1.116-4.457.278-4.457 2.512v.39c0 .352.193.678.505.853l1.275.718c.374.212.84-.052.84-.473v-.97c0-.485.538-.789.968-.546l5.846 3.294c.43.242.43.848 0 1.09l-5.846 3.293c-.43.242-.967-.06-.967-.546v-.516c0-2.233-2.477-3.63-4.46-2.512l-6.75 3.802a2.866 2.866 0 000 5.024l6.75 3.801c1.981 1.116 4.46-.278 4.46-2.512v-.39a.983.983 0 00-.506-.853l-1.274-.72c-.374-.211-.841.053-.841.474v.97c0 .485-.538.788-.967.545l-5.847-3.293a.623.623 0 010-1.091l5.847-3.294c.43-.243.967.06.967.546v.516c0 2.233 2.476 3.63 4.457 2.512l6.75-3.802a2.864 2.864 0 000-5.02z"></path></svg>
</div>
</span>
</label>
<div id="other-container" class="payment-method-component-container">
Placeholder for Afterpay component
Expand All @@ -147,24 +147,22 @@ <h3>Shopping Cart</h3>
<hr>
<p>Total <b>$15</b></p>
<hr>
<div>
<marquee id="available-components"></marquee>
</div>
<marquee id="available-components"></marquee>
<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 />
<input type="radio" id="embedded" name="integration" value="embedded" checked>
<label for="embedded">Embedded</label>
</div>
<div class="option-control-container">
<input type="radio" id="hosted" name="integration" value="hosted" />
<input type="radio" id="hosted" name="integration" value="hosted">
<label for="hosted">Hosted</label>
</div>
</div>
</form>
<h4>Payment outcome</h4>
<select id="outcome" value="success">
<select id="outcome">
<option value="success">Success</option>
<option value="error">Error</option>
<option value="abort">Abort</option>
Expand Down Expand Up @@ -192,11 +190,11 @@ <h4>Payment button type</h4>
<form id="payment-button-choice-form">
<div class="option-controls">
<div class="option-control-container">
<input type="radio" id="default-option" name="button-option" value="default" />
<input type="radio" id="default-option" name="button-option" value="default">
<label for="default-option">Default pay button</label>
</div>
<div class="option-control-container">
<input type="radio" id="custom-option" name="button-option" value="custom" />
<input type="radio" id="custom-option" name="button-option" value="custom">
<label for="custom-option">Custom pay button</label>
</div>
</div>
Expand All @@ -208,11 +206,11 @@ <h4>Styling</h4>
<div class="option-controls">
<div class="option-control-container">
<div>Primary color</div>
<input id="button-color-picker" value="#252526" type="color"></input>
<input id="button-color-picker" value="#252526" type="color">
</div>
<div class="option-control-container">
<div>Primary text color</div>
<input id="button-text-color-picker" value="#ffffff" type="color"></input>
<input id="button-text-color-picker" value="#ffffff" type="color">
</div>
</div>
</div>
Expand All @@ -223,11 +221,11 @@ <h4>Hosted page theme</h4>
<div class="option-controls">
<div class="option-control-container">
<input type="radio" id="payoneer-theme" name="theme" value="payoneer"
checked />
checked>
<label for="payoneer-theme">Payoneer</label>
</div>
<div class="option-control-container">
<input type="radio" id="garden-theme" name="theme" value="garden" />
<input type="radio" id="garden-theme" name="theme" value="garden">
<label for="garden-theme">Garden</label>
</div>
</div>
Expand Down
15 changes: 12 additions & 3 deletions docs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ window.addEventListener("DOMContentLoaded", async () => {
const cardsRadio = document.getElementById("card-radio");
const otherRadio = document.getElementById("other-radio");

// Check if cards is available as a drop-in component and render cards option in payment methods if so
if(availableComponents.find(component => component.name === "cards")) {
showCardsPaymentMethod(true);

Expand All @@ -73,6 +74,7 @@ window.addEventListener("DOMContentLoaded", async () => {
hidePaymentButton: !(payButtonType === "default")
}).mount(container);

// When cards is selected, display the payoneer-cards component (and some extra configuration settings related to cards)
cardsRadio.addEventListener("change", (event) => {
if(event.target.checked) {
showCardsPaymentComponent(true);
Expand All @@ -83,14 +85,20 @@ window.addEventListener("DOMContentLoaded", async () => {
}
});

// If custom pay button is clicked, then this calls the pay method on cards instance
function customPayButtonListener(event) {
event.preventDefault();
if(cards) {
cards.pay();
}
}
// Show this component by default if it is the only one in the available components
if(availableComponents.length === 1) {
cardsRadio.click()
}
}

// If Afterpay is available as a drop-in component, show it in the payment methods list
if(availableComponents.find(component => component.name === "afterpay")) {
showOtherPaymentMethod(true);
otherRadio.addEventListener("change", (event) => {
Expand All @@ -101,9 +109,10 @@ window.addEventListener("DOMContentLoaded", async () => {
showOtherPaymentComponent(true)
}
});
}
else {
cardsRadio.click()
// Show this component by default if it is the only one in the available components
if(availableComponents.length === 1) {
otherRadio.click()
}
}

function showCardsPaymentMethod(boolean) {
Expand Down

0 comments on commit dff839b

Please sign in to comment.