Braintree Hosted Fields Integration

Question

I am trying to setup Braintree hosted fields on my registration form. But the fields have massive gaps between them and it just doesn't look right. I've tried using the braintree documentation and guides but they are extremely vague.

I would consider myself a intermediate web developer and would say I have a good knowledge of php, html and css. I have little understanding of javascript but can use it a little bit but not where near as good an understanding as I have for PHP.

Could you guy's point me in the right direction to get the payment page looking right? I need the elements to look like the first 2 parts of the registration page..

Please note the form does not submit yet, I'm still working on the look and feel. But once braintree is integrated its just a matter of capturing the form data and submitting it to the database.

Here is the link to the form: http://www.mcr-qr-time.com/registration-form/register.html?plan=1

and see code below:(I have API keys edited out)

     $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("
  code: " . $result->transaction->processorResponseCode);
    print_r("
  text: " . $result->transaction->processorResponseText);
    } else {
      print_r("Validation errors: 
");
      print_r($result->errors->deepAll());
    }
}

$clientToken = Braintree_ClientToken::generate();

?>



    

        
        
        
        Registration form

        
        
        
        
        
        

        
        
        

        
        
        
        
        
        

        

    

    

        
        
            
                
                    
                    MCR Qr Time
                
                
                
                    
                        

                            
                                Return to homepage: 
                             
                            
                                 
                            
                        
                    
                
            
        

        
        

            
                
                    
                    


                        

                            
                                

                                
                            
                        
                    
                    
                        

                            

                                
                                    
                                        
                                        Registration Form


                                            Step 1 / 3
                                            Please fill out this form and once you have paid and confirmed your email you will be able to log in to your dashboard.
                                        
                                        
                                            
                                        
                                    
                                    
                                        
                                            First name
                                            
                                        
                                        
                                            Last name
                                            
                                        
                                        
                                            Company
                                            
                                        
                                        
                                    
                                

                                
                                    
                                        
                                            Step 2 / 3
                                            Set up your account:
                                        
                                        
                                            
                                        
                                    
                                    
                                        
                                            Email
                                            
                                        
                                        
                                            Password
                                            
                                        
                                        
                                            Repeat password
                                            
                                        
                                        
                                        
                                    
                                

                                
                                    

                                        
                                            Step 3 / 3
                                            Subscription payment setup:
                                        
                                        
                                            
                                        
                                    
                                    
                                                
                                        Card Number
                                                        
                                                        
                                                        
                                                        CVV
                                                        
                                                        
                                                        
                                                        Expiration Date

Shane Buckley · Accepted Answer

This may be of some use to someone, when using hosted fields or drop-in, Braintree place a hidden nonce input in the form, you just need to call it in your form handling script like below:

 '10.00',
  'paymentMethodNonce' => $paymentMethodNonce,
  'options' => [
    'submitForSettlement' => True
  ]
]);

?>

Braintree Hosted Fields Integration

Answers (2)

Related Questions