Paypal按钮在表单中集成

时间:2022-10-14 16:32:29

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?

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

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 &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:

<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++;
        }
    }
}

1 个解决方案

#1


0  

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

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

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

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: Submits form data to saveform.php before submitting to paypal

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

Instead of the jquery.ajax call you can also use the shorter:

而不是jquery.ajax调用,你也可以使用更短的:

$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.

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

#1


0  

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

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

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

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: Submits form data to saveform.php before submitting to paypal

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

Instead of the jquery.ajax call you can also use the shorter:

而不是jquery.ajax调用,你也可以使用更短的:

$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.

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