woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

Merge pull request #3560 from woocommerce/PCP-4996-fastlane-add-classic-checkout-card-design-to-block-checkout

Browse source 
Fastlane: Add Classic Checkout card design to Block Checkout (4996)
This commit is contained in:
Emili Castells 2025-08-08 09:09:38 +02:00 • committed by GitHub
commit bb0fc025e0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 43 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

48
modules/ppcp-axo-block/resources/css/gateway.scss
View file

@ -42,40 +42,56 @@ $fast-transition-duration: 0.5s;
display: flex;
flex-direction: column;
align-items: center;
max-width: 300px;
max-width: 340px;
width: 100%;
}
&__content {
position: relative;
box-sizing: border-box;
aspect-ratio: 1.586;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid $border-color;
font-size: 0.875em;
font-family: monospace;
padding: 1em;
margin: 1em 0;
border-radius: 4px;
border-radius: 10px;
width: 100%;
box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .2666666667);
background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.0666666667), rgba(204, 204, 204, 0.0666666667) 65%, rgba(255, 255, 255, 0.4) 68%, rgba(255, 255, 255, 0));
border: 2px solid #ccc;
background-color: #f6f6f6;
}
&__meta {
@include flex-space-between;
width: 100%;
text-align: left;
&-digits {
letter-spacing: 2px;
margin-top: 76px;
font-size: 24px;
text-shadow: 0 -1px 1px #fff, 0 1px 1px rgba(0, 0, 0, .2666666667);
color: #666;
text-align: center;
font-family: monospace;
}
&:last-child {
align-self: flex-end;
&-logo {
position: absolute;
right: 32px;
top: 32px;
height: 40px;
}
}
&__watermark {
align-self: flex-end;
&-expiry {
text-align: right;
font-size: 14px;
padding-right: 32px;
}
&-name {
text-transform: uppercase;
position: absolute;
left: 24px;
bottom: 20px;
line-height: 1em;
}
}
&__edit {

27
modules/ppcp-axo-block/resources/js/components/Card/Card.js
View file

@ -45,24 +45,19 @@ const Card = ( { fastlaneSdk, showWatermark = true } ) => {
<div className="wc-block-checkout-axo-block-card__inner">
<div className="wc-block-checkout-axo-block-card__content">
<div className="wc-block-checkout-axo-block-card__meta">
<span className="wc-block-checkout-axo-block-card__meta-digits">
<div className="wc-block-checkout-axo-block-card__meta-logo">
{ cardLogo }
</div>
<div className="wc-block-checkout-axo-block-card__meta-digits">
{ `**** **** **** ${ lastDigits }` }
</span>
{ cardLogo }
</div>
<div className="wc-block-checkout-axo-block-card__meta-expiry">
{ formattedExpiry }
</div>
<div className="wc-block-checkout-axo-block-card__meta-name">
{ name }
</div>
</div>
<div className="wc-block-checkout-axo-block-card__meta">
<span>{ name }</span>
<span>{ formattedExpiry }</span>{ ' ' }
</div>
</div>
<div className="wc-block-checkout-axo-block-card__watermark">
{ showWatermark && (
<Watermark
fastlaneSdk={ fastlaneSdk }
name="wc-block-checkout-axo-card-watermark"
includeAdditionalInfo={ false }
/>
) }
</div>
</div>
</div>