Skip to content

Visual changes to SPE in the classic checkout #4119

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 9 commits into from
Mar 21, 2025
Merged

Visual changes to SPE in the classic checkout #4119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
30b59b7
Changing icon to Stripe's
wjrosa Mar 20, 2025
c323ffd
Disabling method instructions when SPE is enabled
wjrosa Mar 20, 2025
1e0e717
Disabling saving of methods when SPE is enabled
wjrosa Mar 20, 2025
78ea9ab
Merge branch 'develop' into tweak/visual-changes-to-spe-in-classic-ch…
wjrosa Mar 20, 2025
ea2378d
Hiding Stripe label when it is the only method available
wjrosa Mar 20, 2025
c4a0541
Fix blocks checkout test
wjrosa Mar 20, 2025
ee6a6cc
Adding specific unit tests
wjrosa Mar 20, 2025
97f688e
Changelog and readme entries
wjrosa Mar 20, 2025
dd5af78
Merge branch 'develop' into tweak/visual-changes-to-spe-in-classic-ch…
wjrosa Mar 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/images/stripe.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions changelog.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
*** Changelog ***

= 9.4.0 - xxxx-xx-xx =
* Tweak - Updates the Smart Checkout (classic/shortcode checkout version) to make all the payment methods look as similar as possible to any other WooCommerce payment method.
* Tweak - Updates the Smart Checkout (block checkout version) to make all the payment methods look as similar as possible to any other WooCommerce payment method.
* Fix - Improves the subscriptions detached admin notice, making it less intrusive and limiting the querying to 5 subscriptions (avoiding slow loading times).
* Dev - Implements the new Stripe order class into the PHP unit tests.
Expand Down
5 changes: 5 additions & 0 deletions client/blocks/upe/__tests__/apply-single-payment-element-styles.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ describe( 'applySinglePaymentElementStyles', () => {
);
expect( paymentMethodOptions.length ).toBe( 1 );

const paymentMethodStripeOption = document.querySelector(
'.wc-block-components-radio-control__option'
);
expect( paymentMethodStripeOption.style.display ).toBe( 'none' );

const stripeContent = document.getElementById(
'radio-control-wc-payment-method-options-stripe__content'
);
Expand Down
17 changes: 17 additions & 0 deletions client/classic/upe/__tests__/apply-single-payment-element-styles.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { applySinglePaymentElementStyles } from 'wcstripe/classic/upe/apply-single-payment-element-styles';

describe( 'applySinglePaymentElementStyles', () => {
it( 'Correctly apply the required styles to HTML elements', () => {
document.body.innerHTML = `
<input type="radio" name="payment_method" value="stripe" />
<label for="payment_method_stripe">Stripe</label>
`;

applySinglePaymentElementStyles();

const stripeLabel = document.querySelector(
'label[for=payment_method_stripe]'
);
expect( stripeLabel.style.display ).toBe( 'none' );
} );
} );
11 changes: 11 additions & 0 deletions client/classic/upe/apply-single-payment-element-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export const applySinglePaymentElementStyles = () => {
// Hide the Stripe radio button when it is the only available payment method.
const paymentMethodOptions = document.querySelectorAll(
'input[name=payment_method]'
);
if ( paymentMethodOptions.length === 1 ) {
document.querySelector(
'label[for=payment_method_stripe]'
).style.display = 'none';
}
};
5 changes: 5 additions & 0 deletions client/classic/upe/deferred-intent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
mountStripePaymentElement,
processPayment,
} from './payment-processing';
import { applySinglePaymentElementStyles } from 'wcstripe/classic/upe/apply-single-payment-element-styles';

