Braintree託管字段集成

我想在我的註冊表單上設置Braintree託管字段。但是這些領域之間存在巨大的差距，而且看起來並不正確。我嘗試過使用braintree文檔和指南，但它們非常含糊。Braintree託管字段集成

我會認爲自己是一箇中級網站開發人員，並會說我對php，html和css有很好的瞭解。我對JavaScript有一點理解，但可以稍微使用它，但不能像PHP那樣理解。

請問您是否正確地指出我的付款頁面正確？我需要的元素看起來像註冊頁面的前2個部分..

請注意表格尚未提交，我仍在工作的外觀和感覺。但一旦braintree被集成，它只是捕獲表單數據並將其提交給數據庫。

這裏是鏈接到窗體：下面http://www.mcr-qr-time.com/registration-form/register.html?plan=1

，看代碼：（我已經編輯了API密鑰）

<?php 
$plan = $_GET['plan']; 
if($plan == "1"){ 
$amount = "4.99"; 
} 
if($plan == "2"){ 
$amount = "14.99"; 
} 
if($plan == "3"){ 
$amount = "34.99"; 
} 
require_once 'braintree-php-3.9.0/lib/Braintree.php'; 

Braintree_Configuration::environment('production'); 
Braintree_Configuration::merchantId('#'); 
Braintree_Configuration::publicKey('#'); 
Braintree_Configuration::privateKey('#'); 
if(isset($_POST['submit'])){ 
    /* process transaction */ 
    $result = Braintree_Transaction::sale(array(
    'amount' => $amount, 
    'creditCard' => array(
    'number' => '(dont know what to do here)', 
    'expirationDate' => '(dont know what to do here)' 
    ) 
)); 

if ($result->success) { 
    print_r("success!: " . $result->transaction->id); 
    } else if ($result->transaction) { 
    print_r("Error processing transaction:"); 
    print_r("\n code: " . $result->transaction->processorResponseCode); 
    print_r("\n text: " . $result->transaction->processorResponseText); 
    } else { 
     print_r("Validation errors: \n"); 
     print_r($result->errors->deepAll()); 
    } 
} 

$clientToken = Braintree_ClientToken::generate(); 

?> 
<!DOCTYPE html> 
<html lang="en"> 

    <head> 

     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Registration form</title> 

     <!-- CSS --> 
     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"> 
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css"> 
     <link rel="stylesheet" href="assets/css/form-elements.css"> 
     <link rel="stylesheet" href="assets/css/style.css"> 

     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
     <!-- WARNING: Respond.js doesnt work if you view the page via file:// --> 
     <!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
     <![endif]--> 

     <!-- Favicon and touch icons --> 
     <link rel="shortcut icon" href="//www.mcr-qr-time.com/img/member-1.png"> 
     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> 
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> 
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> 
     <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> 

     <style> 
.img-circle { 
    border-radius: 50%; 
} 
</style> 

    </head> 

    <body> 
