Odtnhj

Here is a picture of desktop and mobile, you can see there is a : in mobile that shouldn't be there. Any idea what the cause of it could be?

Here is the template from the images - it uses code that falls outside of the scope of Wordpress because my client specifically requested I fix a problem this way, not because I think that it is a good idea to work outside of the scope of Wordpress :)

<?php
/**
 * Payment methods
 *
 * Shows customer payment methods on the account page.
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/payment-methods.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @author WooThemes
 * @package WooCommerce/Templates
 * @version 2.6.0
 */

if ( ! defined( 'ABSPATH' ) ) 
 exit;


$current_user = wp_get_current_user();

$current_user_id = $current_user->ID;

$customer_id = get_user_meta( $current_user_id, '_stripe_customer_id', true );

StripeStripe::setApiKey("xxx");

$customer = StripeCustomer::retrieve((string)$customer_id);

$card_list = $customer->sources->all(["object" => "card"]);

$show_table = true;

if(isset($_POST['create_new_method'])) 
 $show_table = false;


$saved_methods = wc_get_customer_saved_methods_list( get_current_user_id() );
$has_methods = (bool) $saved_methods;
$types = wc_get_account_payment_methods_types();

/*echo " **saved_methods: ";
print_r($saved_methods);
echo " **saved_methods length: ";
count($saved_methods->cc);

echo " **card list: ";
print_r($card_list);

echo " **card list length: ".count($card_list->data);*/

$just_added_method = false;

if((empty($saved_methods) && count($card_list->data) > 0) || isset($_GET['added_card']) ) 
 $just_added_method = true;


do_action( 'woocommerce_before_account_payment_methods', $has_methods ); ?>

