Stripe PHP Elements Example V3

charge.php

<?php 
	$email = $_POST['email'];
	$phone = $_POST['phone'];
	$first_name = $_POST['fname'];
	$last_name = $_POST['lname'];

	try {
		require_once('Stripe/init.php');
		
		// Use Stripe's library to make requests...
		\Stripe\Stripe::setApiKey("sk_test_XXXXXXXXXXXXXXXXXXXXXX");
		
		$token  = $_POST['stripeToken'];
		
		
		
		$response = \Stripe\Charge::create(array(
			//'customer' => $customer->id,
			'amount' => 5000,
			'currency' => "usd",
			'source' => $token,
			// "source" => "tok_mastercard", // obtained with Stripe.js
			//"metadata" => array("order_id" => "6735")
		));
		
		//print_r($response);
		
		/*===========================
			send email
		============================*/
	
		$strTo = 'EMAIL@EXAMPLE.COM';
		$strName = $first_name . ' ' . $last_name;
		
		$strEmail = $email;
		$strPhone = $phone;

		// Uniqid Session //
		$strSid = md5(uniqid(time()));

		$strHeader = "";
		$strHeader .= "From: ".$strName."<".$strEmail.">\nReply-To: ".$strEmail."";
		$strSubject = 'Form Submission from ' . $strName;
		$strHeader .= "\nMIME-Version: 1.0\n";
		$strHeader .= "Content-Type: multipart/mixed; boundary=\"".$strSid."\"\n\n";
		$strHeader .= "This is a multi-part message in MIME format.\n";
		$strHeader .= "--".$strSid."\n";
		$strHeader .= "Content-type: text/html; charset=utf-8\n";
		$strHeader .= "Content-Transfer-Encoding: 7bit\n\n";

		$strHeader .= "Name: \n";
		$strHeader .= $strName."\n\n";
		$strHeader .= "Email: \n";
		$strHeader .= $strEmail."\n\n";
		$strHeader .= "Phone: \n";
		$strHeader .= $strPhone."\n\n";
		
		$flgSend = mail("$strTo", "$strSubject", $strHeader);  // @ = No Show Error //
		
		if($flgSend) {
			
			$clientHeader = "";
			$clientHeader .= "From: " . "NAME_HERE" . "<" . "REPLYTO@EXAMPLE.COM" . ">\n";
			$clientHeader .= "Reply-To: " . "c@chrishixson.com" . "\n";
			
			$clientSubject = 'Thank you, ' . $strName . ' for your purchase of XXXXXXXXXXXXXXX.';
			
			$clientHeader .= "\nMIME-Version: 1.0\n";
			$clientHeader .= "Content-Type: multipart/mixed; boundary=\"".$strSid."\"\n\n";
			$clientHeader .= "This is a multi-part message in MIME format.\n";
			$clientHeader .= "--".$strSid."\n";
			$clientHeader .= "Content-type: text/html; charset=utf-8\n";
			$clientHeader .= "Content-Transfer-Encoding: 7bit\n\n";
			
			$clientHeader .= "Congrats, " . $strName . " paid $XX.00 to XXXX for XXXXXXXXXXXXXXXXXXXX!" . "\n\n";
			$clientHeader .= "Name: \n";
			$clientHeader .= $strName."\n\n";
			$clientHeader .= "Email: \n";
			$clientHeader .= $strEmail."\n\n";
			$clientHeader .= "Phone: \n";
			$clientHeader .= $strPhone."\n\n";
			
			$emailtoClient = mail($strEmail, "$clientSubject", $clientHeader); 
			
			header("Location: https://XXXXXXXX.com/thank-you");
			die();

		} else {
			echo "Cannot send mail.";
		}
	  
	  
	} catch(\Stripe\Error\Card $e) {
		// Since it's a decline, \Stripe\Error\Card will be caught
		$body = $e->getJsonBody();
		$err  = $body['error'];

		print('Status is:' . $e->getHttpStatus() . "\n");
		print('Type is:' . $err['type'] . "\n");
		print('Code is:' . $err['code'] . "\n");
		// param is '' in this case
		print('Param is:' . $err['param'] . "\n");
		print('Message is:' . $err['message'] . "\n");
	} catch (\Stripe\Error\RateLimit $e) {
		// Too many requests made to the API too quickly
		 echo "Too many requests sent to Stripe's API too quickly";
	} catch (\Stripe\Error\InvalidRequest $e) {
		// Invalid parameters were supplied to Stripe's API
		print_r($response);
		//echo ("test");
		echo " Invalid parameters were supplied to Stripe's API";
	} catch (\Stripe\Error\Authentication $e) {
		// Authentication with Stripe's API failed
		// (maybe you changed API keys recently)
		echo " Authentication with Stripe's API failed";
	} catch (\Stripe\Error\ApiConnection $e) {
		// Network communication with Stripe failed
		echo " Network communication with Stripe failed";
	} catch (\Stripe\Error\Base $e) {
		// Display a very generic error to the user, and maybe send
		// yourself an email
		echo "You have encountered an error!";
	} catch (Exception $e) {
		// Something else happened, completely unrelated to Stripe
		 echo "Error: Something else happened, completely unrelated to Stripe";
	}	
	
	?>

form.php

<form action="<?php echo get_stylesheet_directory_uri(); ?>/charge.php" method="POST" id="payment-form">
		
	<!-- //Header -->
	<!--<div class="form-header"><p>Powered by Stripe</p></div>-->
	<span  id="card-errors" class="payment-errors" style="color: red; font-size: 22px; "></span>

	<!-- // First and Last Name -->
	<div class="form-row left"><label for="firstname" class="next-line">First Name</label><input type="text" name="fname" value="<?php ( isset( $_POST['fname'] ) ? $first_name : null ) ?>"></div>
	<div class="form-row right"><label for="lastname" class="next-line">Last Name</label><input type="text" name="lname" value="<?php ( isset( $_POST['lname'] ) ? $last_name : null ) ?>"></div>

	<!-- //Email -->
	<div><label for="email">Email <strong>*</strong></label><input type="text" name="email" value="<?php ( isset( $_POST['email'] ) ? $email : null ) ?>"></div>
	<!-- //Phone-->
	<div><label for="phone">Phone</label><input type="tel" name="phone" value="<?php ( isset( $_POST['phone'] ) ? $phone : null ) ?>"></div>

	<div id="card-element">
	  <!-- a Stripe Element will be inserted here. -->
	</div>

	<!--Submit-->
	<button type="submit" id="payment-button">Register</button>


</form>

stripe.js

// Stripe API Key
var stripe = Stripe('pk_test_XXXXXXXXXXXXXXXXXXXXXXXX');
var elements = stripe.elements();
// Custom Styling
var style = {
    base: {
        color: '#32325d',
        lineHeight: '24px',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
            color: '#aab7c4'
        }
    },
    invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
    }
};

// Create an instance of the card Element
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');

    if (event.error) {
        displayError.textContent = event.error.message;
    } else {
        displayError.textContent = '';
    }
});


// Handle form submission
var form = document.getElementById('payment-form');

form.addEventListener('submit', function(event) {
    event.preventDefault();

    stripe.createToken(card).then(function(result) {
        if (result.error) {
            // Inform the user if there was an error
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
        } else {
            stripeTokenHandler(result.token);
        }
    });
});


// Send Stripe Token to Server
function stripeTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    var form = document.getElementById('payment-form');

    // Add Stripe Token to hidden input
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);

    // Submit form
    form.submit();
}