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

Bp 3912 improve default hosted fields design #1105

Merged
merged 4 commits into from
Nov 25, 2024
Merged

Bp 3912 improve default hosted fields design #1105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
80f381d
fix style for hosted fields
vegimcarkaxhija Nov 21, 2024
f83f7b8
fix style for hosted fields
vegimcarkaxhija Nov 21, 2024
06dca42
fix style for hosted fields
vegimcarkaxhija Nov 21, 2024
dad8c7c
fix error message
vegimcarkaxhija Nov 25, 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
25 changes: 16 additions & 9 deletions view/frontend/web/js/view/payment/method-renderer/creditcards.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ define(
// Check for error field in response
if (response.error) {
// Display the error message in the observable
this.oauthTokenError("Error getting OAuth token.");
this.oauthTokenError("An error occurred, please try another payment method or try again later.");
} else {
const accessToken = response.data.access_token;
const issuers = response.data.issuers;
Expand All @@ -86,7 +86,7 @@ define(
}
} catch (error) {
// Catch any other errors (e.g., network issues)
this.oauthTokenError("Error getting OAuth token.");
this.oauthTokenError("An error occurred, please try another payment method or try again later.");
}
},

Expand Down Expand Up @@ -132,7 +132,7 @@ define(
let disabled = !sdkClient.formIsValid();
payButton.disabled = disabled;
if (disabled) {
payButton.style.backgroundColor = "#ff5555";
payButton.style.backgroundColor = "";
payButton.style.cursor = "not-allowed";
payButton.style.opacity = "0.5";
} else {
Expand All @@ -148,8 +148,8 @@ define(
let cardLogoStyling = {
height:"80%",
position: 'absolute',
border: '1px soli gray',
radius: '5px',
border: '1px solid #d6d6d6',
borderRadius: "4px",
opacity:'1',
transition:'all 0.3s ease',
right:'5px',
Expand All @@ -159,11 +159,18 @@ define(
// Define styling and mount hosted fields as needed...
let styling = {
fontSize: "14px",
fontFamily: 'Consolas, Liberation Mono, Menlo, Courier, monospace',
fontStyle: "normal",
fontWeight: 400,
fontFamily: 'Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif',
textAlign: 'left',
background: 'inherit',
color: 'black',
placeholderColor: 'grey',
background: '#fefefe',
color: '#333333',
placeholderColor: '#888888',
borderRadius: '5px',
padding: '8px 10px',
boxShadow: 'none',
transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
border: '1px solid #d6d6d6',
cardLogoStyling: cardLogoStyling
};

Expand Down
111 changes: 57 additions & 54 deletions view/frontend/web/template/payment/buckaroo_magento2_creditcards.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
<label class="label" data-bind="attr: {'for': getCode()}">
<!-- ko text: getTitle() --><!-- /ko -->
<!-- ko if: subtext !== null && subtext.length > 0 -->
<!-- ko if: subtext && subtext.length -->
<p class="bk-description" data-bind="text: subtext, style: subTextStyle"></p>
<!-- /ko -->
</label>
</div>
<div class="bk-img-wrap">
<img data-bind="attr: { src: require.toUrl('Buckaroo_Magento2/images/svg/creditcards.svg') }" />
<img data-bind="attr: { src: require.toUrl('Buckaroo_Magento2/images/svg/creditcards.svg') }"/>
</div>
</div>
</div>
Expand All @@ -23,79 +23,82 @@
<div class="payment-method-billing-address">
<!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- /ko -->
</div>


<div class="payment-method-second-col billing-address-form">
<form class="bg-white px-8 pt-6 pb-8">
<div class="mb-4">
<label id="cc-name-label" class="text-gray-700 text-sm font-bold">
Cardholder Name
</label>
<div id="cc-name-wrapper"
class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<p id="cc-name-error" class="text-red-500 text-xs italic mt-1"></p>
<div class="mb-4">
<label id="cc-name-label" class="label">
<span data-bind="i18n: 'Cardholder Name:'"> </span>
</label>
<div id="cc-name-wrapper"
class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<p id="cc-name-error" class="text-red-500 text-xs italic mt-1"></p>
</div>

<div class="mb-4">
<label id="cc-number-label" class="text-gray-700 text-sm font-bold">
Card Number
</label>
<div id="cc-number-wrapper"
class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<p id="cc-number-error" class="text-red-500 text-xs italic mt-1"></p>
<div class="mb-4">
<label id="cc-number-label" class="label">
<span data-bind="i18n: 'Card Number:'"> </span>
</label>
<div id="cc-number-wrapper"
class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<p id="cc-number-error" class="text-red-500 text-xs italic mt-1"></p>
</div>

<div class="mb-6">
<div class="grid grid-cols-2 gap-4">
<div class="col-span-1">
<label id="cc-expiry-label" class="text-gray-700 text-sm font-bold">
Expiry Date
</label>
<div id="cc-expiry-wrapper"
class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<p id="cc-expiry-error" class="text-red-500 text-xs italic mt-1"></p>
<div class="mb-6">
<div class="grid grid-cols-2 gap-4">
<div class="col-span-1">
<label id="cc-expiry-label" class="label">
<span data-bind="i18n: 'Expiry Date:'"> </span>
</label>
<div id="cc-expiry-wrapper"
class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<div class="col-span-1">
<label id="cc-cvc-label" class="text-gray-700 text-sm font-bold">
CVC
</label>
<div id="cc-cvc-wrapper"
class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<p id="cc-cvc-error" class="text-red-500 text-xs italic mt-1"></p>
<p id="cc-expiry-error" class="text-red-500 text-xs italic mt-1"></p>
</div>
<div class="col-span-1">
<label id="cc-cvc-label" class="label">
<span data-bind="i18n: 'CVC:'"> </span>
</label>
<div id="cc-cvc-wrapper"
class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<p id="cc-cvc-error" class="text-red-500 text-xs italic mt-1"></p>
</div>
</div>
</div>

<div class="field">
<span data-bind="i18n: 'Please make sure all fields are filled in correctly before proceeding.'"></span>
</div>
<div class="field">
<span
data-bind="i18n: 'Please make sure all fields are filled in correctly before proceeding.'"></span>
</div>

<div class="field oauth-token-error text-red-500" data-bind="text: oauthTokenError, visible: oauthTokenError"></div>
<div class="field payment-error text-red-500" data-bind="text: paymentError, visible: paymentError"></div>
<div class="field oauth-token-error text-red-500"
data-bind="text: oauthTokenError, visible: oauthTokenError"></div>
<div class="field payment-error text-red-500"
data-bind="text: paymentError, visible: paymentError"></div>

<div class="flex items-center justify-between">
<button id="pay"
class="bg-[#ff5555] hover:bg-blue-700 text-white py-2 px-4 rounded focus:outline-none focus:shadow-outline"
type="button">
Submit
</button>
<a class="inline-block align-baseline text-sm text-gray-500 hover:text-gray-800" href="#" data-bind="click: resetForm">
Cancel
</a>
</div>
<div class="flex items-center justify-between">
<button id="pay"
class="action primary checkout"
type="submit">
<span data-bind="i18n: 'Place Order'"></span>
</button>
<a class="inline-block align-baseline text-sm text-gray-500 hover:text-gray-800" href="#"
data-bind="click: resetForm">
Cancel
</a>
</div>
</form>
</div>

<div class="checkout-agreements-block">
<!-- ko foreach: $parent.getRegion('before-place-order') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<!-- /ko -->
</div>
</div>
</div>
Loading