Paypal按钮在表单中集成

Question

我在这里陷入困境。所以问题是我有一个简单的表单，使用$_POST获取数据并将数据通过电子邮件发送到电子邮件（我使用的是PHPMailer）。现在我必须在其中集成一个Paypal按钮，以便客户端可以被重定向到Paypal页面进行支付，问题是Paypal按钮是一个表单，它有自己的action，我不知道如何以同一形式同时应用（Paypal和电子邮件）操作。有人可以在这里指导我吗？

通过电子邮件发送表单

<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 &amp; 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 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

您可以将paypal网址作为表单的操作，并在表单提交到Paypal之前使用Ajax保存或通过电子邮件发送表单数据。您还可以使用Ajax响应在提交之前准备表单，例如填补一些隐藏的字段

以下是一个例子：

<强> 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：处理Ajax请求并返回可在提交前用于操作表单的响应

<?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：在提交给paypal之前将表单数据提交到saveform.php

 $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(); 
}

除了jquery.ajax调用，您还可以使用更短的内容：

$j.post('saveform.php',$j('#myform').serialize(),myform_success,"json")

这是为了让您了解如何在一次提交操作中完成这两项操作。