How to implement Braintree One Touch Payment? [Demo]

Are you planning to integrate Braintree One Touch Payment in our website to make the payment process easier for customers?

Are you a developer and finding the demo to integrate Braintree One Touch Payment? You are at right place…

Braintree One Touch Payment offers a new way of payment, which remembers your payment credentials for 6 months, which provides easy payments.

Braintree can be implemented by using PHP, HTML and JQuery. You can also integrate Braintree with your applications.

Steps to integrate Braintree One Touch Payment:

  1. Login to your Braintree Account, navigate to Account -> My User.
  2. To get your Merchant ID, private key and Public key, click on View Authorizations.
  3. Copy all the keys on Notepad, you will need it later.
  4. Download PHP SDK for Braintree from here

    PHP SDK for Braintree

  5. Move the downloaded library to your web root directory.
  6. Next, make index.html file with the following code:

    <style>
    .hosted-field {
      height: 50px;
      box-sizing: border-box;
      width: 100%;
      padding: 12px;
      display: inline-block;
      box-shadow: none;
      font-weight: 600;	
      font-size: 14px;
      border-radius: 6px;
      border: 1px solid #dddddd;
      line-height: 20px;
      background: #fcfcfc;
      margin-bottom: 12px;
      background: linear-gradient(to right, white 50%, #fcfcfc 50%);
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 300ms ease-in-out;
    }
    
    .hosted-fields--label {
      font-family: courier, monospace;
      text-transform: uppercase;
      font-size: 14px;
      display: block;
      margin-bottom: 6px;
    }
    
    .button-container {
      display: block;
      text-align: center;
    }
    
    .button {
      cursor: pointer;
      font-weight: 500;
      line-height: inherit;
      position: relative;
      text-decoration: none;
      text-align: center;
      border-style: solid;
      border-width: 1px;
      border-radius: 3px;
      -webkit-appearance: none;
      -moz-appearance: none;
      display: inline-block;
    }
    
    .button--small {
      padding: 10px 20px;
      font-size: 0.875rem;
    }
    
    .button--green {
      outline: none;
      background-color: #64d18a;
      border-color: #64d18a;
      color: white;
      transition: all 200ms ease;
    }
    
    .button--green:hover {
      background-color: #8bdda8;
      color: white;
    }
    
    .braintree-hosted-fields-focused {
      border: 1px solid #64d18a;
      border-radius: 1px;
      background-position: left bottom;
    }
    
    .braintree-hosted-fields-invalid {
      border: 1px solid #ed574a;
    }
    
    .braintree-hosted-fields-valid {
    }
    
    #cardForm {
      max-width: 50.75em;
      margin: 0 auto;
      padding: 1.875em;
    }
    </style>
    
    <form method="post" action="http://example.com/checkout.php" id="checkout">
      <div id="payment-form"></div>
     
      <input type="submit" value="Pay $10">
    </form>
    
    <script src="https://js.braintreegateway.com/js/braintree-2.30.0.min.js"></script>
    <script>
    // We generated a client token for you so you can test out this code
    // immediately. In a production-ready integration, you will need to
    // generate a client token on your server (see section below).
    var clientToken = "sandbox_3rdpb6mz_5jrpw4tgn9zdbp2s";
    
    braintree.setup(clientToken, "dropin", {
      container: "payment-form"
    });
    </script>
    

  7. Now make another file named “checkout.php” as shown:

    <?php require_once 'braintree/lib/Braintree.php'; Braintree_Configuration::environment('sandbox'); Braintree_Configuration::merchantId(‘MERCHANT ID’); Braintree_Configuration::publicKey(‘PUBLIC KEY’); Braintree_Configuration::privateKey(‘PRIVATE KEY’); $result1 = Braintree_PaymentMethod::create([ 'customerId' => 'customertest12',
        'paymentMethodNonce' => $_POST["payment_method_nonce"]
    ]);
     
    $result = Braintree_Transaction::sale([
      'amount' => '10.00',
      'paymentMethodToken' => $result1->paymentMethod->token,
      'options' => [
        'storeInVaultOnSuccess' => true,
      ]
    ]);
    
    if ($result->success) {
    	echo "
    <pre>";
    	print_r($result);
    	exit;
        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());
    }
    
    ?>
    

  8. Replace the Merchant ID, Private key and public key in your checkout.php file and run your application in your browser.
  9. You will see the screen as shown below:Braintree One Touch Demo
  10. After filling up the data, you can click on Pay $10 button and you will get success response message from Braintree as shown below:Braintree One Touch Demo Output

It’s complete 🙂

If you are stilling facing any issue write your question in comment box, I will try my best to solve your issues.

Happy Coding!!

Leave a Reply