Braintree integration - PCI Compliant - Using Hosted Fields

(Emily) #1

Hi Squizees,

Has anyone substituted the Braintree Payment Gateway fields for Braintree’s “Hosted Fields” or Drop-In UI?

I have been asked to setup a Braintree Payment Gateway – I have never used the eCommerce in Matrix before. Having gone through the tutorials my product-to-payment is working fine. I have created a Sandbox account in Braintree for testing, and have put the IDs & Keys into Matrix.

However, it occurs to me that the Matrix integration would not be category “A / A-EP” under the PCI DSS (https://www.pcisecuritystandards.org/pci_security/completing_self_assessment), since it holds & processes the fields. (“doesn’t directly receive cardholder data” being a requirement of Category A & A-EP; even though it doesn’t store it). It would thus be Category D - a lot of paperwork.

Braintree offer their Drop-In UI and Hosted Fields solutions, which are PCI A / A-EP compliant – which is ideal for this situation.

But I am having trouble getting their Drop-In or Hosted Fields to work when placed in the Braintree Payment Gateway form. (I was hoping I might be able to just replace the matrix fields with the Hosted Fields. Although I read in an old 2017 forum post that the Matrix Braintree Gateway is based off the Drop-In UI? Matrix 5.4.3.0 Released)

I am not a programmer - I am a HTML/CSS (and validity/usability/accessibility/readability/etc) person, so I am a bit out of my depth reading their documentation/tutorials, which begin with installing things. I am/was hoping this may be what is already installed into Martix as part of the Braintree asset, but when I add the JS and HTML from their example code, it doesn’t show the input fields.

If not, I will find a programmer to help me set it up the first time, so I learn how to do it. But thought if someone here has already done it, that would be good.

Thanks,
Emily

(Chiranjivi Upreti) #2

Hi Emily

You need to use this keyword %brainetree_form% in the Braintree Payment Gateway’s bodycopy content. In the frontend output this keyword will be replaced by the code required to print the Braintree drop-in payment form.

Checkout the Matrix manual for more details: https://matrix.squiz.net/manuals/e-commerce/chapters/braintree-payment-gateway

(Emily) #3

Thanks Chiranjivi. :slight_smile: Not sure how I missed that keyword in the documentation, having read through it a few times! (Sorry for the delay in reply, I work part-time so

I have put in the keyword, and removed the other code, but still no form is showing.
I tried updating the Merchant ID in the Settings screen to the Tokenisation Key – not sure if Matrix is generating the Client Token or not, so thought I’d test both ways.
(I also have the Public & Private Keys on the settings page entered).

Currently using a Sandbox Account of Braintree until we can get it working and confirm it is suitable for our needs; but this should not make a difference since I am using the Sandbox credentials.

The Braintree Payment Gateway contents now reads:

%processing_error%
$%transaction_amount% dollars are about to be debited from your card.
%braintree_form%

I am assuming that Matrix will also add in any Javascript needed for the Drop-In UI, since that is what calls the iFrame and authorisation… I think I must be missing something :thinking:
My output screen shows the transaction amount correctly, so the cart setup is feeding through. Just no payment form using %braintree_form%.

I am guessing that since Drop-In form is setup using a keyword replacement, that it won’t be possible to use the Hosted Fields (more customisable), since they have slightly different Javascript that needs calling (from their documentation) and there isn’t any setting for these in Matrix. (Which is fair enough, can’t inbuilt code for everything!)

Thanks in advance - I appreciate any help given. :slight_smile: First time setting up the eCommerce components.
Emily

(Emily) #4

Update - Braintree form keyword still isn’t working, but here is the limited code it does output:

<div id="payment_gateway_braintree_61076_payment_form_container"><input name="payment_gateway_braintree_61076_dropin" type="hidden"></div>

This suggests to me that Martrix is outputting what it thinks will work for Braintree Drop-In UI, but then perhaps the javascript isn’t happening.
I have tried with & without the braintree.js as external JS (unsure if Matrix has this built in, although I would have expected it to).

Any help?