Paypal button Integration within a form - php

Question

I am stuck in bit of a situation here. So the issue is that I have a simple form which gets the data using $_POST and emails the data to a email (I am using PHPMailer). Now I have to integrate a Paypal button in it so that the client could be redirected to the Paypal page for payment, the issue is that the Paypal button is a form and it has its own action and I am not sure how to apply both (Paypal and Emailing) actions together in the same form. Can someone please guide me here?
Emailing Form:
<form action="process-email.php" class="floatfix" id="card-form" method="post" data-message="Thank you for purchasing. We will contact you via email." enctype="multipart/form-data">
<div class="flt-l left">
<div class="field-container">
<div class="field-number">1</div>
<h3 class="txt-a-c h3-title"><img src="img/icons/clipboard.png" alt="">Place your Order</h3>
<div class="form-panels floatfix clr-b">
<div class="flt-l left-side-panel">
<div id="form-contact-details-container" class="form-contact-details-container">
<input type="text" tabindex="10" required value="Full Name" name="full-name">
<input type="text" tabindex="20" required value="Office #" name="office">
<input type="text" tabindex="30" required value="Mobile #" name="mobile">
<input type="text" tabindex="40" required value="Email" name="email">
<input type="text" tabindex="50" required value="Website" name="website">
</div>
<div class="card-styles floatfix">
Card Style
</div>
<div class="card-shots">
<div class="card-shot pos-r floatfix">
<input type="radio" name="body_shots" id="card-shot-none" data-card-shot-type="none" value="Full Shot" checked class="active">
<span class="radio">No <br>Shot</span>
<img src="img/card_empty.png" alt="" class="card-empty-img">
<div class="check-mark"><img src="img/icons/check_round.png" alt=""></div>
</div>
<div class="card-shot pos-r floatfix">
<input type="radio" name="body_shots" id="card-shot-half" data-card-shot-type="half" value="Half Shot">
<span class="radio">Half Body <br>Shot</span>
<img src="img/card_half_pic.png" alt="">
<div class="check-mark"><img src="img/icons/check_round.png" alt=""></div>
</div>
<div class="card-shot pos-r floatfix">
<input type="radio" name="body_shots" id="card-shot-full" data-card-shot-type="full" value="Full Shot">
<span class="radio">Full Body <br>Shot</span>
<img src="img/card_full_pic.png" alt="">
<div class="check-mark"><img src="img/icons/check_round.png" alt=""></div>
</div>
</div>
<div id="upload-container" class="noselect notify-hover upload-container">
<div class="inner">
<div id="upload-preview" class="page-cover upload-img-container"></div>
<div class="upload-text">Upload Your Photo <span class="camera"></span></div>
<input id="upload-file" class="upload-file" type="file" name="upload-file[]" multiple="multiple">
</div>
<div class="notify">
<h6 class="fnt-w-b">Only Upload files less than 2mb.</h6>
<p>Please allow 2 Business Days for Photo Filtering and Processing.</p>
</div>
</div>
<div class="pos-r notify-hover shipping-address">
<input id="shipping-address-1" type="text" placeholder="Shipping Address" tabindex="60" name="shipping_address_1">
<span id="shipping-address-1-holder" class="pos-a hidden"></span>
<input id="shipping-address-2" type="text" tabindex="70" name="shipping_address_2">
<span id="shipping-address-2-holder" class="pos-a hidden"></span>
<div class="notify">
<p>Carefully Fill this as we do not offer refund on lost packages.</p>
</div>
</div>
</div>
<div class="flt-r right-side-panel">
<span class="noselect crs-p card-flipper">See <span data-before="Back" data-after="Front"></span> of Card</span>
<div class="pos-r">
<div id="the-card" class="noselect card-preview-container">
<div class="card card-front">
<div class="full-before full-after card-pic"></div>
<div id="card-detail-preview-container" class="card-detail-preview noselect crs-d"></div>
</div>
<div class="card card-back"><img src="img/card_back.png" alt=""></div>
</div>
</div>
</div>
</div>
<div class="submit-button-container">
<input type="submit" value="" id="card-form-submit">
<div class="submit-button">
<h2 class="txt-t-u">$125 - Order Now</h2>
<div>1000 Business Cards</div>
</div>
<img src="img/paypal.png" alt="" class="paypal">
<p class="small txt-a-c">You will be takend to Paypal for payment processing</p>
</div>
</div>
</div>
<div class="flt-r right">
<div class="field-container">
<div class="field-number">2</div>
<div class="checkbox-container">
<div class="checkbox">
<img src="img/icons/check.png" alt="">
</div>
<span class="label">Approve & Receive It</span>
</div>
<p class="p-1">You will receive a PDF of the final card with your processed photo.</p>
<p class="p-2">You will receive your order within 7-10 business days.</p>
</div>
</div>
</form>
PayPal Form:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="KJU58">
<input type="image" src="http://www.deadlyfishesmods.com/wp-content/uploads/2013/09/Buy-Now-Button.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
Process-email.php:
<?php
if(isset($_POST['full-name'])) {
require 'includes/PHPMailerAutoload.php';
require 'includes/config.php';
$smtp_host = $config["SMTP_HOST"];
$email = $config["EMAIL"];
$email_password = $config["EMAIL_PASSWORD"];
$email_subject = $config["EMAIL_SUBJECT"];
$name = $_POST['full-name']; // required
$office = $_POST['office']; // required
$mobile = $_POST['mobile']; // required
$user_email = $_POST['email']; // required
$website = $_POST['website']; // required
$card_type = $_POST['body_shots'];
$address_1 = $_POST['shipping_address_1'];
$address_2 = $_POST['shipping_address_2'];
$email_exp = '/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message = "You have a new card order. <br/> <br/>";
$email_message .= "Name: ".clean_string($name)."<br/>";
$email_message .= "Office: ".clean_string($office)."<br/>";
$email_message .= "Mobile Number: ".clean_string($mobile)."<br/>";
$email_message .= "Email: ".clean_string($user_email)."<br/>";
$email_message .= "Website: ".clean_string($website)."<br/>";
$email_message .= "Card Type: ".clean_string($card_type)."<br/>";
$email_message .= "Address: ".clean_string($address_1) . clean_string($address_2) . "<br/>";
$mail = new PHPMailer(); // create a new object
$mail->IsSMTP(); // enable SMTP
$mail->SMTPDebug = 0; // debugging: 1 = errors and messages, 2 = messages only
$mail->SMTPAuth = true; // authentication enabled
$mail->SMTPSecure = 'ssl'; // secure transfer enabled REQUIRED for GMail
$mail->Host = "$smtp_host";
$mail->Port = 465; // or 587
$mail->IsHTML(true);
$mail->Username = "$email";
$mail->Password = "$email_password";
$mail->Subject = "$email_subject";
$mail->Body = $email_message;
$validAttachments = array();
if($card_type !== "Full Shot"){
foreach($_FILES['upload-file']['name'] as $index => $fileName) {
$filePath = $_FILES['upload-file']['tmp_name'][$index];
$validAttachments[] = array($filePath, $fileName);
}
foreach($validAttachments as $attachment) {
$mail->AddAttachment($attachment[0], $attachment[1]);
}
}
$mail->AddAddress("example#sample.com");
if(!$mail->Send()) {
echo "Mailer Error: " . $mail->ErrorInfo;
} else {
$counter = 1;
foreach($validAttachments as $attachment) {
move_uploaded_file( $attachment[0], "uploads/" . clean_string($name) . "_" . $counter . "_" . rand() . "_" . $attachment[1] );
$counter++;
}
}
}

