Braintree Integration and Apple Pay

How drop in UI works

• Use code provided by Braintree to set up a page
• Need to add merchant tokenization key in the above code. The key can be found in Braintree console
• Also need to set the url where ajax can call when the submit button is clicked
• In server side for that ajax call
  • get paymentMethodNonce such as tokencc_bf_jq8mhh_skhmmj_vf9883_9hzp6y***** which represent payment info customer provided.
  • use paymentMethodNonce to create a payment method
  • use payment method to create a transaction. Of course, that ajax call should also pass along amount and customer info
  • When done, send back response to that ajax call
• After get ajax call response, we can show receipt page or show error based on response.

//use payment method nonce to generate a payment method. After get payment method, we can create transaction
$result = $gateway->paymentMethod()->create([
            'customerId' => '691651999',
            'paymentMethodNonce' => "tokencc_bf_jq8mhh_skhmmj_vf9883_9hzp6y_xxxxx"
        ]);

How paymentMethod nonce is generated

• add a click event listener for submit button
• inside listener, call requestPaymentMethod on the branstree instance
• the second parameter payload has none. That is payload.nonce

var button = document.querySelector('#submit-button');

            braintree.dropin.create({
                authorization: 'sandbox_7bj5fsqp_j52y8m6kfndzsjr2',
                container: '#dropin-container'
            }, function (createErr, instance) {
                button.addEventListener('click', function () {
                    instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
                        // Submit payload.nonce to your server
                        console.log("payload", payload)
                    });
                });
            })  ;

Setting up Apple Pay

Here is some general steps

However, to set up Apple Pay through Braintree, we need to adjust some steps

Debug Javascript of Web page on iPad by mac

• In iPad, Settings - Safari - Advanced - enable Web Inspector
• In Mac, go to Safari - Prefences - Advanced - Show Develop menu bar
• Connect iPad with mac using usb cable
• In iPad, open the webpag in Safari
• In mac, open Safari, develop menu bar and find iPad; then click the web page
• Console log will show up