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');