Download Stripe SDK First

Include init.php file

require_once plugin_dir_path( __FILE__ ) . 'stripe/init.php';

Include HTML of Card Details

<div class="vc_row wpb_row vc_row-fluid">
					<div class="wpb_column vc_column_container vc_col-sm-6">
						<label>Card Number*</label>
						<input type="text" name="cc_number" placeholder="4242 4242 4242 4242" required>
					</div>
					<div class="wpb_column vc_column_container vc_col-sm-2">
						<label>Month*</label>
						<input type="text" name="cc_month" placeholder="01" required>
					</div>
					<div class="wpb_column vc_column_container vc_col-sm-2">
						<label>Year*</label>
						<input type="text" name="cc_year" placeholder="22" required>
					</div>
					<div class="wpb_column vc_column_container vc_col-sm-2">
						<label>CVV*</label>
						<input type="text" name="cc_cvv" placeholder="123" required>
					</div>
				</div>

Add Confirmation Button for create a token & complete the payment

<input type="submit" class="btn btn-default color-hover-white align-center" name="conf_pay" value="Confirm Payment" id="payBtn">

Include a Stipe Checkout JS

function js_enqueue_scripts() {
	wp_enqueue_script("stripe-js", 'https://js.stripe.com/v2/?ver=1.3.9.1', array('jquery'));
	wp_register_script("my-ajax-handle", get_stylesheet_directory_uri() . "/assets/js/ajax.js", array('jquery'));
	wp_enqueue_script("my-ajax-handle");
    //the_ajax_script will use to print admin-ajax url in custom ajax.js
	wp_localize_script('my-ajax-handle', 'the_ajax_script', array('ajaxurl' => admin_url('admin-ajax.php')));
}
add_action("wp_enqueue_scripts", "js_enqueue_scripts");

Payment Process AJAX Script

jQuery(function(){
      Stripe.setPublishableKey('<?php echo STRIPE_PUBLISHABLE_KEY; ?>');
      jQuery('input[name="stripe_custom_pay"]').click(function(){
                //Card Details
				var card_number = jQuery('input[name="cc_number"]').val();
				var cc_month = jQuery('input[name="cc_month"]').val();
				var cc_year = jQuery('input[name="cc_year"]').val();
				var cc_cvv = jQuery('input[name="cc_cvv"]').val();

               function stripeResponseHandler(status, response) {
					if (response.error) {
				        // Enable the submit button
				        jQuery('#payBtn').removeAttr("disabled");
				        // Display the errors on the form
				        jQuery(".payment-status").html('<p>'+response.error.message+'</p>');
				        jQuery("#responseDiv").hide();
				    } else {
				    	var form$ = jQuery("#paymentFrm");
				        // Get token id
				        var token = response.id;
				        // Insert the token into the form
				        const tokens = token;
				        form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
				        // Submit form to the server
				        //form$.get(0).submit();
				    }
				}
                 Stripe.createToken({
					number: card_number,
					exp_month: cc_month,
					exp_year: cc_year,
					cvc: cc_cvv,
				}, stripeResponseHandler);
      });

     //Payment after token creation
     jQuery("#paymentFrm").on('submit', function (event) {
		event.preventDefault();
		var data = new FormData(this);
		data.append("action", "get_the_payment_stripe");
		jQuery.post({
			url: the_ajax_script.ajaxurl,
			data: data,
			contentType: false,
			cache: false,
			processData: false,
			success: function (response) {
				var rep = JSON.parse(response);
				if (rep.status == '200') {
					jQuery('#SrefID').html(rep.message);
					jQuery(".DivSuccess a").attr("href", rep.receipt_url);
				} else {							
					jQuery('.DivFail').show();
				}
			},
			error: function (jqXHR, exception) {
				alert(jqXHR.responseText);
			}
		});
	});
});

Final Step – Calling an AJAX

function get_the_payment_stripe() {

	//Set stripe API key
	\Stripe\Stripe::setApiKey('sk_live_XGAcOXXXXYhXXXX7');

	//Adding customer
	$customer = \Stripe\Customer::create(array(
		'name' =>  $_POST['ref_name'],
		'description' => 'Course Payment',
		'email' => trim($_POST['ref_email']),
	        'source' => $_POST['stripeToken'], //Stripe token
	        "address" => ["city" => 'London', "country" => 'United Kingdom', "line1" => 'TMp Address', "line2" => "tmp add 2", "postal_code" => 'E14 9FJ', "state" => 'WA']
	    ));
	$orderID = rand(10000,999999);


	$itemPrice = trim($_POST['ref_amount']);
	$currency = "GBP";     
	$itemPrice = ($itemPrice*100); 
	$charge = \Stripe\Charge::create(array( 
		'customer' => $customer->id, 
		'amount'   => $itemPrice, 
		'currency' => $currency, 
		'description' => 'Course Payment by ' . $_POST['ref_name'] . ' for ' . $_POST['ref_course_name'], 
		'metadata' => array( 
			'order_id' => $orderID,
		) 
	)); 
	if ($charge) {
		$output['status'] = 200;
		$output['message'] = $charge->balance_transaction;
		$output['receipt_url'] = $charge->receipt_url;
	} else {
		$output['status'] = 401;
		$output['message'] = 'Opps! something went wrong, please contact administrator.';
	}
	echo json_encode($output);
	wp_die();
}
add_action('wp_ajax_get_the_payment_stripe', 'get_the_payment_stripe');
add_action('wp_ajax_nopriv_get_the_payment_stripe', 'get_the_payment_stripe');