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 StripeStripe;
add_action('init', function() {
Stripe::setApiKey('sk_test_');
Stripe::setClientId('pk_test_');
});
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 PHP Integration';
$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>
var stripe = Stripe('pk_test_');
var elements = stripe.elements();
var card = elements.create('card');
card.mount('#stripe-card-element');
</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() {
?>
<fieldset id="wc-<?php echo esc_attr( $this->id ); ?>-cc-form" class="wc-credit-card-form wc-payment-form" style="background:transparent;">
<?php do_action( 'woocommerce_credit_card_form_start', $this->id ); ?>
<?php if ( $this->inline_cc_form ) { ?>
<label for="card-element">
Credit or debit card
</label>
<div id="wc-stripe-elements-field" class="wc-stripe-elements-field">
<!-- a Stripe Element will be inserted here. -->
</div>
<?php } else { ?>
<div class="form-row form-row-wide mb-3">
<label for="stripe-card-element"> Card Number <span class="required">*</span></label>
<div class="stripe-card-group">
<div id="stripe-card-element" class="wc-stripe-elements-field">
<!-- a Stripe Element will be inserted here. -->
</div>
<i class="stripe-credit-card-brand stripe-card-brand" alt="Credit Card"></i>
</div>
</div>
<div class="row">
<div class="col-8">
<label for="stripe-exp-element"> Expiry Date <span class="required">*</span></label>
<div id="stripe-exp-element" class="wc-stripe-elements-field">
<!-- a Stripe Element will be inserted here. -->
</div>
</div>
<div class="col-4">
<label for="stripe-cvc-element"> CVC <span class="required">*</span></label>
<div id="stripe-cvc-element" class="wc-stripe-elements-field">
<!-- a Stripe Element will be inserted here. -->
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<img src="https://getvagu.com/wp-content/uploads/2023/11/secured.png" data-src="https://getvagu.com/wp-content/uploads/2023/11/secured.png" alt="secured" class="img-fluid d-block mx-auto" data-ga-section="7 - Secured Images">
</div>
</div>
<div class="clear"></div>
<?php } ?>
<!-- Used to display form errors -->
<div id="stripe-source-errors" class="stripe-source-errors" role="alert"></div>
<?php do_action( 'woocommerce_credit_card_form_end', $this->id ); ?>
<div class="clear"></div>
</fieldset>
<?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 = StripePaymentIntent::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;
}
?>