Checkout and Stripe Modal issue after Update

Sorry but this is the new way forward so that Stripe checkout can properly validate the checkout before the popup shows.

Just want to get on the record that this change really messed up my Google Analytic stats — I have the checkout process funnel setup in GA based on the page flow before the WC Stripe Gateway 4.1.0 update — i.e. without the “/checkout/order-pay” page between “/checkout/” and “/checkout/order-received/”.

My customers are not happy with the extra click neither.

I understand that certain changes may be unavoidable as the plug-in’s features expand.
I just wish that you guys have included page flow and user interface changes in the Change Log, so we can prep for them before updating the plug-in.

Thanks

@chinkchink this was discussed for a long time before we implemented this. If you wanted to voice your opinion you should follow the Github repo. And yes it is all in the changelog. Secondly, you don’t have to use Stripe Checkout. You can use the preferred embedded checkout which is more seamless and is what most customers expects.

SOLVED SOLVED SOLVED: I have to use this on all of my websites, it’s frustrating, but works. My theme is ‘thegem’ so change where applicable.

I use this for the payment.php file at (wp-content > your theme > woocommerce > checkout):

<?php
/**
* Checkout Payment Section
*
* This template can be overridden by copying it to yourtheme/woocommerce/checkout/payment.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 3.3.0
*/
if ( ! defined( ‘ABSPATH’ ) ) {
exit;
}
if ( ! is_ajax() ) {
do_action( ‘woocommerce_review_order_before_payment’ );
}
?>
<div id=”payment” class=”woocommerce-checkout-payment”>
<?php if ( WC()->cart->needs_payment() ) : ?>
<ul class=”wc_payment_methods payment_methods methods”>
<?php
if ( ! empty( $available_gateways ) ) {
foreach ( $available_gateways as $gateway ) {
wc_get_template( ‘checkout/payment-method.php’, array( ‘gateway’ => $gateway ) );
}
} else {
echo ‘<li class=”woocommerce-notice woocommerce-notice–info woocommerce-info”>’ . apply_filters( ‘woocommerce_no_available_payment_methods_message’, WC()->customer->get_billing_country() ? esc_html__( ‘Sorry, it seems that there are no available payment methods for your state. Please contact us if you require assistance or wish to make alternate arrangements.’, ‘woocommerce’ ) : esc_html__( ‘Please fill in your details above to see available payment methods.’, ‘woocommerce’ ) ) . ‘‘; // @codingStandardsIgnoreLine
}
?>

<?php endif; ?>
<div class=”form-row place-order”>
<noscript>
<?php esc_html_e( ‘Since your browser does not support JavaScript, or it is disabled, please ensure you click the Update Totals button before placing your order. You may be charged more than the amount stated above if you fail to do so.’, ‘woocommerce’ ); ?>
<br/><button type=”submit” class=”button alt” name=”woocommerce_checkout_update_totals” value=”<?php esc_attr_e( ‘Update totals’, ‘woocommerce’ ); ?>”><?php esc_html_e( ‘Update totals’, ‘woocommerce’ ); ?></button>
</noscript>

<?php wc_get_template( ‘checkout/terms.php’ ); ?>

<?php do_action( ‘woocommerce_review_order_before_submit’ ); ?>

<div class=”checkout-navigation-buttons clearfix”>
<?php
thegem_button(array(
‘tag’ => ‘button’,
‘text’ => __( ‘Previous step’, ‘thegem’ ),
‘style’ => ‘outline’,
‘size’ => ‘medium’,
‘extra_class’ => ‘checkout-prev-step’,
‘attributes’ => array(
‘value’ => __( ‘Previous step’, ‘thegem’ ),
‘type’ => ‘button’,
)
), true);
?>
<?php
thegem_button(array(
‘tag’ => ‘button’,
‘text’ => __( ‘Place Your Order’, ‘thegem’ ),
‘style’ => ‘outline’,
‘size’ => ‘medium’,
‘extra_class’ => ‘checkout-place-order’,
‘attributes’ => array(
‘value’ => __( ‘Place Your Order’, ‘thegem’ ),
‘type’ => ‘submit’,
)
), true);
?>
</div>

<?php do_action( ‘woocommerce_review_order_after_submit’ ); ?>

<?php wp_nonce_field( ‘woocommerce-process_checkout’ ); ?>
</div>
</div>
<?php
if ( ! is_ajax() ) {
do_action( ‘woocommerce_review_order_after_payment’ );
}