Skip to content

Commit

Permalink
Merge pull request #1105 from buckaroo-it/BP-3912-Improve-default-Hos…
Browse files Browse the repository at this point in the history 
…ted-Fields-design

Bp 3912 improve default hosted fields design
  • Loading branch information
@vegimcarkaxhija
vegimcarkaxhija authored Nov 25, 2024
2 parents 7edec05 + dad8c7c commit 12e273b
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 63 deletions.
25 changes: 16 additions & 9 deletions view/frontend/web/js/view/payment/method-renderer/creditcards.js
View file
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
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>

0 comments on commit 12e273b

Please sign in to comment.