In this documentation, we’ll show you how to update Stripe fields to support a dark mode appearance.
To achieve this, follow these steps:
Step 1: Add the custom code nnippet
Add the code snippet below to update the Stripe fields and enable dark mode appearance
Note: You can add this snippet using a plugin like “Code Snippets” to avoid directly editing theme or plugin files. To learn the process, refer to our doc on “how to add a custom snippet to WordPress”.
/**
* Allow the code to alter payment element data, in this case modifying the theme of the payment element
**/
add_filter( 'fkwcs_stripe_payment_element_data', 'modify_stripe_payment_element_theme', 10, 2 );
function modify_stripe_payment_element_theme( $data, $gateway ) {
// Check if this is the credit card gateway
if ( $gateway->id === 'fkwcs_stripe' ) {
// Modify the theme to 'night'
if ( isset( $data['element_data']['appearance'] ) ) {
$data['element_data']['appearance']['theme'] = 'night';
}
}
return $data;
}
Step 2: Test Stripe dark mode appearance
After adding the snippet, place a test order to confirm that the Stripe fields display correctly in dark mode.
