Hi,
I'm trying to create a CF4 form for Joomla registration that also allows me to set up payment through Stripe (http://www.stripe.com). I think I'm close but I can't get the final step to work so I'm hoping for your guidance.
In short, there are three steps to the process:
1. CUSTOM REGISTRATION FORM
Create a custom Joomla registration form (#chronoform_Registration) that includes the fields necessary to set up payment through Stripe (card number, expiration month, expiration year, CVC). Followed the helpful tutorial to set up the base registration form, then created the credit card fields with no names to prevent those fields from getting passed to the server. No problems here.
2. ADD CUSTOM JAVASCRIPT
Add some Javascript that hijacks the SUBMIT from the #chronoform_Registration form, sends the credit card form data directly to Stripe, receives a response from Stripe in the form of a token and completes the SUBMIT with the token appended to the form data. I put the JS snippet in a custom code action triggered by the On Load event. I'm able to confirm that the token is generated, so I believe also that there are no problems here, but here's the code snippet for completeness and context.
3. INVOKE PHP CODE TO CHARGE THE USER IN STRIPE
The last step is to invoke some PHP code to charge the user (via the token) in Stripe once the form has been posted. On the assumption that the form data is submitted to the same registration page (at least that's what it looks like from the ACTION attribute), I tried putting the following PHP snippet in a custom code action in two places with no luck--with the Javascript custom code triggered by On Load, and separately in a custom code action under Joomla User Registration/On Success. Neither of them worked, was hoping you could point me in the right direction.
The PHP snippet looks like this:
Thanks in advance for your help!
I'm trying to create a CF4 form for Joomla registration that also allows me to set up payment through Stripe (http://www.stripe.com). I think I'm close but I can't get the final step to work so I'm hoping for your guidance.
In short, there are three steps to the process:
1. CUSTOM REGISTRATION FORM
Create a custom Joomla registration form (#chronoform_Registration) that includes the fields necessary to set up payment through Stripe (card number, expiration month, expiration year, CVC). Followed the helpful tutorial to set up the base registration form, then created the credit card fields with no names to prevent those fields from getting passed to the server. No problems here.
2. ADD CUSTOM JAVASCRIPT
Add some Javascript that hijacks the SUBMIT from the #chronoform_Registration form, sends the credit card form data directly to Stripe, receives a response from Stripe in the form of a token and completes the SUBMIT with the token appended to the form data. I put the JS snippet in a custom code action triggered by the On Load event. I'm able to confirm that the token is generated, so I believe also that there are no problems here, but here's the code snippet for completeness and context.
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Stripe Getting Started Form</title>
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
<!-- jQuery is used only for this example; it isn't required to use Stripe -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
// this identifies your website in the createToken call below
Stripe.setPublishableKey('MYPUBLICKEY');
function stripeResponseHandler(status, response) {
if (response.error) {
// re-enable the submit button
$('.submit-button').removeAttr("disabled");
// show the errors on the form
$(".payment-errors").html(response.error.message);
} else {
var form$ = $("#chronoform_Registration");
// 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("<input type='hidden' name='stripeToken' value='" + token + "' />");
// and submit
form$.get(0).submit();
}
}
$(document).ready(function() {
$("#chronoform_Registration").submit(function(event) {
// disable the submit button to prevent repeated clicks
$('.submit-button').attr("disabled", "disabled");
// createToken returns immediately - the supplied callback submits the form if there are no errors
Stripe.createToken({
name: $('.cardholder-name').val(),
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
return false; // submit from callback
});
});
</script>
</head>3. INVOKE PHP CODE TO CHARGE THE USER IN STRIPE
The last step is to invoke some PHP code to charge the user (via the token) in Stripe once the form has been posted. On the assumption that the form data is submitted to the same registration page (at least that's what it looks like from the ACTION attribute), I tried putting the following PHP snippet in a custom code action in two places with no luck--with the Javascript custom code triggered by On Load, and separately in a custom code action under Joomla User Registration/On Success. Neither of them worked, was hoping you could point me in the right direction.
The PHP snippet looks like this:
<?php
require './stripe/lib/stripe.php';
if ($_POST) {
Stripe::setApiKey("MYSECRETKEY");
$error = '';
$success = '';
try {
if (!isset($_POST['stripeToken']))
throw new Exception("The Stripe Token was not generated correctly");
Stripe_Charge::create(array("amount" => 1000,
"currency" => "usd",
"card" => $_POST['stripeToken']));
$success = 'Your payment was successful.';
}
catch (Exception $e) {
$error = $e->getMessage();
}
}
?>Thanks in advance for your help!