Stripe Billing Address fields missing and borders around card fields

Hi @clayisland

Thank you for reaching out to Paid Memberships Pro.

To confirm, have you set the “Show Billing Address Fields” option inside Paid Memberships Pro (Stripe) settings to “Yes”?

The non-border issue seems to be theme related, you may add custom CSS to add borders around your checkout fields.

Hi Andrew,

set billing Address fields, doh! found the setting.

I found the stripe conflict, back when I setup paid memberships pro support help me with custom css for my child theme and styling. If I delete the frontend.css file the conflict disappears, but so does my styling. I have tried isolating the code and so far unsuccessful, maybe I am battling caching, or I suspect I am just missing something simple?

Here is the code:

/*---------------------------------------
	Buttons
---------------------------------------*/
.pmpro_btn, .pmpro_btn:link, .pmpro_content_message a, .pmpro_content_message a:link {
	background-color: #008ab8;
	background-image: none;
	border: none;	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
        margin: 5px 5px;
	padding: 15px 20px;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	color: #ffffff;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	vertical-align: middle;
	white-space: nowrap;
}
.pmpro_btn:focus, .pmpro_content_message a:focus {
	outline: thin dotted;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}
.pmpro_btn:hover, .pmpro_btn:focus, .pmpro_content_message a:focus, .pmpro_content_message a:hover {
	background-color: #036b8d;
	color: #fff;
	text-decoration: none;
}