<?php if ( ( ($has_methods || $just_added_method) && $show_table ) ) : ?>
 <?php if ( $has_methods && $show_table ) : ?>

 <table class="woocommerce-MyAccount-paymentMethods shop_table shop_table_responsive account-payment-methods-table">
 <thead>
 <tr>
 <?php foreach ( wc_get_account_payment_methods_columns() as $column_id => $column_name ) : ?>
 <th class="woocommerce-PaymentMethod woocommerce-PaymentMethod--<?php echo esc_attr( $column_id ); ?> payment-method-<?php echo esc_attr( $column_id ); ?>"><span class="nobr"><?php echo esc_html( $column_name ); ?></span></th>
 <?php endforeach; ?>
 </tr>
 </thead>
 <?php foreach ( $saved_methods as $type => $methods ) : ?>
 <?php foreach ( $methods as $method ) : ?>
 <tr class="payment-method<?php echo ! empty( $method['is_default'] ) ? ' default-payment-method' : '' ?>">
 <?php foreach ( wc_get_account_payment_methods_columns() as $column_id => $column_name ) : ?>
 <td class="woocommerce-PaymentMethod woocommerce-PaymentMethod--<?php echo esc_attr( $column_id ); ?> payment-method-<?php echo esc_attr( $column_id ); ?>" data-title="<?php echo esc_attr( $column_name ); ?>">
 <?php
 if ( has_action( 'woocommerce_account_payment_methods_column_' . $column_id ) ) 
 do_action( 'woocommerce_account_payment_methods_column_' . $column_id, $method );
 elseif ( 'method' === $column_id ) 
 if ( ! empty( $method['method']['last4'] ) ) 
 /* translators: 1: credit card type 2: last 4 digits */
 echo sprintf( __( '%1$s ending in %2$s', 'woocommerce' ), esc_html( wc_get_credit_card_type_label( $method['method']['brand'] ) ), esc_html( $method['method']['last4'] ) );
 else 
 echo esc_html( wc_get_credit_card_type_label( $method['method']['brand'] ) );
 
 elseif ( 'expires' === $column_id ) 
 echo esc_html( $method['expires'] );
 elseif ( 'actions' === $column_id ) 
 foreach ( $method['actions'] as $key => $action ) 
 echo '<a href="' . esc_url( $action['url'] ) . '" class="button ' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>&nbsp;';
 
 
 ?>
 </td>
 <?php endforeach; ?>
 </tr>
 <?php endforeach; ?>
 <?php endforeach; ?>
 <?php if ($just_added_method && $show_table && empty($saved_methods)) : ?>
 <?php foreach ( $card_list->data as $added_card ) : ?>
 <tr class="payment-method">
 <?php foreach ( wc_get_account_payment_methods_columns() as $column_id => $column_name ) : ?>
 <td class="woocommerce-PaymentMethod woocommerce-PaymentMethod--<?php echo esc_attr( $column_id ); ?> payment-method-<?php echo esc_attr( $column_id ); ?>" data-title="<?php echo esc_attr( $column_name ); ?>">
 <?php
 if ( has_action( 'woocommerce_account_payment_methods_column_' . $column_id ) ) 
 do_action( 'woocommerce_account_payment_methods_column_' . $column_id, $method );
 elseif ( 'method' === $column_id ) 
 $last4 = $added_card->last4;
 $brand = $added_card->brand;
 if ( ! empty( $last4 ) ) 
 /* translators: 1: credit card type 2: last 4 digits */
 echo sprintf( __( '%1$s ending in %2$s', 'woocommerce' ), esc_html( wc_get_credit_card_type_label( $brand ) ), esc_html( $last4 ) );
 else 
 echo esc_html( wc_get_credit_card_type_label( $brand ) );
 
 elseif ( 'expires' === $column_id ) 
 echo esc_html( $added_card['exp_month']."/".substr($added_card['exp_year'], 2) );
 elseif ( 'actions' === $column_id ) ?>
 <button class="woocommerce-Button woocommerce-Button--alt button alt" id="delete_card" style="color: white!important" name="delete_card" onClick="location.href='https://www.grahmlux.com/wp-content/themes/betheme/includes/delete_payment_method.php?id=<?php echo $added_card->id; ?>&user_id=<?php echo $current_user_id; ?>'">Delete</button>
 <?php if($customer->default_source != $added_card->id) ?>
 <button class="woocommerce-Button woocommerce-Button--alt button alt" id="make_default" style="color: white!important" name="make_default" onClick="location.href='https://www.grahmlux.com/wp-content/themes/betheme/includes/make_default.php?id=<?php echo $added_card->id; ?>&user_id=<?php echo $current_user_id; ?>'">Make default</button>
 <?php ?>
 <?php ?>
 </td>
 <?php endforeach; ?>
 </tr>
 <?php endforeach; ?>
 <?php endif; ?>
 <?php if ($just_added_method && $show_table && !empty($saved_methods)) 
 $added_card = $card_list->data[count($card_list) - 1] ?>
 <tr class="payment-method">
 <?php foreach ( wc_get_account_payment_methods_columns() as $column_id => $column_name ) : ?>
 <td class="woocommerce-PaymentMethod woocommerce-PaymentMethod--<?php echo esc_attr( $column_id ); ?> payment-method-<?php echo esc_attr( $column_id ); ?>" data-title="<?php echo esc_attr( $column_name ); ?>">
 <?php
 if ( has_action( 'woocommerce_account_payment_methods_column_' . $column_id ) ) 
 do_action( 'woocommerce_account_payment_methods_column_' . $column_id, $method );
 elseif ( 'method' === $column_id ) 
 $last4 = $added_card->last4;
 $brand = $added_card->brand;
 if ( ! empty( $last4 ) ) 
 /* translators: 1: credit card type 2: last 4 digits */
 echo sprintf( __( '%1$s ending in %2$s', 'woocommerce' ), esc_html( wc_get_credit_card_type_label( $brand ) ), esc_html( $last4 ) );
 else 
 echo esc_html( wc_get_credit_card_type_label( $brand ) );
 
 elseif ( 'expires' === $column_id ) 
 echo esc_html( $added_card['exp_month']."/".substr($added_card['exp_year'], 2) );
 elseif ( 'actions' === $column_id ) ?>
 <button class="woocommerce-Button woocommerce-Button--alt button alt" id="delete_card" style="color: white!important" name="delete_card" onClick="location.href='https://www.grahmlux.com/wp-content/themes/betheme/includes/delete_payment_method.php?id=<?php echo $added_card->id; ?>&user_id=<?php echo $current_user_id; ?>'">Delete</button>
 <?php if($customer->default_source != $added_card->id) ?>
 <button class="woocommerce-Button woocommerce-Button--alt button alt" id="make_default" style="color: white!important" name="make_default" onClick="location.href='https://www.grahmlux.com/wp-content/themes/betheme/includes/make_default.php?id=<?php echo $added_card->id; ?>&user_id=<?php echo $current_user_id; ?>'">Make default</button>
 <?php ?>
 <?php ?>
 </td>
 <?php endforeach; ?>
 </tr>
 <?php ?>
 </table>

 <form action="" method="post">
 <input class="woocommerce-Button woocommerce-Button--alt button alt" style="background-color: #88d651!important;" name="create_new_method" type="submit" value="Add payment method" />
 </form>

 <?php endif; ?>