<div class="contain"> 
     <!-- Top menu --> 
     <nav class="navbar navbar-inverse navbar-no-bg" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-1"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="../index.html"><h1 class="navbar-brand">MCR Qr Time</h1></a> 
       </div> 
       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="collapse navbar-collapse" id="top-navbar-1"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li> 

          <span class="li-text"> 
           Return to homepage: 
          </span> 
          <span class="li-social"> 
           <a href="//mcr-qr-time.com"><i class="fa fa-home"></i></a> 
          </span> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

     <!-- Top content --> 
     <div class="top-content"> 

      <div class="inner-bg"> 
       <div class="container"> 
        <div class="row"> 
        <br><br> 
         <div class="col-sm-8 col-sm-offset-2 text"> 

          <div class="description"> 
           <p> 

           </p> 
          </div> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-6 col-sm-offset-3 form-box"> 

          <form role="form" action="register.php(not set up yet)" method="post" class="registration-form" id="form"> 

           <fieldset> 
            <div class="form-top"> 
             <div class="form-top-left"> 
             <h1><strong>Registration Form</strong></h1><br> 
              <h3>Step 1/3</h3> 
              <p>Please fill out this form and once you have paid and confirmed your email you will be able to log in to your dashboard.</p> 
             </div> 
             <div class="form-top-right"> 
              <img class="img-circle" src="//www.mcr-qr-time.com/img/member-1.png" width="100" height="100"> 
             </div> 
            </div> 
            <div class="form-bottom"> 
             <div class="form-group"> 
              <label class="sr-only" for="form-first-name">First name</label> 
              <input type="text" name="form-first-name" placeholder="First name..." class="form-first-name form-control" id="fname"> 
             </div> 
             <div class="form-group"> 
              <label class="sr-only" for="form-last-name">Last name</label> 
              <input type="text" name="form-last-name" placeholder="Last name..." class="form-last-name form-control" id="sname"> 
             </div> 
             <div class="form-group"> 
              <label class="sr-only" for="form-company">Company</label> 
              <input type="text" name="form-company" placeholder="company" class="form-control" id="company"> 
             </div> 
             <button type="button" class="btn btn-next">Next</button> 
            </div> 
           </fieldset> 

           <fieldset> 
            <div class="form-top"> 
             <div class="form-top-left"> 
              <h3>Step 2/3</h3> 
              <p>Set up your account:</p> 
             </div> 
             <div class="form-top-right"> 
              <i class="fa fa-key"></i> 
             </div> 
            </div> 
            <div class="form-bottom"> 
             <div class="form-group"> 
              <label class="sr-only" for="form-email">Email</label> 
              <input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email"> 
             </div> 
             <div class="form-group"> 
              <label class="sr-only" for="form-password">Password</label> 
              <input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password"> 
             </div> 
             <div class="form-group"> 
              <label class="sr-only" for="form-repeat-password">Repeat password</label> 
              <input type="password" name="form-repeat-password" placeholder="Repeat password..." 
                 class="form-repeat-password form-control" id="form-repeat-password"> 
             </div> 
             <button type="button" class="btn btn-previous">Previous</button> 
             <button type="button" class="btn btn-next">Next</button> 
            </div> 
           </fieldset> 

           <fieldset> 
            <div class="form-top"> 

             <div class="form-top-left"> 
              <h3>Step 3/3</h3> 
              <p>Subscription payment setup:</p> 
             </div> 
             <div class="form-top-right"> 
              <i class="glyphicon glyphicon-credit-card"></i> 
             </div> 
            </div> 
            <div class="form-bottom"> 
               <div class="form-group"> 
             <label for="card-number-field">Card Number</label> 
                 <div id="card-number-field"></div> 
                 </div> 
                 <div class="form-group"> 
                 <label for="security-code-field">CVV</label> 
                 <div id="security-code-field"></div> 
                 </div> 
                 <div class="form-group"> 
                 <label for="expiration-date-field">Expiration Date</label> 
                 <div id="expiration-date-field"></div> 
                 </div> 
             <button type="button" class="btn btn-previous">Previous</button> 
             <button type="submit" class="btn">Sign me up!</button> 
            </div> 
           </fieldset> 

          </form> 
          <script src="https://code.jquery.com/jquery-2.1.1.js"></script> 
          <script src="https://js.braintreegateway.com/js/braintree-2.21.0.min.js"></script> 
    <script> 
     braintree.setup('<?php print $clientToken; ?>', 'custom', { 
    id: 'form', 
    hostedFields: { 
    number: { 
     selector: '#card-number-field', 
     placeholder: 'Card Number' 
    }, 
    cvv: { 
     selector: '#security-code-field', 
     placeholder: 'CVV' 
    }, 
    expirationDate: { 
     selector: '#expiration-date-field', 
     placeholder: 'MM/YYYY' 
    } 

    } 
}); 
    </script> 
         </div> 
        </div> 
       </div> 
      </div> 

     </div> 
</div> 

     <!-- Javascript --> 
     <script src="assets/js/jquery-1.11.1.min.js"></script> 
     <script src="assets/bootstrap/js/bootstrap.min.js"></script> 
     <script src="assets/js/jquery.backstretch.min.js"></script> 
     <script src="assets/js/retina-1.1.0.min.js"></script> 
     <script src="assets/js/scripts.js"></script> 

     <!--[if lt IE 10]> 
      <script src="assets/js/placeholder.js"></script> 
     <![endif]--> 

    </body> 

</html>

來源

2016-03-04 Shane Buckley

要到達最後一頁，只需在字段中輸入任何字母，以便您可以繼續。 –

我也上傳了braintree-php-3.9.0.tar.gz並將其解壓縮到我的主目錄中，還有其他什麼我需要這樣做？ –

您提供的鏈接與您發佈的代碼示例不符。具體的輸入標籤，而不是divs，並且不存在託管域代碼。 – pblesi

形式使用時，託管領域或嵌入式，布倫特裏地方隱藏現時輸入，這可能是一些使用的人的，你只需要調用它在你的表單處理腳本象下面這樣：

<?php 

require_once 'braintree-php-3.9.0/lib/Braintree.php'; 

Braintree_Configuration::environment('production'); 
Braintree_Configuration::merchantId('#'); 
Braintree_Configuration::publicKey('#'); 
Braintree_Configuration::privateKey('#'); 

$paymentMethodNonce = $_POST['payment_method_nonce']; 

$result = Braintree_Transaction::sale([ 
    'amount' => '10.00', 
    'paymentMethodNonce' => $paymentMethodNonce, 
    'options' => [ 
    'submitForSettlement' => True 
    ] 
]); 

?>

來源

2016-03-10 17:50:29

'$ paymentMethodToken'與$ paymentMethodNonce不同。 Braintree付款方式令牌是長壽命令牌，您可以使用它來引用保管庫中存儲的原始付款方式。付款方式隨機數是用於標識付款方式的一次性使用標識符，直到它存儲在保險箱中。 – pblesi

_{全面披露：我在布倫特裏工作。如果您還有其他問題，請隨時聯繫我們的support團隊。}

Braintree使用Drop-in或Hosted Fields爲您提供一個代表用戶付款方式的隨機數。這可以減輕您不必處理信用卡號碼和到期日期信息以及隨之而來的PCI負擔。下面是使用隨機數與Braintree_Transaction::sale的例子：

$result = Braintree_Transaction::sale([ 
    'amount' => '10.00', 
    'paymentMethodNonce' => nonceFromTheClient, 
    'options' => [ 
    'submitForSettlement' => True 
    ] 
]);

參觀Braintree_Transaction::sale reference有關處理隨機數的更多信息。

來源

2016-03-10 16:00:39 pblesi

Braintree託管字段集成

回答

相關問題