feat: move to hosted fields

public/javascript/demo.js

@@ -21,30 +21,65 @@
     false
   );
 
-  window.braintree.dropin.create(
+  window.braintree.client.create(
     {
       authorization: clientToken,
-      container: '#bt-dropin',
-      paypal: {
-        flow: 'vault',
-      },
     },
-    function (createErr, instance) {
-      form.addEventListener('submit', function (event) {
-        event.preventDefault();
+    function (clientErr, clientInstance) {
+      if (clientErr) {
+        console.log('Error', clientErr);
 
-        instance.requestPaymentMethod(function (err, payload) {
-          if (err) {
-            console.log('Error', err);
+        return;
+      }
+
+      window.braintree.hostedFields.create(
+        {
+          client: clientInstance,
+          styles: {
+            input: {
+              'font-size': '16px',
+              color: '#393536',
+            },
+          },
+          fields: {
+            number: {
+              selector: '#card-number',
+              placeholder: '4111 1111 1111 1111',
+            },
+            expirationDate: {
+              selector: '#expiration-date',
+              placeholder: 'MM/YY',
+            },
+            cvv: {
+              selector: '#cvv',
+              placeholder: '123',
+            },
+          },
+        },
+        function (hostedFieldsErr, hostedFieldsInstance) {
+          if (hostedFieldsErr) {
+            console.log('Error', hostedFieldsErr);
 
             return;
           }
 
-          // Add the nonce to the form and submit
-          document.querySelector('#nonce').value = payload.nonce;
-          form.submit();
-        });
-      });
+          form.addEventListener('submit', function (event) {
+            event.preventDefault();
+
+            hostedFieldsInstance.tokenize(function (err, payload) {
+              if (err) {
+                console.log('Error', err);
+
+                return;
+              }
+
+              // Add the nonce to the form and submit
+              document.querySelector('#nonce').value = payload.nonce;
+              form.submit();
+            });
+          });
+        }
+      );
     }
   );
 })();

public/stylesheets/app.css

@@ -2322,30 +2322,6 @@ td {
   animation-duration: 700ms;
 }
 
-.bt-drop-in-wrapper {
-  min-height: 200px;
-  position: relative;
-  z-index: 1;
-}
-
-.bt-drop-in-placeholder {
-  background-color: #f9f9f9;
-  height: 187px;
-  width: 100%;
-  text-align: center;
-  color: #707073;
-  border: dashed 1px #dee2e5;
-  border-bottom: none;
-  display: table;
-}
-
-.bt-drop-in-placeholder:before {
-  content: '(Drop-in)';
-  color: #707073;
-  display: table-cell;
-  vertical-align: middle;
-}
-
 .response {
   text-align: center;
 }
@@ -2619,3 +2595,29 @@ aside.drawer ::selection {
   color: rgba(62, 60, 65, 0.99);
   text-shadow: none;
 }
+
+/* Hosted Fields */
+.hosted-fields-wrapper {
+  margin-top: 20px;
+}
+
+.hosted-fields-wrapper label {
+  display: block;
+  margin-bottom: 16px;
+}
+
+.hosted-field {
+  height: 40px;
+  padding: 8px 12px;
+  border: solid 1px #dee2e5;
+  border-radius: 3px;
+  background-color: #fff;
+}
+
+.hosted-field.braintree-hosted-fields-focused {
+  border-color: #393536;
+}
+
+.hosted-field.braintree-hosted-fields-invalid {
+  border-color: #d0021b;
+}

routes/__tests__/index.unit.js

@@ -8,7 +8,7 @@ const { get, post } = supertest(app);
 
 describe('Braintree demo routes', () => {
   describe('index', () => {
-    it('redirects to the checkouts drop-in page', () =>
+    it('redirects to the checkouts page', () =>
       get('/').then(({ header, statusCode }) => {
         expect(header.location).toBe('/checkouts/new');
         expect(statusCode).toBe(302);
@@ -31,9 +31,11 @@ describe('Braintree demo routes', () => {
         expect(text).toMatch(/<form id="payment-form"/);
       }));
 
-    it('includes the dropin div', () =>
+    it('includes the hosted fields', () =>
       get('/checkouts/new').then(({ text }) => {
-        expect(text).toMatch(/<div id="bt-dropin"/);
+        expect(text).toMatch(/<div class="hosted-field" id="card-number">/);
+        expect(text).toMatch(/<div class="hosted-field" id="expiration-date">/);
+        expect(text).toMatch(/<div class="hosted-field" id="cvv">/);
       }));
 
     it('includes the amount field', () =>
@@ -92,7 +94,7 @@ describe('Braintree demo routes', () => {
 
     describe('when the transaction is not successful', () => {
       describe('when Braintree returns an error', () => {
-        it('redirects to the drop-in checkout page if transaction is not created', () =>
+        it('redirects to the new checkout page if transaction is not created', () =>
           post('/checkouts')
             .send({
               amount: 'not_a_valid_amount',

views/checkouts/new.pug

@@ -4,7 +4,7 @@ block content
   .wrapper: .checkout.container: .content
     header
       h1 Hi, #[br] Let's test a transaction
-      p Make a test payment with Braintree using PayPal or a card
+      p Make a test payment with Braintree using a card
 
     form#payment-form(action="/checkouts", method="post")
       section
@@ -13,14 +13,28 @@ block content
           .input-wrapper.amount-wrapper
             input#amount(name="amount" type="tel" min="1" value="10")
 
-        .bt-drop-in-wrapper
-          #bt-dropin
+        .hosted-fields-wrapper
+          label(for="card-number")
+            span.input-label Card Number
+            .input-wrapper
+              #card-number.hosted-field
+
+          label(for="expiration-date")
+            span.input-label Expiration Date
+            .input-wrapper
+              #expiration-date.hosted-field
+
+          label(for="cvv")
+            span.input-label CVV
+            .input-wrapper
+              #cvv.hosted-field
 
       input#nonce(type="hidden" name="payment_method_nonce")
       button.button(type="submit")
         span Test Transaction
 
   span(hidden id="client-token")=clientToken
 
-  script(src="https://js.braintreegateway.com/web/dropin/1.41.0/js/dropin.min.js")
+  script(src="https://js.braintreegateway.com/web/3.143.0/js/client.min.js")
+  script(src="https://js.braintreegateway.com/web/3.143.0/js/hosted-fields.min.js")
   script(type="text/javascript", src="/javascript/demo.js")

views/checkouts/show.pug

@@ -108,5 +108,5 @@ block content
       section
         p.center.small Integrate with the Braintree SDK for a secure and seamless checkout
       section
-        a.button.secondary.full(href="https://developers.braintreepayments.com/guides/drop-in", target="_blank") 
+        a.button.secondary.full(href="https://developer.paypal.com/braintree/docs/start/hello-server/ruby/", target="_blank")
           span See the Docs

views/layout.pug

@@ -4,7 +4,6 @@ html
     title BraintreeExpressExample
     meta(name="viewport" content="width=device-width, initial-scale=1")
     link(rel="stylesheet", href="/stylesheets/app.css")
-    link(rel="stylesheet", href="/stylesheets/overrides.css")
   body
     header.main
       .container.wide
@@ -13,7 +12,7 @@ html
             .fill
               a.pseudoshop(href='/') PSEUDO #[strong SHOP]
             .fit
-              a.braintree(href='https://developers.braintreepayments.com/guides/drop-in', target='_blank') Braintree
+              a.braintree(href='https://developer.paypal.com/braintree/docs/start/tutorial-hosted-fields-node/', target='_blank') Braintree
 
       .notice-wrapper
         if messages && messages.length > 0