<?php else :

 $current_user = wp_get_current_user();

 $current_user_id = $current_user->ID;

 $customer_id = get_user_meta( $current_user_id, '_stripe_customer_id', true );

 StripeStripe::setApiKey("xxx");

 if($customer_id == NULL) 
 echo 'Make your first purchase to activate this feature - <a href="https://www.grahmlux.com/jewelry" style="font-weight: 700; text-decoration: underline; color: #ffffff">Shop Now</a>';
 //die();
 
 else 
 $customer = StripeCustomer::retrieve((string)$customer_id);
 ?>

 <?php if(count($card_list->data) == 0) ?>
 <p class="woocommerce-Message woocommerce-Message--info woocommerce-info"><?php esc_html_e( 'No saved methods found.', 'woocommerce' ); ?></p>
 <?php ?>

 <!--<form action="https://www.grahmlux.com/wp-content/themes/betheme/includes/add_payment_method.php" method="post" id="add_payment_method">-->
 <form action="https://www.grahmlux.com/wp-content/themes/betheme/includes/add_payment_method.php" method="post" id="add_payment_method">
 <div class="form-row">
 <label for="card-element">
 Credit or Debit Card (Secured By Stripe)
 </label>

 <div id="card-number" style="display: inline-block; width: 180px"></div>
 <div id="card-expiry" style="display: inline-block; width: 60px"></div>
 <div id="card-cvc" style="display: inline-block; width: 50px"></div>

 <!-- Used to display Element errors. -->
 <div id="card-errors" role="alert"></div>

 <button type="submit" class="woocommerce-Button woocommerce-Button--alt button alt" id="place_order" style="color: white!important" value="<?php esc_attr_e( 'Add payment method', 'woocommerce' ); ?>"><?php esc_html_e( 'Add payment method', 'woocommerce' ); ?></button>
 </div>
 </form>

 <script>
 var style = 
 base: 
 color: '#ffffff',
 fontSize: '14px',
 fontSmoothing: 'antialiased',
 '::placeholder': 
 color: '#ccc',
 ,
 iconColor: "#fff"
 ,
 invalid: 
 color: '#e5424d',
 ':focus': 
 color: '#303238',
 ,
 ,
 ;
 var stripe = Stripe('pk_test_TpmyYk1TnhrxPqNpImYwjyap');
 var elements = stripe.elements();

 var cardNumber = elements.create('cardNumber', 
 placeholder: 'Add Card Number Here',
 style: style
 );
 var cardExpiry = elements.create('cardExpiry', 
 style: style
 );
 var cardCvc = elements.create('cardCvc', 
 style: style
 );

 window.mobilecheck = function() 
 var check = false;
 (function(a)wmlb)(navigator.userAgent;

 if(mobilecheck()) 
 cardNumber.mount('#Content > div > div > div > div.section.mcb-section.hide-desktop > div > div > div > div > div > div > div > form > div.form-row >div#card-number');
 cardExpiry.mount('#Content > div > div > div > div.section.mcb-section.hide-desktop > div > div > div > div > div > div > div > form > div.form-row >div#card-expiry');
 cardCvc.mount('#Content > div > div > div > div.section.mcb-section.hide-desktop > div > div > div > div > div > div > div > form > div.form-row >div#card-cvc');
 
 else 
 cardNumber.mount('#Content > div > div > div > div.section.mcb-section.hide-tablet.hide-mobile > div > div > div > div > div > div > div > form > div.form-row > div#card-number');
 cardExpiry.mount('#Content > div > div > div > div.section.mcb-section.hide-tablet.hide-mobile > div > div > div > div > div > div > div > form > div.form-row > div#card-expiry');
 cardCvc.mount('#Content > div > div > div > div.section.mcb-section.hide-tablet.hide-mobile > div > div > div > div > div > div > div > form > div.form-row > div#card-cvc');
 

 cardNumber.addEventListener('change', function(event) 
 var displayError = document.getElementById('card-errors');
 if (event.error) 
 displayError.textContent = event.error.message;
 else 
 displayError.textContent = '';
 
 );

 var stop = 0;

 // Create a token or display an error when the form is submitted.
 var form = document.getElementById('add_payment_method');
 form.addEventListener('submit', function(event) 

 event.preventDefault();

 stripe.createToken(cardNumber).then(function(result) 
 if (result.error) 
 // Inform the customer that there was an error.
 var errorElement = document.getElementById('card-errors');
 errorElement.textContent = result.error.message;
 else 
 if(stop == 0) 
 console.log("inside stop token from being stored");
 // Send the token to your server.
 stripeTokenHandler(result.token);
 stop = 1;
 
 else 
 stop = 0
 
 
 );

 );

 function delete_cookie( name ) 
 document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
 

 function createCookie(name,value) 

 delete_cookie("stripe_token");

 var date = new Date();
 date.setTime(date.getTime()+1000);
 var expires = "; expires="+date.toGMTString();

 document.cookie = name+"="+value+expires+"; path=/; domain=.grahmlux.com";
 //document.cookie = name+"="+value+expires+"; path=/";
 

 function createUserIDCookie(name,value) 
 document.cookie = name+"="+value+""+"; path=/; domain=.grahmlux.com";
 //document.cookie = name+"="+value+""+"; path=/";
 

 function stripeTokenHandler(token) 
 var current_user_id = <?php echo $current_user_id; ?>

 console.log("current_user_id:", current_user_id);

 //MUST BE THIS ORDER BECAUSE OF DELETE_COOKIE
 createUserIDCookie("user_id", current_user_id);
 createCookie("stripe_token", token);

 var form = document.getElementById('add_payment_method');
 form.submit();
 
 </script>

<?php endif; ?>

<?php do_action( 'woocommerce_after_account_payment_methods', $has_methods ); ?>

Anyone see any typos/anything that could be causing this to happen on mobile and not on desktop?

I needed to edit the css, the : was in a ::before tag.