Tag: Braintree

Braintree Hosted Fields integration with Custom Stylesheet(css) and validation

Braintree hosted field integration offer great flexibility in customization of payment form design with custom style sheet (css) and validation error handling. You can change complete look and feel of your payment form as per site theme with hosted fields solution and it being so easy to do.

We will have example of custom design of payment form below in that we added auto payment method detection logic with braintree on the basis of card number as well as added error handing style on form fields.

With this script you can handle/ Manage full form validation with braintree internal card validation too.

Custom design mock-up :

Braintree-Hosted-Fields-custom-css-validation-Demo

Validation error handling :

Braintree-Hosted-Fields-Demo-custom-validation-style

You can edit the all style content in below script as per your requirement-

 

hosted_field_style.css

 

hosted_field_style.js

 

You can download full script from here.

For any queries regarding above script put comments below or reach me vie mail  – sagarsdeshmukh91@gmail.com

Simple Braintree (PayPal) Payment gateway integration in PHP with DEMO Examples

ilovephp.net

Are you looking for Payment gateway which suites for your website as well as mobile app platform?

Then braintree makes your work much easier. It’s very simple, easier and quick to integrate using Braintree SDK.

Few important point need to consider while proceed to start on Braintree integration-

  1. PHP version of your server
  2. Braintree offer 2 ways API integration
    • Drop-in UI
    • Custom Integration

1. Depending on you server PHP version you can choise Braintree SDK –

Currently availble latest braintree SDK is (braintree-php-3.9.0) which requires PHP version >= 5.4.0 (https://developers.braintreepayments.com/client_libraries/php/braintree-php-3.9.0.tgz)
If your server runs on PHP version which is < 5.4.0?, don’t worry we have work arround for this issue, you can use (braintree_php-2.40.0) Braintree SDK. (https://codeload.github.com/braintree/braintree_php/zip/2.40.0)

2.a Drop-in UI
– Braintree’s Drop-in UI offers a complete, ready-made payment UI for a quick and easy way to accept payments. It’s equally as easy to maintain PCI compliance with Drop-in; it is eligible for SAQ A since Braintree hosts the form that captures customer payment information.

The UI includes a card entry form and, if enabled, PayPal/Venmo buttons (Venmo only on mobile). When a user completes the UI, your client code obtains a payment method nonce for use on your server.

The Drop-in UI is the quickest way to start accepting payments.    Considering security of customer credit card data handing at server end, the Drop-in UI is best choise. In drop in UI you will deal with only a single token (payment_method_nonce) which communicate from website client to website server and then website server to Brintree server.

2.b Custom Integration
In Custom integration, you can create your own payment form with custom colors and layout and collect the customer information before submit to payment gateway. If you need payment form with  multilingual support then you can use custom Brintree API integration. In custom Braintree integration you need more developer efferts compare to Drop in UI.

Ref. Link : https://developers.braintreepayments.com/guides/drop-in/javascript/v2

Before proceed for Braintree API integration, we need to sign up for Braintree SDK. Which is free of cost for everyone.
Follow the below link to Sign up to Braintree SDK.
https://www.braintreepayments.com/get-started

After successfull signup we will get –

Merchant ID: xxxxxxx
Public Key: xxxxxxxx
Private Key: xxxxxxxxxxxxxxx

Below are the 3 demo script of Drop-in UI, Hosted field and custom integration of Braintree Gateway API’s –

  1. Braintree – Payment Gateway integration (Drop-in UI) example :

 

2.  Braintree – Payment Gateway integration (Hosted Fields) example :

 

3.  Braintree – Payment Gateway Custom integration example :

 

Braintree Payment Gateway integration with 3D secure in Drop in-UI Example (Demo) :

 

Braintree – Payment Gateway integration with 3D secure (Hosted Fields) example