Edit What I have noticed is if stripe input element is outside of this div element div id="payment" class="woocommerce-checkout-payment" (this is located in payment.php) then it renders without disappearing but if it's inside of it then it disappears. So i'm assume woocommerce is affecting this. When page is not fully loaded yet the stripe card input element appears, but when page is fully loaded it suddenly disappears. Sometimes I get this error message - 'controller-cc848a9ad…2497a003323d67.js:1 [Stripe.js] The selector you specified (#stripe-card-element) applies to 2 DOM elements that are currently on the page. The Stripe Element will be mounted to the first one.' <?php /** * Plugin Name: Stripe-PHP-integration * Description: PHP API Integration For Wordpress * Author: Null * Version: 1.0 **/ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly } require_once 'stripe/init.php'; use Stripe\Stripe; add_action('init', function() { Stripe::setApiKey(''); Stripe::setClientId(''); }); header('Content-Type: application/json'); add_action('plugins_loaded', 'init_custom_gateway_class'); function init_custom_gateway_class(){ class WC_Gateway_Custom extends WC_Payment_Gateway { /** * Constructor for the gateway. */ public function __construct() { $this->id = 'Stripe-Payment'; $this->icon = apply_filters('woocommerce_custom_gateway_icon', ''); $this->has_fields = false; $this->method_title = __( 'Stripe PHP API Integration For WooCommerce', $this->domain ); $this->method_description = __( 'Allows payments using Stripe PHP API', $this->domain ); // Load the settings. $this->init_form_fields(); $this->init_settings(); // Define user set variables $this->title = $this->get_option( 'title' ); $this->description = $this->get_option( 'description' ); $this->instructions = $this->get_option( 'instructions', $this->description ); $this->order_status = $this->get_option( 'order_status', 'pending' ); // Actions add_action( 'woocommerce_update_options_payment_gateways_' . $this->id, array( $this, 'process_admin_options' ) ); add_action( 'woocommerce_thankyou_' . $this->id, array( $this, 'thankyou_page' ) ); // Customer Emails add_action( 'woocommerce_email_before_order_table', array( $this, 'email_instructions' ), 10, 3 ); add_action('woocommerce_payment_fields', array($this, 'payment_fields')); add_action('wp_enqueue_scripts', array($this, 'enqueue_styles')); add_action('wp_footer', array($this, 'include_stripe_js')); } public function enqueue_styles() { wp_enqueue_style('stripe-custom-styles', 'https://getvagu.com/wp-content/plugins/woocommerce-gateway-stripe/assets/css/stripe-styles.css?ver=7.7.0'); } public function include_stripe_js() { ?> <script src="https://js.stripe.com/v3/"></script> <script> const stripe = Stripe('pk_test_'); const options = { mode: 'payment', amount: 1099, currency: 'usd', appearance: {/*...*/}, }; const elements = stripe.elements(options); const paymentElement = elements.create('payment'); paymentElement.mount('#stripe_payment_form'); </script> <?php } /** * Initialise Gateway Settings Form Fields. */ public function init_form_fields() { $this->form_fields = array( 'enabled' => array( 'title' => __( 'Enable/Disable', $this->domain ), 'type' => 'checkbox', 'label' => __( 'Enable Custom Payment', $this->domain ), 'default' => 'yes' ), 'title' => array( 'title' => __( 'Title', $this->domain ), 'type' => 'text', 'description' => __( 'This controls the title which the user sees during checkout.', $this->domain ), 'default' => __( 'Stripe PHP API', $this->domain ), 'desc_tip' => true, ), 'order_status' => array( 'title' => __( 'Order Status', $this->domain ), 'type' => 'select', 'class' => 'wc-enhanced-select', 'description' => __( 'Choose whether status you wish after checkout.', $this->domain ), 'default' => 'wc-completed', 'desc_tip' => true, 'options' => wc_get_order_statuses() ), 'description' => array( 'title' => __( 'Description', $this->domain ), 'type' => 'textarea', 'description' => __( 'Payment method description that the customer will see on your checkout.', $this->domain ), 'default' => __('Payment Information', $this->domain), 'desc_tip' => true, ), 'instructions' => array( 'title' => __( 'Instructions', $this->domain ), 'type' => 'textarea', 'description' => __( 'Instructions that will be added to the thank you page and emails.', $this->domain ), 'default' => '', 'desc_tip' => true, ), ); } /** * Output for the order received page. */ public function thankyou_page() { if ( $this->instructions ) echo wpautop( wptexturize( $this->instructions ) ); } /** * Add content to the WC emails. * * @access public * @param WC_Order $order * @param bool $sent_to_admin * @param bool $plain_text */ public function email_instructions( $order, $sent_to_admin, $plain_text = false ) { if ( $this->instructions && ! $sent_to_admin && $order->payment_method && $order->has_status( 'on-hold' ) ) { echo wpautop( wptexturize( $this->instructions ) ) . PHP_EOL; } } /** * Renders the Stripe elements form. * */ public function payment_fields(){ ?> <div id="stripe_payment_form"></div> <?php } /** * Process the payment and return the result. * * @param int $order_id * @return array */ public function process_payment( $order_id ) { $order = wc_get_order( $order_id ); $payment_intent = \Stripe\PaymentIntent::create([ 'amount' => $order->get_total() * 100, 'currency' => strtolower(get_woocommerce_currency()), 'payment_method' => $order->get_payment_method(), 'confirmation_method' => 'manual', 'confirm' => true, 'return_url' => $this->get_return_url($order), ]); // Set order status $order->update_status('pending', __('Waiting for payment confirmation', $this->domain)); // or call the Payment complete // $order->payment_complete(); // Remove cart WC()->cart->empty_cart(); // Return thankyou redirect return array( 'result' => 'success', 'redirect' => $payment_intent->client_secret, ); } } } add_filter( 'woocommerce_payment_gateways', 'Stripe_PHP_API_Woocommerce_Integration' ); function Stripe_PHP_API_Woocommerce_Integration( $methods ) { $methods[] = 'WC_Gateway_Custom'; return $methods; } ?> Here's payment.php <?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/ * @package WooCommerce\Templates * @version 8.1.0 */ defined( 'ABSPATH' ) || exit; if ( ! wp_doing_ajax() ) { do_action( 'woocommerce_review_order_before_payment' ); } ?> <div id="payment" class="woocommerce-checkout-payment"> <div class="form-row place-order"> <noscript> <?php /* translators: $1 and $2 opening and closing emphasis tags respectively */ printf( esc_html__( 'Since your browser does not support JavaScript, or it is disabled, please ensure you click the %1$sUpdate Totals%2$s button before placing your order. You may be charged more than the amount stated above if you fail to do so.', 'woocommerce' ), '<em>', '</em>' ); ?> <br/><button type="submit" class="button alt<?php echo esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' ); ?>" 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' ); ?> </div> <h3 class="mt-2 mb-4 has-text-weight-bold is-flex is-align-items-center"> <span class="icon is-small mr-2"> <img src="/wp-content/themes/sleep/images/card-ic1.svg" alt="" /> <!--<i class="fas fa-credit-card"></i>--> </span> Step 3: Payment Methods </h3> <div class="payment-method-cc new-pay"> <h5 class="tit-add">Credit card <img src="/wp-content/themes/sleep/images/all-card1.svg" alt=""></h5> <?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>'; wc_print_notice( 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. 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' ) ), 'notice' ); // phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment echo '</li>'; } ?> </ul> <?php endif; ?> <?php do_action( 'woocommerce_review_order_before_submit' ); ?> <div class="d-flex align-items-center mt-2"> <label class="check-new"> <strong> I confirm that I have read and agree to <a href="https://getvagu.com/terms-conditions/" target="_blank">Terms of Service</a> and <a href="https://getvagu.com/privacy-policy/" target="_blank">Privacy Policy</a>.</strong> <input type="checkbox" class="mr-2 agree-checkbox" id="terms-of-service" name="terms-of-service" required="" /> <span class="checkmark mb-0" for="terms-of-service"></span> </label> </div> <?php echo apply_filters( 'woocommerce_order_button_html', '<button type="submit" class="button alt is-size-5 p-3 my-3 btn-pay paynow' . esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' ) . '" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" style="font-weight: 700; background: #00c349 !important;">Order Now</button>' ); // @codingStandardsIgnoreLine ?> <?php do_action( 'woocommerce_review_order_after_submit' ); ?> <?php wp_nonce_field( 'woocommerce-process_checkout', 'woocommerce-process-checkout-nonce' ); ?> </div> </div> <?php if ( ! wp_doing_ajax() ) { do_action( 'woocommerce_review_order_after_payment' ); } And here's payment-method.php <?php /** * Output a single payment method * * This template can be overridden by copying it to yourtheme/woocommerce/checkout/payment-method.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/ * @package WooCommerce\Templates * @version 3.5.0 */ if ( ! defined( 'ABSPATH' ) ) { exit; } ?> <li class="wc_payment_method payment_method_<?php echo esc_attr( $gateway->id ); ?>"> <input id="payment_method_<?php echo esc_attr( $gateway->id ); ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" /> <label for="payment_method_<?php echo esc_attr( $gateway->id ); ?>"> <?php echo $gateway->get_title(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?> <?php echo $gateway->get_icon(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?> </label> <?php if ( $gateway->has_fields() || $gateway->get_description() ) : ?> <div class="payment_box payment_method_<?php echo esc_attr( $gateway->id ); ?>" <?php if ( ! $gateway->chosen ) : /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace */ ?>style="display:none;"<?php endif; /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace */ ?>> <?php $gateway->payment_fields(); ?> </div> <?php endif; ?> </li> here's main.js $(document).ready(function () { $("li#menu-item-215 > a").addClass("myBtn_policy"); $("li#menu-item-215 > a").attr("data-title","Contact Us"); $("li#menu-item-215 > a").attr("data-id",216); $("#menu-item-225 > a").addClass("myBtn_policy"); $("#menu-item-225 > a").attr("data-title","Track order"); $("#menu-item-225 > a").attr("data-id",223); var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var cl = document.getElementById("close"); $(".myBtn_policy").click(function (e) { e.preventDefault(); var Popup_Title = $(this).attr("data-title"); var id = $(this).attr("data-id"); modal.style.display = "block"; document.getElementById("Popup_Title").innerHTML = Popup_Title; $("#myModal #policy_content").html(""); form_data = new FormData(); form_data.append('action', 'ajax_post'); form_data.append('id',id); $.ajax({ url: "/wp-admin/admin-ajax.php", type: 'POST', data: form_data, contentType: false, processData: false, success: function (response) { $("#myModal #policy_content").html(response); } }); }); $( "body" ).on( "click","#close", function() { $("#myModal").css("display","none"); $("#myModal").removeClass("active") }); window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; $("#myModal").removeClass("active"); } }; var acc = document.getElementsByClassName("card-header"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function () { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } if(document.querySelector("#billing_phone")){ var input = document.querySelector("#billing_phone"); window.intlTelInput(input, { separateDialCode:true, initialCountry: "us", }); } var one = 0; var ten = 0; var hundered = 6; var intervalId = setInterval(function () { time(); }, 0.7); function time() { one--; if (one == -1) { ten = ten - 1; one = 0 + 9; } if (ten == -1) { hundered = hundered - 1; ten = 0 + 9; } var wholeNum = hundered + "" + ten + "" + one; if (wholeNum == 250) { clearInterval(intervalId); } $(".timer").html("<span>" + hundered + "</span><span>" + ten + "</span><span>" + one + "</span>"); } var spd = 100; var spdVal = 10; var cntDown = 7 * 60 * spdVal; setInterval(function () { var mn, sc, ms; cntDown--; if (cntDown < 0) { return false; } mn = Math.floor(cntDown / spdVal / 60); mn = mn < 10 ? "0" + mn : mn; sc = Math.floor((cntDown / spdVal) % 60); sc = sc < 10 ? "0" + sc : sc; ms = Math.floor(cntDown % spdVal); ms = ms < 10 ? "0" + ms : ms; var result = mn + ":" + sc; // document.getElementById('stopwatch').innerHTML = result; }, spd); var swiper = new Swiper(".mySwiper", { slidesPerView: 1, spaceBetween: 10, loop: true, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 640: { slidesPerView: 1, spaceBetween: 10, }, 768: { slidesPerView: 1, spaceBetween: 10, }, 1024: { slidesPerView: 1, spaceBetween: 10, }, }, }); window.requestAnimationFrame = (function () { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); } ); })(); $(".slide-testimonial").owlCarousel({ loop: true, margin: 15, dots: false, responsiveClass: true, navText: ['<img src="index_files/arw-left.svg"/>', '<img src="index_files/arw-right.svg"/>'], responsive: { 0: { items: 1, nav: false, dots: true, }, 600: { items: 2, nav: false, dots: true, }, 1000: { items: 3, nav: false, dots: true, }, 1200: { items: 3, nav: true, dots: false, }, }, }); $("select").before('<div class="select_arr"></div>'); $("#nav-toggle").click(function () { $(".mobile-tog").slideToggle(700); $("body").toggleClass("overflow-hidden"); }); $(".mobile-tog a").click(function () { $(".mobile-tog").slideToggle(0); $("body").toggleClass("overflow-hidden"); }); $(".add_order, .option-quantity").click(function (e) { e.preventDefault(); var btn = $(this), id = btn.attr('data-id'), order = btn.attr('data-order'); form_data = new FormData(); form_data.append('action', 'ajax_add'); form_data.append('id',id); form_data.append('order',order); if(btn.hasClass("option-quantity")){ $(".option-quantity").removeClass("is-active"); btn.addClass("is-active"); } $.ajax({ url: "/wp-admin/admin-ajax.php", type: 'POST', data: form_data, contentType: false, processData: false, beforeSend: function(XMLHttpRequest) { $("form.checkout").append('<div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background: rgb(255, 255, 255); opacity: 0.6; cursor: default; position: absolute;"></div>'); }, success: function (response) { $(".blockOverlay").remove(); $(".update_checkout").click(); if(btn.hasClass("add_order")){ window.location.href='/checkout/'; } } }); }); $(window).scroll(function () { var scroll = $(window).scrollTop(); var dheight = $(".banner-left").height(); if (scroll >= dheight / 4) { $(".stickybtn").addClass("stickybtn_fixed"); } else { $(".stickybtn").removeClass("stickybtn_fixed"); } }); //***** Fomo popup *****// let obj = $("#fomo"); let city = function () { return cities[Math.floor(Math.random() * cities.length)]; }; let name = function () { return names[Math.floor(Math.random() * names.length)]; }; let ago = function () { return Math.floor(Math.random() * 30) + 1; }; let putData = function () { let number = Math.floor(Math.random() * 3) + 2; //console.log(number); let productimg = fomo_images + "product" + number + ".png"; let productname = number + "x Vagu Stimulators"; jQuery(".notification-container .notification-text .name").text(name); jQuery(".notification-container .notification-text .city").text(city); jQuery(".notification-container .notification-text .ago").text(ago); //jQuery(".notification-container .notification-text .productimg").attr('src', productimg); $(".productimg").attr("src", productimg); jQuery(".notification-container .notification-text .productname").text(productname); }; let timer = 5000; //randomIntFromInterval(9000, 15000); //console.log(timer); function randomIntFromInterval(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } function setIntervalX(callback, delay, repetitions) { let x = 0; let intervalID = window.setInterval(function () { callback(); if (++x === repetitions) { window.clearInterval(intervalID); } }, delay); } for (let i = 0; i < 5; i++) { task(i); } timer = 5000; function task(i) { let interval = 8000; let stay = 6000; if (i > 0) { timer = interval + stay + timer; } //console.log(timer); setTimeout(function () { putData(); $(obj).show("medium", function () { setTimeout(function () { $(obj).hide("medium"); }, stay); //Lenth time show //Display each notification for }); }, timer); } }); After page is loading/loaded the stripe input fields disappear.