diff --git a/assets/css/wc-payment-checkout.css b/assets/css/wc-payment-checkout.css new file mode 100644 index 00000000000..d55a311a78e --- /dev/null +++ b/assets/css/wc-payment-checkout.css @@ -0,0 +1,5 @@ +.wc-payment-card-mounted { + border: 1px solid #ddd; + padding: 5px 7px; + background-color: #fff; +} diff --git a/assets/js/wc-payment-checkout.js b/assets/js/wc-payment-checkout.js index ac76ffd6a7a..e5a8459522b 100644 --- a/assets/js/wc-payment-checkout.js +++ b/assets/js/wc-payment-checkout.js @@ -3,13 +3,14 @@ jQuery( function() { 'use strict'; var stripe = new Stripe( wc_payment_config.publishableKey, { - stripeAccount: wc_payment_config.accountId + stripeAccount: wc_payment_config.accountId, } ); var elements = stripe.elements(); // Create a card element. var cardElement = elements.create( 'card', { - hidePostalCode: true + hidePostalCode: true, + classes: { base: 'wc-payment-card-mounted' }, } ); // Only attempt to mount the card element once that section of the page has loaded. We can use the updated_checkout @@ -21,12 +22,13 @@ jQuery( function() { } ); // Update the validation state based on the element's state. - cardElement.addEventListener( 'change', function(event) { - var displayError = document.getElementById( 'wc-payment-errors' ); - if (event.error) { - displayError.textContent = event.error.message; + cardElement.addEventListener( 'change', function( event ) { + var displayError = jQuery( '#wc-payment-errors' ); + if ( event.error ) { + displayError.html( '
get_description() ); ?>
- - - +