Merge pull request #3099 from kimcoleman/stripe-elements-filter-style

Exploratory PR to allow people to adjust the style of the mounted Stripe Elements fields.
strangerstudios · Aug 2, 2024 · 4e63393 · 4e63393
2 parents c00a8d2 + d5029b4
commit 4e63393
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/classes/gateways/class.pmprogateway_stripe.php b/classes/gateways/class.pmprogateway_stripe.php
@@ -776,6 +776,7 @@ public static function pmpro_checkout_after_preheader( $order ) {
 					'updatePaymentRequestButton' => apply_filters( 'pmpro_stripe_update_payment_request_button', true ),
 					'currency' => strtolower( $pmpro_currency ),
 					'accountCountry' => $stripe->get_account_country(),
+					'style' => apply_filters( 'pmpro_stripe_card_element_style', array( 'base' => array( 'fontSize' => '16px' ) ) ),
 				);
 
 				if ( ! empty( $order ) ) {

diff --git a/js/pmpro-stripe.js b/js/pmpro-stripe.js
@@ -15,13 +15,10 @@ jQuery( document ).ready( function( $ ) {
 	}
 	elements = stripe.elements();
 
-	/**
-	 * Set up default credit card fields.
-	 */
-	// Create Elements.
-	cardNumber = elements.create('cardNumber');
-	cardExpiry = elements.create('cardExpiry');
-	cardCvc = elements.create('cardCvc');
+	// Set up default credit card fields.
+	cardNumber = elements.create('cardNumber', { style: pmproStripe.style });
+	cardExpiry = elements.create('cardExpiry', { style: pmproStripe.style });
+	cardCvc = elements.create('cardCvc', { style: pmproStripe.style });
 
 	// Mount Elements. Ensure CC field is present before loading Stripe.
 	if ( $( '#AccountNumber' ).length > 0 ) {