PayPal Commerce CSS for Colossus

[lesliekirk]

It's looking like the CSS for PayPal Commerce isn't quite matching up to Colossus. Do I need to modify the CSS or the template or both?

[lesliekirk]

It's looking like the CSS for PayPal Commerce isn't quite matching up to Colossus. Do I need to modify the CSS or the template or both?

I've been dinking around with this a little but it's still not quite right

div#paypalcp-cc-name.paypalcp-cc-field.paypalcp-cc-name-field,
div#paypalcp-cc-number.paypalcp-cc-field.paypalcp-cc-number-field,
div#paypalcp-cc-exp.paypalcp-cc-field.paypalcp-cc-exp-field,
div#paypalcp-cc-cvv.paypalcp-cc-field.paypalcp-cc-cvv-field {
display: block;
width: 100%;
height: calc(3.5em - 2px);
margin-bottom: 0.25em;
padding: 0;
position: relative;
background-color: #fff;
border: 1px solid #c0c0c0;
border-radius: 0.125em;
}

#payment-fields label {
width: 100%;
max-width: 33%;
margin-right: 0;
}

div#paypalcp-cc-name.paypalcp-cc-field.paypalcp-cc-name-field input {
display: inline-block;
width: 100%;
height: 100%;
max-width: none;
border: 0 none;
box-sizing: border-box;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}

I think the CVV field is a bit tooooooo big. And things need to be aligned a tad better.


N54L3E.png

[Matt Zimmermann]

Hi Leslie,

You are correct, the CSS does need to be modified to fit the look and feel of any non-Shadows based site or if the Shadows based site is highly customized.

[Ron Frigon]

Hey Leslie, I've added this to Colossus. Here's a copy of the css. It did take some tweaking.

#payment-fields .paypalcp-cc-name-field,
#payment-fields .paypalcp-cc-number-field,
#payment-fields .paypalcp-cc-exp-field,
#payment-fields .paypalcp-cc-cvv-field {
display: block;
width: 100%;
height: calc(3.5em - 2px);
margin-bottom: 0.25em;
padding: 0;
position: relative;
background-color: #fff;
border: 1px solid #c0c0c0;
border-radius: 0.125em;
}

#payment-fields label {
width: 100%;
max-width: 33%;
margin-right: 0;
}

#payment-fields .paypalcp-cc-name-field input {
display: inline-block;
width: 100%;
height: 100%;
max-width: none;
border: 0 none;
box-sizing: border-box;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.t-payment-form .c-form-input--cvv {
max-width: none;
}

.t-payment-form .t-data-cvv {
margin-left: 0.5rem;
}

[lesliekirk]

Thanks, Ron. I had already tried that first (it wasn't what I needed). I don't think my page has the ID payment-fields - I did discover it looks to have 3 that I've been working with.

[lesliekirk]

Hi Leslie,

You are correct, the CSS does need to be modified to fit the look and feel of any non-Shadows based site or if the Shadows based site is highly customized.

Is there a demo site with the same look and feel for the OPAY screen that is shown here? https://docs.miva.com/paypal-commerc...-card-payments

I'm stuck on converting a couple of the classes and still have the look & feel from the screenshot I included.

[Matt Zimmermann]

Hi Leslie,

I do not have a demo site using Colossus with PayPal Commerce. Maybe someone in the community has a live site they can share here.

[lesliekirk]

Hi Leslie,

I do not have a demo site using Colossus with PayPal Commerce. Maybe someone in the community has a live site they can share here.

Here's hoping someone does. Kinda sucks not being able to duplicate what is shown in the examples

[lesliekirk]

So here's what I did. I set up a branch and installed Shadows 2.0, removed the demo categories, and worked with the OPAY screen. The CSS that installed with PayPal Commerce wasn't quite up to snuff. Here's what I used

#payment-fields .paypalcp-cc-exp-field,
#payment-fields .paypalcp-cc-cvv-field,
#payment-fields .paypalcp-cc-number-field,
#payment-fields .paypalcp-cc-name-field {
display: block;
width: 100%;
height: calc(3.5em - 2px);
margin-bottom: 0.25em;
padding: 0;
position: relative;
background-color: #fff;
border: 1px solid #c0c0c0;
border-radius: 0.125em;
}

#payment-fields label {
width: 100%;
max-width: 33%;
margin-right: 0;
}

#payment-fields .paypalcp-cc-name-field input {
display: inline-block;
width: 100%;
height: 100%;
max-width: none;
border: 0 none;
box-sizing: border-box;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}

Turns out what I used is almost identical to what Ron Frigon posted (I didn't notice that until I came back to post what I used). I don't know if it can be called a bug or not, but what is being added doesn't work. Thanks, Ron!

[lesliekirk]

I'm close, really close but the CVV info message doesn't work. I'm getting a drop-down message saying One or more fields are invalid.


cuMwaz.png

FWIW, the dev branch (Shadows 2.0) works as expected.

[Matt Zimmermann]

Hi Leslie,

Make sure the button for the "What's This?" has the attribute type="button"

[lesliekirk]

Hi Leslie,

Make sure the button for the "What's This?" has the attribute type="button"

Here's was the button code

<button class="c-button c-button--small c-button--clear u-bg-transparent x-messages--info" data-mini-modal data-mini-modal-type="inline" data-mini-modal-content="data-cvv" title="Card Security Code Information">What's This? <span class="u-icon-question"></span></button>

I updated it to this

<button class="c-button c-button--small c-button--clear u-bg-transparent x-messages--info" data-mini-modal data-mini-modal-type="inline" data-mini-modal-content="data-cvv" title="Card Security Code Information" type="button">What's This? <span class="u-icon-question"></span></button>

Now nothing happens...

[Matt Zimmermann]

Hi Leslie,

This may be related to a similar issue that was discovered in Shadows [https://github.com/mivaecommerce/rea...dows/issues/73]. Try updating your OPAY Page Template with the following [https://gist.github.com/influxweb/73...8c08a530bcf46e] and make the CSS adjustment mentioned in the Shadows link.

[lesliekirk]

Hi Leslie,

This may be related to a similar issue that was discovered in Shadows [https://github.com/mivaecommerce/rea...dows/issues/73]. Try updating your OPAY Page Template with the following [https://gist.github.com/influxweb/73...8c08a530bcf46e] and make the CSS adjustment mentioned in the Shadows link.

Thanks - that fixed the popup but wiped out all my CSS tweaks.

[lesliekirk]

Matt Zimmermann I had to tweak the <ul> for the CSS that both Ron & I have had to use.

<mvt:else>
<ul id="payment-fields" class="c-form-list o-layout u-grids-1 u-text-bold u-text-uppercase t-payment-form t-&mvt:global:payment_module_class;">
<mvt:foreach array="payment:fields" iterator="field">