.pmpro_btn.disabled,
.pmpro_btn[disabled],
fieldset[disabled] .pmpro_btn {
	-webkit-box-shadow: none;
	box-shadow: none;
	cursor: not-allowed;
	filter: alpha(opacity=65);
	opacity: 0.65;
	pointer-events: none;
}
.pmpro_btn.pmpro_cancel, .pmpro_btn.pmpro_cancel:link {
	background: none;
	border: none;
	margin: 0 0 0 10px;
}
/*---------------------------------------
	Forms
---------------------------------------*/
form.pmpro_form div {
	clear: left;
	margin: .5em 0 1em 0;
}
form.pmpro_form label {
	float: left;
	font-weight: bold;
	margin: 3px 10px 0 0;
	text-align: right;
	width: 200px;
}
form.pmpro_form label.pmpro_normal {
	display: inline-block;
	float: none;
	font-weight: normal;
	margin: 0 0 0 0;
	text-align: auto;
	width: auto;
}
form.pmpro_form input[type=checkbox]#tos {
	display: inline-block;
	width: auto;
}
.pmpro_clickable {
	cursor: pointer;
}
form.pmpro_form .likelabel {
	font-weight: bold;
}
form.pmpro_form .input, form.pmpro_form textarea, form.pmpro_form select {
	border: 1px solid #AAA;
	display: inline-block;
	margin: 0 3px 0 0;
	max-width: 60%;
	padding: 3px;
	width: auto;
}
form.pmpro_form textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
form.pmpro_form select {
	font-size: 12px;
	margin: 2px 0 0 0;
}
form.pmpro_form .lite {
	color: #666;
}
form.pmpro_form .leftmar {
	margin: 8px 0 0 210px;
}
form.pmpro_form .pmpro_captcha {
	margin: 0 0 0 210px;
}
form.pmpro_form .pmpro_captcha div {
	clear: none;
	margin: 0;
}
form.pmpro_form .pmpro_submit {
	margin-left: 210px;
}
form.pmpro_form .pmpro_submit span {
	float: left;
}
form.pmpro_form #pmpro_processing_message {
	color: #999;
	font-style: italic;
	margin: 5px 0 0 10px;
}
/*--------------------------------------------------
	Messages - Success, Error, Alert
----------------------------------------------------*/
.pmpro_message {
	background-color: #d9edf7;
	border: 1px solid #bce8f1;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #31708f;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5em;
	margin: .5em 0;
	padding: 10px 15px;
}
.pmpro_success {
	background-color: #dff0d8;
	border-color: #d6e9c6;
	color: #3c763d;
}
.pmpro_error {
	background-color: #f2dede;
	border-color: #ebccd1;
	color: #a94442;
}
.pmpro_alert {
	background-color: #fcf8e3;
	border-color: #faebcc;
	color: #8a6d3b;
}
.pmpro_content_message a {
	margin: 5px 5px 0 0;
}
.pmpro_message a {
	color: #245269;
	text-decoration: underline;
}
.pmpro_success a {
	color: #2b542c;
}
.pmpro_error a {
	color: #843534;
}
.pmpro_alert a {
	color: #66512c;
}
input.pmpro_error {
	background-image: none;
}
select.pmpro_error {
	background-image: none;
}
/*---------------------------------------
	Membership Checkout
---------------------------------------*/
.pmpro_checkout thead th {
	color: #444;
	font-weight: bold;
	padding: 10px;
}
.pmpro_checkout tbody td {
	padding: 10px;
}
.pmpro_checkout tr.odd td {
	background: rgba(125,125,125,.1);
}
.pmpro_checkout tr.selected td {
	background: #FFC;
}
.pmpro_checkout tr.active td {
	background: #FFC;
}
.pmpro_checkout .name {
	font-weight: bold;
}
.pmpro_checkout ul {
	color: #444;
	font-size: .8em;
	margin: 5px 0 0 20px;
	padding: 0;
}
.pmpro_checkout tfoot td {
	color: #444;
	padding: 10px;
}
.pmpro_checkout .topfoot td {
	border-top: 2px solid #CCC;
}
.pmpro_checkout .total td {
	border-top: 1px solid #CCC;
	font-size: 1.2em;
	font-weight: bold;
	padding-bottom: 30px;
}
.pmpro_checkout tfoot .entercode td {
	background: #EEE;
}
.pmpro_checkout td.rtbdr {
	border-right: 1px solid #CCC;
}
.pmpro_checkout select {
	font-size: 11px;
}
.pmpro_thead-name {
	float: left;
	width: 55%;
}
.pmpro_thead-msg {
	float: right;
	font-size: .9em;
	font-style: italic;
	font-weight: normal;
	text-align: right;
	width: 45%;
}
.pmpro_ordersummary {
	float: right;
}
#pmpro_license {
	background: #FFF;
	border: 1px solid #CCC;
	color: #666;
	height: 200px;
	margin: 3px;
	overflow: auto;
	padding: 5px;
}
.pmpro_sslseal {
	clear: none !important;
	float: right;
	margin: 0 !important;
}
a.pmpro_radio {
	color: #000;
	text-decoration: none;
}
/*---------------------------------------
	Membership Invoice
---------------------------------------*/
.pmpro_invoice { }
/*---------------------------------------
	Membership Account
---------------------------------------*/
#pmpro_account .pmpro_box {
	border-top: 1px solid #CCC;
	margin: 1em 0;
	padding: 1em 0;
}
#pmpro_account .pmpro_box h3 {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
}
#pmpro_account .pmpro_box p {
	margin: .5em 0 0 0;
	padding: 0;
}
#pmpro_account .pmpro_box ul {
	margin-bottom: 0;
}
#pmpro_account #pmpro_account-membership { }
#pmpro_account #pmpro_account-profile { }
#pmpro_account #pmpro_account-billing { }
#pmpro_account #pmpro_account-invoices { }
#pmpro_account #pmpro_account-links { }
.pmpro_actionlinks {
	font-size: .8em;
	margin: .25em 0 0 0;
}
.pmpro_actionlinks a {
	display: inline-block;
	margin: 0;
	padding: 0 5px 0 0;
	text-decoration: none;
}
.pmpro_actionlinks a:last-child {
	padding: 0;
}
.pmpro_hidden {
	display: none;
}
li.pmpro_more {
	list-style-type: none;
	margin-left: -20px;
	padding-left: 0;
	text-align: center;
}
/*---------------------------------------
	Membership Levels
---------------------------------------*/
#pmpro_levels_table {
	background: #FFF;
}
#pmpro_levels_table .pmpro_btn {
	display: block;
}
/*---------------------------------------
	Misc
---------------------------------------*/
.pmpro_a-right {
	float: right;
	font-size: 11px;
	text-align: right;
	text-decoration: underline;
	width: auto;
}
.pmpro_a-print {
	background: url(../images/printer.gif) top left no-repeat;
	color: #345395;
	cursor: pointer;
	float: right;
	font-size: 11px;
	line-height: 16px;
	padding: 0px 0px 2px 20px;
	text-decoration: none;
	width: auto;
}
.pmpro_red {
	color: #CC0000;
}
.pmpro_grey {
	color: #999;
}
.top1em {
	margin-top: 1em;
}
.bot1em {
	margin-bottom: 1em;
}
.bot0em {
	margin-bottom: 0em;
}
.clear {
	clear: both;
}
.pmpro_small {
	font-size: .8em;
}
@media (max-width:768px) {
	#pmpro_levels_table {
		border: none;
	}
	#pmpro_levels_table th {
		display: none;
	}
	#pmpro_levels_table td {
		border: none;
		display: block;
		padding: 0 10px;
		text-align: center;
	}
	#pmpro_levels_table td:first-child {
		font-size: 1.4em;
		padding-top: 10px;
	}
	#pmpro_levels_table td:last-child {
		padding-bottom: 10px;
		padding-top: 10px;
	}
	form.pmpro_form label {
		display: block;
		margin: 0;
		text-align: left;
		width: 100%;
	}
	form.pmpro_form label.pmpro_normal, #pmpro_tos_fields label {
		display: inline-block;
	}
	form.pmpro_form input[type=text].input, form.pmpro_form input[type=password].input {
		width: 90%;
	}
	form.pmpro_form input[type=text]#other_discount_code, form.pmpro_form input[type=text]#CVV, form.pmpro_form input[type=text]#discount_code {
		width: 40%;
	}
	form.pmpro_form #pmpro_payment_information_fields .pmpro_thead-msg {
		float: none;
		margin-bottom: 10px;
		text-align: left;
		text-wrap: normal;
		white-space: normal;
	}
	}
	form.pmpro_form .leftmar, form.pmpro_form .pmpro_captcha {
		margin: 2px 0 0 0;
	}
	form.pmpro_form .pmpro_submit {
		margin-left: 0;
	}
	form.pmpro_form .pmpro_submit #pmpro_submit_span {
		display: block;
		float: none;
	}
	form.pmpro_form .pmpro_btn {
		display: block;
		width: 100%;
	}
}

So if I delete the fronend.css file, and copy the code and paste it into the main style.css the conflict disappears and I keep my styling. I have no idea why, but it seems to work this way, any reason why this hack might be a problem?

Well I thought I had it figured out in the staging copy of my site. Then I tried the same changes in the public version and they don’t work. I cleared all the caches, and waited a few minutes and nothing. Super frustrating, I don’t know what else to do.

Thanks for the feedback @clayisland, I recommend reaching out to a local WordPress developer to help with the styling conflicts you are facing.

It seems to be CSS conflicts originating from your theme, this issue falls outside our support scope and may be best to reach out to a local developer to get on a call and assist you with this.