New cards processing issue

RomanKaliupin commented 2 years ago

General information

SDK/Library version: 1.32.1 Environment: Sandbox Browser and OS Chrome/mac

Issue description

I'm trying to process with a new card but getting an error:

More than that - the code from instance.requestPaymentMethod wasn't fired.

The code was taken from one of Braintree Drop-in UI samples:

<html>

<head>
    <script src="https://js.braintreegateway.com/web/dropin/1.32.1/js/dropin.min.js"></script>
</head>

<body>
    <div id="dropin-container"></div>
    <button id="button">Request payment method</button>
    <script>
        var button = document.querySelector('#button');
        var token = `YOUR_TOKEN`;

        braintree.dropin.create({
            authorization: token,
            container: '#dropin-container',
            paypal: {
                flow: 'checkout',
                amount: '10.00',
                currency: 'USD'
            }
        }, function (createErr, instance) {
            button.addEventListener('click', function () {
                instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
                    console.log(requestPaymentMethodErr, payload);
                });
            });
        });
    </script>
</body>

</html>

I'm thinking about Braintree Console config issue, but nothing comes to mind. Any idea why this happened?

Thank you for any help!

jplukarski commented 2 years ago

Are you running this file on a server? Or simply running this in a static HTML file? The way postMessage works doesn't work via the file protocol, so you may need to run this code on a server (localhost should work).

RomanKaliupin commented 2 years ago

Hi @jplukarski ,

Thank you! It solved my issue!

Another question. Is there any way how to synchronize PayPal button with Drop-in UI? Use-Case:

On the product page, the buyer clicks the PayPal button.
The buyer was redirected to the checkout page.
Rendered the Drop-in UI.
Buyer's PayPal account is displayed inside the Drop-in UI.

We can render buyer's PayPal account separately from Drop-in UI, but just in case if it is possible or will be possible soon.

Thank you in advance!

jplukarski commented 2 years ago

To clarify, it sounds like you want to automatically load the checkout page with the Drop-in from a product page? While there is not a way to synchronize a stand-alone PayPal button with a PayPal button within the Drop-in, you might be able to redirect your customers to the checkout page from a product page and include an array of line items in your PayPalCreateOptions with information about the product.

Would that achieve something similar to what you are trying to do?

RomanKaliupin commented 2 years ago

Hi @jplukarski ,

Thank you for the workaround. But I think we will go with Braintree PayPal button on Product page and Drop-in on checkout. When buyer goes from PDP via Bt PP button we will redirect this buyer on checkout page and store this account inside a custom html element, above the Drop-in.

braintree / braintree-web-drop-in

New cards processing issue #781

General information

Issue description