Skip to content

Commit

Permalink
fix style for hosted fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@vegimcarkaxhija
vegimcarkaxhija committed Nov 21, 2024
1 parent b7c36ae commit 80f381d
Showing 1 changed file with 57 additions and 54 deletions.
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 80f381d

Please sign in to comment.