braintree-web-drop-in

braintree-web-drop-in copied to clipboard

General information

• SDK/Library version: 1.23.0
• Environment: Both
• Browser and OS: Version 84.0.4147.125 (Official Build) (64-bit), Win 10

Issue description

We are integrated with Braintree and separately for PayPal (smart buttons) currently. The only reason we need to use the Smart Button integration is that the Braintree Web Drop-In doesn't appear to support PayPal Flex (n.b. this is similar to PayPal Credit, but a different, new, product - more like buy now pay later).

Is this supported, or are there plans to support PayPal Flex in the drop-in in the same way that PayPal and PayPal Credit are currently offered?

I've never heard of PayPal flex. Can you provide documentation for it?

I believe it's a relatively new program that's invite-only. The limited documentation they sent across is early access and marked as confidential so I'm not sure that I can share the full thing.

However to render the smart buttons to support it, once PayPal has enabled it on your API credentials it's enabled as a funding source using: allowed: [paypal.FUNDING.PAYLATER] in the same way PayPal credit is enabled through allowed: [paypal.FUNDING.CREDIT]

Essentially it allows our customers to check out today, pay nothing for one month and then the following 3 months the basket total is split evenly in instalments to the customer.

I'm not sure if it's a UK only product as it can be trickier for merchants to offer credit here as it requires regulator approval. Flex isn't a credit product, but the benefit for us as a merchant is that we receive the full payment as normal with no real extra work involved as PayPal take all the risk. However for payments between £45 and £2000 our customers have the flexibility to pay it off in chunks without needing to go through a full credit check and approval process.

Just to add, flex only works on the V5 SDK meaning #610 would need to be merged.

Then it would just be a case of loading the funding-eligibility component from the SDK and allowing paypal.FUNDING.PAYLATER from the Buttons component.

paypal.Buttons({
	funding: {
		allowed: [paypal.FUNDING.PAYPAL, paypal.FUNDING.PAYLATER],
	},
        ...
})

I've reviewing this with our PayPal team.

Just a quick update, this has launched today after a rebrand to Pay in 3.

https://www.paypal.com/uk/webapps/mpp/paypal-payin3

This will require the most current version of the PayPal SDK, so marking this as something to explore for v2 of Drop-in

Hi @crookedneighbor, I was trying to add Paypal PayLater into my app that use Braintree's Web Drop In and found this page. Is this released? How do I add it?

Drop-in is still using checkout.js. There is no ETA on when it will upgrade to the latest PayPal SDK.

Thanks for replying @crookedneighbor. For now, I am using both checkout.js and Paypal SDK on the same page to integrate PayLater.

Sharing the snippet of how I have integrated it:

.row
  .col-sm-12
    #paypal-paylater-button
    %div{data: {
      "pp-message": "",
      "pp-style-layout": "text",
      "pp-style-logo-type": "inline",
      "pp-style-text-color": "black",
      "pp-amount": @subtotal
    }}

1. The HTML element #paypal-paylater-button is where we display the PayLater button
2. HTML element %div is the place where we show the dynamic message

<% content_for :head do %>
  <script src="https://js.braintreegateway.com/web/dropin/1.27.0/js/dropin.min.js"></script>
  <script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=buttons,messages,funding-eligibility&intent=authorize" data-namespace="PayPalSDK"></script>
  <script src="https://js.braintreegateway.com/web/3.81.0/js/client.min.js"></script>
  <script src="https://js.braintreegateway.com/web/3.81.0/js/hosted-fields.min.js"></script>
  <script src="https://js.braintreegateway.com/web/3.81.0/js/paypal-checkout.min.js"></script>
<% end %>

and below is the logic to render the button:

:javascript
  (function () {
    var authorization = token;

    braintree.client.create({
      authorization: authorization
    }, function (clientErr, clientInstance) {
      if (clientErr) {
        console.error(clientErr);
        return;
      }

      // Create a PayPal Checkout component.
      braintree.paypalCheckout.create({
        client: clientInstance
      }, function (paypalCheckoutErr, paypalCheckoutInstance) {

        // Stop if there was a problem creating PayPal Checkout.
        // This could happen if there was a network error or if it's incorrectly
        // configured.
        if (paypalCheckoutErr) {
          console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
          return;
        }

        paypalCheckoutInstance.loadPayPalSDK({
          currency: 'USD',
          dataAttributes: {
            amount: your_order_cart_value
          }
        }, function () {
          var button = PayPalSDK.Buttons({
            fundingSource: PayPalSDK.FUNDING.PAYLATER,

            createOrder: function () {
              var total_payment = your_order_cart_value;
              return paypalCheckoutInstance.createPayment({
                flow: 'checkout',
                amount: total_payment,
                currency: 'USD'
              });
            },
            onApprove: function (data, actions) {
              return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
                console.log(payload.nonce);
                //do whatever your logic is to complete the payment
              });
            },
          });

          if (!button.isEligible()) {
            console.log("button is not eligible");
            // Skip rendering if not eligible
            return;
          }

          button.render('#paypal-paylater-button');
        });
      });
    });
  })()

This works fine but the only thing is that I see error messages in console:

Uncaught Error: Attempted to load sdk version 5.0.257 on page, but window.paypal at version 4.0.331 already loaded.

To load this sdk alongside the existing version, please specify a different namespace in the script tag, e.g. <script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID" data-namespace="paypal_sdk"></script>, then use the paypal_sdk namespace in place of paypal in your code.
    at js?components=buttons&currency=USD&intent=authorize&client-id=CLIENT_ID:2
    at Module.<anonymous> (js?components=buttons&currency=USD&intent=authorize&client-id=CLIENT_ID:2)
    at t (js?components=buttons&currency=USD&intent=authorize&client-id=CLIENT_ID:2)
    at js?components=buttons&currency=USD&intent=authorize&client-id=CLIENT_ID:2
    at js?components=buttons&currency=USD&intent=authorize&client-id=CLIENT_ID:2

I have even tried removing PayPal JS SDK and use checkout.js and changed the references in the code from PayPalSDK to paypal but this does not render button.

I would appreciate any advice / suggestions on this!

HI

Is pay later supported yet?

Thank you