jQuery( function ( $ ) {
// Create an API object, which will be used throughout the checkout.
Expand Down Expand Up @@ -114,6 +115,10 @@ jQuery( function ( $ ) {

await mountStripePaymentElement( api, upeElement );
}

if ( getStripeServerData()?.isSPEEnabled ) {
applySinglePaymentElementStyles();
}
}

function restrictPaymentMethodToLocation( upeElement ) {
Expand Down
50 changes: 26 additions & 24 deletions includes/abstracts/abstract-wc-stripe-payment-gateway.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,30 +343,32 @@ public function maybe_remove_non_existent_customer( $error, $order ) {
* @return array
*/
public function payment_icons() {
return apply_filters(
'wc_stripe_payment_icons',
[
WC_Stripe_Payment_Methods::ACH => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/bank-debit.svg" class="stripe-ach-icon stripe-icon" alt="ACH" />',
WC_Stripe_Payment_Methods::ACSS_DEBIT => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/bank-debit.svg" class="stripe-ach-icon stripe-icon" alt="' . __( 'Pre-Authorized Debit', 'woocommerce-gateway-stripe' ) . '" />',
WC_Stripe_Payment_Methods::BECS_DEBIT => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/bank-debit.svg" class="stripe-ach-icon stripe-icon" alt="' . __( 'BECS Direct Debit', 'woocommerce-gateway-stripe' ) . '" />',
WC_Stripe_Payment_Methods::ALIPAY => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/alipay.svg" class="stripe-alipay-icon stripe-icon" alt="Alipay" />',
WC_Stripe_Payment_Methods::WECHAT_PAY => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/wechat.svg" class="stripe-wechat-icon stripe-icon" alt="Wechat Pay" />',
WC_Stripe_Payment_Methods::BANCONTACT => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/bancontact.svg" class="stripe-bancontact-icon stripe-icon" alt="Bancontact" />',
WC_Stripe_Payment_Methods::IDEAL => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/ideal.svg" class="stripe-ideal-icon stripe-icon" alt="iDEAL" />',
WC_Stripe_Payment_Methods::P24 => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/p24.svg" class="stripe-p24-icon stripe-icon" alt="P24" />',
WC_Stripe_Payment_Methods::GIROPAY => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/giropay.svg" class="stripe-giropay-icon stripe-icon" alt="giropay" />',
WC_Stripe_Payment_Methods::KLARNA => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/klarna.svg" class="stripe-klarna-icon stripe-icon" alt="Klarna" />',
WC_Stripe_Payment_Methods::AFFIRM => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/affirm.svg" class="stripe-affirm-icon stripe-icon" alt="Affirm" />',
WC_Stripe_Payment_Methods::EPS => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/eps.svg" class="stripe-eps-icon stripe-icon" alt="EPS" />',
WC_Stripe_Payment_Methods::MULTIBANCO => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/multibanco.svg" class="stripe-multibanco-icon stripe-icon" alt="Multibanco" />',
WC_Stripe_Payment_Methods::SOFORT => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/sofort.svg" class="stripe-sofort-icon stripe-icon" alt="Sofort" />',
WC_Stripe_Payment_Methods::SEPA => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/sepa.svg" class="stripe-sepa-icon stripe-icon" alt="SEPA" />',
WC_Stripe_Payment_Methods::BOLETO => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/boleto.svg" class="stripe-boleto-icon stripe-icon" alt="Boleto" />',
WC_Stripe_Payment_Methods::OXXO => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/oxxo.svg" class="stripe-oxxo-icon stripe-icon" alt="OXXO" />',
'cards' => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/cards.svg" class="stripe-cards-icon stripe-icon" alt="' . __( 'Credit / Debit Card', 'woocommerce-gateway-stripe' ) . '" />',
WC_Stripe_Payment_Methods::CASHAPP_PAY => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/cashapp.svg" class="stripe-cashapp-icon stripe-icon" alt="Cash App Pay" />',
]
);
$icon_list = [
WC_Stripe_Payment_Methods::ACH => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/bank-debit.svg" class="stripe-ach-icon stripe-icon" alt="ACH" />',
WC_Stripe_Payment_Methods::ACSS_DEBIT => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/bank-debit.svg" class="stripe-ach-icon stripe-icon" alt="' . __( 'Pre-Authorized Debit', 'woocommerce-gateway-stripe' ) . '" />',
WC_Stripe_Payment_Methods::BECS_DEBIT => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/bank-debit.svg" class="stripe-ach-icon stripe-icon" alt="' . __( 'BECS Direct Debit', 'woocommerce-gateway-stripe' ) . '" />',
WC_Stripe_Payment_Methods::ALIPAY => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/alipay.svg" class="stripe-alipay-icon stripe-icon" alt="Alipay" />',
WC_Stripe_Payment_Methods::WECHAT_PAY => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/wechat.svg" class="stripe-wechat-icon stripe-icon" alt="Wechat Pay" />',
WC_Stripe_Payment_Methods::BANCONTACT => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/bancontact.svg" class="stripe-bancontact-icon stripe-icon" alt="Bancontact" />',
WC_Stripe_Payment_Methods::IDEAL => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/ideal.svg" class="stripe-ideal-icon stripe-icon" alt="iDEAL" />',
WC_Stripe_Payment_Methods::P24 => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/p24.svg" class="stripe-p24-icon stripe-icon" alt="P24" />',
WC_Stripe_Payment_Methods::GIROPAY => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/giropay.svg" class="stripe-giropay-icon stripe-icon" alt="giropay" />',
WC_Stripe_Payment_Methods::KLARNA => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/klarna.svg" class="stripe-klarna-icon stripe-icon" alt="Klarna" />',
WC_Stripe_Payment_Methods::AFFIRM => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/affirm.svg" class="stripe-affirm-icon stripe-icon" alt="Affirm" />',
WC_Stripe_Payment_Methods::EPS => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/eps.svg" class="stripe-eps-icon stripe-icon" alt="EPS" />',
WC_Stripe_Payment_Methods::MULTIBANCO => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/multibanco.svg" class="stripe-multibanco-icon stripe-icon" alt="Multibanco" />',
WC_Stripe_Payment_Methods::SOFORT => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/sofort.svg" class="stripe-sofort-icon stripe-icon" alt="Sofort" />',
WC_Stripe_Payment_Methods::SEPA => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/sepa.svg" class="stripe-sepa-icon stripe-icon" alt="SEPA" />',
WC_Stripe_Payment_Methods::BOLETO => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/boleto.svg" class="stripe-boleto-icon stripe-icon" alt="Boleto" />',
WC_Stripe_Payment_Methods::OXXO => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/oxxo.svg" class="stripe-oxxo-icon stripe-icon" alt="OXXO" />',
'cards' => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/cards.svg" class="stripe-cards-icon stripe-icon" alt="' . __( 'Credit / Debit Card', 'woocommerce-gateway-stripe' ) . '" />',
WC_Stripe_Payment_Methods::CASHAPP_PAY => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/cashapp.svg" class="stripe-cashapp-icon stripe-icon" alt="Cash App Pay" />',
];
$settings = WC_Stripe_Helper::get_stripe_settings();
if ( 'yes' === $settings['single_payment_element'] ) {
$icon_list['cards'] = '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/stripe.svg" class="stripe-cards-icon stripe-icon" alt="' . __( 'Stripe', 'woocommerce-gateway-stripe' ) . '" />';
}
return apply_filters( 'wc_stripe_payment_icons', $icon_list );
}

/**
Expand Down
7 changes: 5 additions & 2 deletions includes/payment-methods/class-wc-stripe-upe-payment-gateway.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,9 +230,9 @@ public function __construct() {
$this->title = $this->payment_methods['card']->get_title();
$this->description = $this->payment_methods['card']->get_description();
$this->enabled = $this->get_option( 'enabled' );
$this->saved_cards = 'yes' === $this->get_option( 'saved_cards' );
$this->sepa_tokens_for_other_methods = 'yes' === $this->get_option( 'sepa_tokens_for_other_methods' );
$this->spe_enabled = WC_Stripe_Feature_Flags::is_spe_available() && 'yes' === $this->get_option( 'single_payment_element' );
$this->saved_cards = ! $this->spe_enabled && 'yes' === $this->get_option( 'saved_cards' ); // @todo Temporarily disabling saving of methods when SPE is enabled
$this->testmode = WC_Stripe_Mode::is_test();
$this->publishable_key = ! empty( $main_settings['publishable_key'] ) ? $main_settings['publishable_key'] : '';
$this->secret_key = ! empty( $main_settings['secret_key'] ) ? $main_settings['secret_key'] : '';
Expand Down Expand Up @@ -651,7 +651,10 @@ public function payment_fields() {
<p><?php echo wp_kses_post( $this->get_description() ); ?></p>
<?php endif; ?>

<?php if ( $this->testmode ) : ?>
<?php
// @todo Temporarily disabling test instructions when SPE is enabled.
if ( $this->testmode && ! $this->spe_enabled ) :
?>
<p class="testmode-info">
<?php
printf(
Expand Down
1 change: 1 addition & 0 deletions readme.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
== Changelog ==

= 9.4.0 - xxxx-xx-xx =
* Tweak - Updates the Smart Checkout (classic/shortcode checkout version) to make all the payment methods look as similar as possible to any other WooCommerce payment method.
* Tweak - Updates the Smart Checkout (block checkout version) to make all the payment methods look as similar as possible to any other WooCommerce payment method.
* Fix - Improves the subscriptions detached admin notice, making it less intrusive and limiting the querying to 5 subscriptions (avoiding slow loading times).
* Dev - Implements the new Stripe order class into the PHP unit tests.
Expand Down
Loading