jimboobrien
3/25/2016 - 12:42 AM
This is a few code snippets that will make a custom form with variable amounts for the Stripe API. It sends a token safely to charge.php and
This is a few code snippets that will make a custom form with variable amounts for the Stripe API. It sends a token safely to charge.php and then sends the data to both Stripe via API, but also sends the user an email address letting them know a transaction has been processed. The Customer data in Stripe can only be found in the Description. You will need to include the jquery V2 library from Stripe, and also download the Stripe library and put it in the same folder as charge.php.
// This identifies your website in the createToken call below
Stripe.setPublishableKey('pk_live_XXXXXXXXXXXXXXXXXXXXXXXX');
var stripeResponseHandler = function(status, response) {
var $form = jQuery('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// token contains id, last4, and card type
var token = response.id;
// Insert the token into the form so it gets submitted to the server
$form.append(jQuery('<input type="hidden" name="stripeToken" />').val(token));
// and re-submit
$form.get(0).submit();
}
};
jQuery(function($) {
$('#payment-form').submit(function(event) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
<form action="charge.php" method="POST" id="payment-form">
<div class="form-header">
<p>Pay your bill online!</p>
</div>
<span class="payment-errors" style="color: red; font-size: 22px; "></span>
<span class="next-line" >Name</span>
<input name="txtFormName" type="text">
<span class="next-line">Email</span>
<input name="txtFormEmail" type="text">
<span class="next-line">Amount</span><i>Please enter dollar amount.</i> <input name="payamount" class="form-control" type="number" id="custom-donation-amount" placeholder="10.00" min="0" step="10.00"/>
<div class="form-row-one">
<label>
<span class="next-line">Card Number</span>
<input type="text" size="20" data-stripe="number"/>
</label>
</div>
<div class="form-row left">
<label>
<span class="next-line">CVC</span>
<input type="text" size="4" data-stripe="cvc"/>
</label>
</div>
<div class="form-row right">
<label>
<span class="next-line">Expiration (MM/YYYY)</span>
</label><br>
<input type="text" size="2" data-stripe="exp-month"/>
<span> / </span>
<input type="text" size="4" data-stripe="exp-year"/>
</div>
<button type="submit">Submit Payment</button>
</form>#payment-form {
background: #f5f5f7;
-webkit-box-shadow: 0 5px 30px rgba(0,0,0,0.6);
-moz-box-shadow: 0 5px 30px rgba(0,0,0,0.6);
-ms-box-shadow: 0 5px 30px rgba(0,0,0,0.6);
-o-box-shadow: 0 5px 30px rgba(0,0,0,0.6);
box-shadow: 0 5px 30px rgba(0,0,0,0.6);
margin: 20px auto 50px;
display: block;
max-width: 400px;
text-align: center;
border-radius: 15px;
padding-bottom: 40px;
}
#payment-form .form-header {
background: #f0f0f2;
background-image: -webkit-linear-gradient(#f5f5f7,#e9e9ea);
background-image: -moz-linear-gradient(#f5f5f7,#e9e9ea);
background-image: -ms-linear-gradient(#f5f5f7,#e9e9ea);
background-image: -o-linear-gradient(#f5f5f7,#e9e9ea);
background-image: linear-gradient(#f5f5f7,#e9e9ea);
border-top: 1px solid #fff;
border-bottom: 1px solid #d3d3d4;
-webkit-border-radius: 7px 7px 0 0;
-moz-border-radius: 7px 7px 0 0;
-ms-border-radius: 7px 7px 0 0;
-o-border-radius: 7px 7px 0 0;
border-radius: 7px 7px 0 0;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
-ms-box-shadow: 0 1px 0 #fff;
-o-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
margin-bottom: 10px;
}
#payment-form input {
color: #000;
width: 98%;
margin: 0 auto;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
-o-user-select: text;
user-select: text;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
border: 1px solid #cececf;
border-top-color: #b5b5b6;
border-bottom-color: #dededf;
-webkit-box-shadow: inset 0 1px 1px rgba(124,124,127,0.1),0 1px 0 rgba(255,255,255,0.7),0 0 4px rgba(86,149,219,0);
-moz-box-shadow: inset 0 1px 1px rgba(124,124,127,0.1),0 1px 0 rgba(255,255,255,0.7),0 0 4px rgba(86,149,219,0);
-ms-box-shadow: inset 0 1px 1px rgba(124,124,127,0.1),0 1px 0 rgba(255,255,255,0.7),0 0 4px rgba(86,149,219,0);
-o-box-shadow: inset 0 1px 1px rgba(124,124,127,0.1),0 1px 0 rgba(255,255,255,0.7),0 0 4px rgba(86,149,219,0);
box-shadow: inset 0 1px 1px rgba(124,124,127,0.1),0 1px 0 rgba(255,255,255,0.7),0 0 4px rgba(86,149,219,0);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: border-color .15s linear,box-shadow .15s linear;
-moz-transition: border-color .15s linear,box-shadow .15s linear;
-ms-transition: border-color .15s linear,box-shadow .15s linear;
-o-transition: border-color .15s linear,box-shadow .15s linear;
transition: border-color .15s linear,box-shadow .15s linear;
}
#payment-form span.next-line { display: block; }
#payment-form .form-row-one { margin: 10px auto; }
#payment-form .form-row { display: inline-block; margin: 0 auto 20px; }
#payment-form .form-row.left { width: 40%; }
#payment-form .form-row.right { width: 58%; }
#payment-form .form-row.right input { max-width: 100px; }
#payment-form i { font-size: 12px; color: #888888; display: block; }
#payment-form button {
background: #45b1e8;
background-image: -webkit-linear-gradient(#45b1e8,#3097de);
background-image: -moz-linear-gradient(#45b1e8,#3097de);
background-image: -ms-linear-gradient(#45b1e8,#3097de);
background-image: -o-linear-gradient(#45b1e8,#3097de);
background-image: -webkit-linear-gradient(#45b1e8,#3097de);
background-image: -moz-linear-gradient(#45b1e8,#3097de);
background-image: -ms-linear-gradient(#45b1e8,#3097de);
background-image: -o-linear-gradient(#45b1e8,#3097de);
background-image: linear-gradient(#45b1e8,#3097de);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
text-shadow: 0 -1px 0 rgba(46,86,153,0.3);
-webkit-box-shadow: 0 1px 0 rgba(46,86,153,0.15),0 0 4px rgba(86,149,219,0),inset 0 2px 0 rgba(41,102,20,0);
-moz-box-shadow: 0 1px 0 rgba(46,86,153,0.15),0 0 4px rgba(86,149,219,0),inset 0 2px 0 rgba(41,102,20,0);
-ms-box-shadow: 0 1px 0 rgba(46,86,153,0.15),0 0 4px rgba(86,149,219,0),inset 0 2px 0 rgba(41,102,20,0);
-o-box-shadow: 0 1px 0 rgba(46,86,153,0.15),0 0 4px rgba(86,149,219,0),inset 0 2px 0 rgba(41,102,20,0);
box-shadow: 0 1px 0 rgba(46,86,153,0.15),0 0 4px rgba(86,149,219,0),inset 0 2px 0 rgba(41,102,20,0);
font-weight: bold;
font-size: 17px;
color: #fff;
border: none !important;
padding: 8px 20px;
display: block;
margin: 0 auto 20px;
}
/**
* Proper way to enqueue JS and IE fixes as of Mar 2015 in WordPress
* if implementing this Stripe payment into WordPress.
*/
function octane_bootstrap_js() {
wp_enqueue_script( 'octane_custom_js', get_stylesheet_directory_uri() . '/js/stripe-php-js.js', array(), '', true );
wp_enqueue_script( 'stripe_js', 'https://js.stripe.com/v2', array(), '', false );
} //end function
add_action( 'wp_enqueue_scripts', 'octane_bootstrap_js' );
<?php
try {
require_once('Stripe/lib/Stripe.php');
Stripe::setApiKey("sk_live_XXXXXXXXXXXXXXXXXXXXXXXX");
$token = $_POST['stripeToken'];
$form_amount = $_POST['payamount'];
$strName = $_POST["txtFormName"];
$strEmail = $_POST["txtFormEmail"];
$stripe_desc = "Payment for YOUR COMPANY NAME Bill from: ".$strName;
$charge = Stripe_Charge::create(array(
"amount" => $form_amount*100,
"currency" => "usd",
"card" => $token,
"description" => $stripe_desc,
"customer" => $customer->id
));
$strTo = 'user@example.com'; //$_POST["txtTo"];
$strSubject = 'BUSINESS NAME Payment'; // $_POST["txtSubject"];
//*** Uniqid Session ***//
$strSid = md5(uniqid(time()));
$strHeader = "";
$strHeader .= "From: ".$strName."<".$strEmail.">\nReply-To: ".$strEmail."";
$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 .= $strName." has made a payment! In the amount of $" .$form_amount.".00. Log into your Stripe account to confirm.\n\n";
$strHeader .= "Name: \n";
$strHeader .= $strName."\n\n";
$strHeader .= "Email: ";
$strHeader .= $strEmail."\n\n";
$strHeader .= "Amount: \n";
$strHeader .= "$" .$form_amount.".00 \n\n";
//$strHeader .= "Email: \n";
//$strHeader .= $strEmail."\n\n";
$strHeader .= $strMessage."\n\n";
$flgSend = mail("$strTo", "$strSubject", $strHeader); // @ = No Show Error //
if($flgSend)
{
$messageToClient = '';
$messageToClient .= "Thank you for your payment of $" .$form_amount." \n\n";
$emailtoClient = mail($strEmail, "$strSubject", $messageToClient);
} else { echo "Cannot send mail."; }
header("Location: https://example.com/thank-you");
die();
}
catch(Stripe_CardError $e) {
echo "You have encountered an error! Please try another card or contact your bank. ";
var_dump($e->getMessage());
}
//catch the errors in any way you like
catch (Stripe_InvalidRequestError $e) {
// Invalid parameters were supplied to Stripe's API
echo " Invalid parameters were supplied to Stripe's API";
} catch (Stripe_AuthenticationError $e) {
// Authentication with Stripe's API failed
// (maybe you changed API keys recently)
echo " Authentication with Stripe's API failed";
} catch (Stripe_ApiConnectionError $e) {
// Network communication with Stripe failed
echo " Network communication with Stripe failed";
} catch (Stripe_Error $e) {
// Display a very generic error to the user, and maybe send
// yourself an email
echo "You have encountered an error!";
} catch (Exception $e) {
echo "Error: Something else happened, completely unrelated to Stripe";
// Something else happened, completely unrelated to Stripe
}
?>