Answer 1

You can have the paypal url as your form's action and use Ajax to save or email the form data before the form is submitted to Paypal. You can also use the Ajax response to prepare the form before submission, e.g. filling some hidden fields
Here's an example:
myform.php:
<form id="myform" method="post" action="<?php echo $paypal_url; ?>">
<input type="text" ...>
<input type="hidden" name="my-hidden-field" id="my-hidden-field" value="this is hidden">
...other form fields...
</form>
saveform.php: Processes the Ajax request and returns a response that can be used to manipulate the form before submission
<?php
if (!empty($_POST)) {
//save $_POST data to the database
//or insert your email code portion here
...
//also, fill some data as response
$response = array('my_hidden_field' => 'this is now filled in');
//next line returns the response
echo json_encode($response);
}
myform.js: Submits form data to saveform.php before submitting to paypal
$j = jQuery.noConflict();
$j(document).ready(function() {
$j('#myform').submit(submit_myform);
});
function submit_myform() {
if (!myform_is_valid()) {
window.location.href = "#myform";
return false;//prevent normal browser submission, to display validation errors
} else {
$j.ajax({
url: 'saveform.php',
type: 'POST',
data: $j(this).serialize(),
dataType:'json', //data type of Ajax response expected from server
success: myform_success //callback to handle Ajax response and submit to Paypal
});
return false;//prevent normal browser submission, since the form is submitted in the callback
}
}
function myform_is_valid() {
$valid = true;
//validate data; if there's a validation error, set $valid=false and display errors on page
...
return $valid;
}
function myform_success(response) {
//this is called whenever the ajax request returns a "200 Ok" http header
//manipulate the form as you wish
$j('#my-hidden-field').val(response.my_hidden_field);
//submit the form (to the form's action attribute, i.e $paypal_url)
document.forms['myform'].submit();
}
Instead of the jquery.ajax call you can also use the shorter:
$j.post('saveform.php',$j('#myform').serialize(),myform_success,"json")
This is to give you an idea of how you can accomplish both in one submit action.