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( '' ) + .find( 'li' ).text( event.error.message ); } else { - displayError.textContent = ''; + displayError.html( '' ); } } ); diff --git a/includes/class-wc-payment-gateway-wcpay.php b/includes/class-wc-payment-gateway-wcpay.php index fe5e8fb71c8..92d50f12706 100644 --- a/includes/class-wc-payment-gateway-wcpay.php +++ b/includes/class-wc-payment-gateway-wcpay.php @@ -174,13 +174,21 @@ public function payment_fields() { wp_localize_script( 'wc-payment-checkout', 'wc_payment_config', $js_config ); wp_enqueue_script( 'wc-payment-checkout' ); + wp_enqueue_style( + 'wc-payment-checkout', + plugins_url( 'assets/css/wc-payment-checkout.css', WCPAY_PLUGIN_FILE ), + array(), + filemtime( WCPAY_ABSPATH . 'assets/css/wc-payment-checkout.css' ) + ); + // Output the form HTML. - // TODO: Style this up. Formatting, escaping double line breaks etc. ?>

get_description() ); ?>

-
- - +
+
+ + +