Pwa-studio: Cannot place order with braintree

[rossmc]

Describe the bug
Cannot place order with braintree. It works on the Luma Storefront but not on venia storefront.

To Reproduce
Steps to reproduce the behavior:

1. Install fresh magento 2.3, with venia samlple data and configure Braintree sandbox account.
2. Go to a product page and add the product to your cart.
3. Fill in all cart forms ship to, pay with & use. Use 4111 1111 1111 1111 02/20 123 credit card details
4. Click Confirm Order button
5. See error bellow:

client.js:135 POST https://magento-venia-concept-pcfic.local.pwadev:9425/rest/V1/guest-carts/BxeoJv3nHIwEVFoxmGZDpBcaA1uOTq8A/payment-information 400 (Bad Request)
_transport @ client.js:135
_fetch @ client.js:136
run @ client.js:133
request @ client.js:143
_callee11$ @ client.js:2808
tryCatch @ client.js:1585
invoke @ client.js:1583
e.(anonymous function) @ client.js:1585
asyncGeneratorStep @ client.js:40
_next @ client.js:42
Promise.then (async)
asyncGeneratorStep @ client.js:40
_next @ client.js:42
Promise.then (async)
asyncGeneratorStep @ client.js:40
_next @ client.js:42
Promise.then (async)
asyncGeneratorStep @ client.js:40
_next @ client.js:42
Promise.then (async)
asyncGeneratorStep @ client.js:40
_next @ client.js:42
Promise.then (async)
asyncGeneratorStep @ client.js:40
_next @ client.js:42
(anonymous) @ client.js:42
(anonymous) @ client.js:41
thunk @ client.js:2818
(anonymous) @ vendor~client-3a997f5cf70f78e105a7.js:160
(anonymous) @ vendor~client-3a997f5cf70f78e105a7.js:142
da @ vendor~client-3a997f5cf70f78e105a7.js:505
ka @ vendor~client-3a997f5cf70f78e105a7.js:505
la @ vendor~client-3a997f5cf70f78e105a7.js:514
ya @ vendor~client-3a997f5cf70f78e105a7.js:516
Ca @ vendor~client-3a997f5cf70f78e105a7.js:519
Aa @ vendor~client-3a997f5cf70f78e105a7.js:516
Fa @ vendor~client-3a997f5cf70f78e105a7.js:530
Gd @ vendor~client-3a997f5cf70f78e105a7.js:743
Pi @ vendor~client-3a997f5cf70f78e105a7.js:1425
Nb @ vendor~client-3a997f5cf70f78e105a7.js:589
Jd @ vendor~client-3a997f5cf70f78e105a7.js:751
Ri @ vendor~client-3a997f5cf70f78e105a7.js:1430
Id @ vendor~client-3a997f5cf70f78e105a7.js:748
client.js:2073 Unhandled M2ApiResponseError585 Error: POST /rest/V1/guest-carts/BxeoJv3nHIwEVFoxmGZDpBcaA1uOTq8A/payment-information responded 400 Bad Request: 

Message:

  An error occurred on the server. Please try to place the order again.
Magento PHP stack trace: 

#0 /var/www/html/vendor/magento/framework/Interception/Interceptor.php(58): Magento\Checkout\Model\GuestPaymentInformationManagement->savePaymentInformationAndPlaceOrder('BxeoJv3nHIwEVFo...', 'ross.mchugh@mon...', Object(Magento\Quote\Model\Quote\Payment), Object(Magento\Quote\Model\Quote\Address\Interceptor))
#1 /var/www/html/vendor/magento/framework/Interception/Interceptor.php(138): Magento\Checkout\Model\GuestPaymentInformationManagement\Interceptor->___callParent('savePaymentInfo...', Array)
#2 /var/www/html/vendor/magento/framework/Interception/Interceptor.php(153): Magento\Checkout\Model\GuestPaymentInformationManagement\Interceptor->Magento\Framework\Interception\{closure}('BxeoJv3nHIwEVFo...', 'ross.mchugh@mon...', Object(Magento\Quote\Model\Quote\Payment), Object(Magento\Quote\Model\Quote\Address\Interceptor))
#3 /var/www/html/generated/code/Magento/Checkout/Model/GuestPaymentInformationManagement/Interceptor.php(26): Magento\Checkout\Model\GuestPaymentInformationManagement\Interceptor->___callPlugins('savePaymentInfo...', Array, Array)
#4 [internal function]: Magento\Checkout\Model\GuestPaymentInformationManagement\Interceptor->savePaymentInformationAndPlaceOrder('BxeoJv3nHIwEVFo...', 'ross.mchugh@mon...', Object(Magento\Quote\Model\Quote\Payment), Object(Magento\Quote\Model\Quote\Address\Interceptor))
#5 /var/www/html/vendor/magento/module-webapi/Controller/Rest/SynchronousRequestProcessor.php(95): call_user_func_array(Array, Array)
#6 /var/www/html/vendor/magento/module-webapi/Controller/Rest.php(188): Magento\Webapi\Controller\Rest\SynchronousRequestProcessor->process(Object(Magento\Framework\Webapi\Rest\Request\Proxy))
#7 /var/www/html/vendor/magento/framework/Interception/Interceptor.php(58): Magento\Webapi\Controller\Rest->dispatch(Object(Magento\Framework\App\Request\Http))
#8 /var/www/html/vendor/magento/framework/Interception/Interceptor.php(138): Magento\Webapi\Controller\Rest\Interceptor->___callParent('dispatch', Array)
#9 /var/www/html/vendor/magento/module-company/Plugin/Webapi/Controller/RestPlugin.php(84): Magento\Webapi\Controller\Rest\Interceptor->Magento\Framework\Interception\{closure}(Object(Magento\Framework\App\Request\Http))
#10 /var/www/html/vendor/magento/framework/Interception/Interceptor.php(135): Magento\Company\Plugin\Webapi\Controller\RestPlugin->aroundDispatch(Object(Magento\Webapi\Controller\Rest\Interceptor), Object(Closure), Object(Magento\Framework\App\Request\Http))
#11 /var/www/html/vendor/magento/framework/Interception/Interceptor.php(153): Magento\Webapi\Controller\Rest\Interceptor->Magento\Framework\Interception\{closure}(Object(Magento\Framework\App\Request\Http))
#12 /var/www/html/generated/code/Magento/Webapi/Controller/Rest/Interceptor.php(26): Magento\Webapi\Controller\Rest\Interceptor->___callPlugins('dispatch', Array, Array)
#13 /var/www/html/vendor/magento/framework/App/Http.php(135): Magento\Webapi\Controller\Rest\Interceptor->dispatch(Object(Magento\Framework\App\Request\Http))
#14 /var/www/html/vendor/magento/framework/App/Bootstrap.php(258): Magento\Framework\App\Http->launch()
#15 /var/www/html/pub/index.php(37): Magento\Framework\App\Bootstrap->run(Object(Magento\Framework\App\Http))
#16 {main}

    at dispatch (https://magento-venia-concept-pcfic.local.pwadev:9425/js/vendor~client-3a997f5cf70f78e105a7.js:131:12)
    at https://magento-venia-concept-pcfic.local.pwadev:9425/js/vendor~client-3a997f5cf70f78e105a7.js:160:75
    at dispatch (https://magento-venia-concept-pcfic.local.pwadev:9425/js/vendor~client-3a997f5cf70f78e105a7.js:147:292)
    at _callee11$ (https://magento-venia-concept-pcfic.local.pwadev:9425/js/client.js:2816:36)
    at tryCatch (https://magento-venia-concept-pcfic.local.pwadev:9425/js/client.js:1585:154)
    at Generator.invoke [as _invoke] (https://magento-venia-concept-pcfic.local.pwadev:9425/js/client.js:1583:7)
    at Generator.e.(anonymous function) [as throw] (https://magento-venia-concept-pcfic.local.pwadev:9425/js/client.js:1585:402)
    at asyncGeneratorStep (https://magento-venia-concept-pcfic.local.pwadev:9425/js/client.js:40:290)
    at _throw (https://magento-venia-concept-pcfic.local.pwadev:9425/js/client.js:42:86)

Expected behavior
For no error, order to be places and to see order confirmation screen.

Screenshots
If applicable, add screenshots to help explain your problem.

Please complete the following device information:

• Device: Macbook Pro
• OS: OSX Mojave
• Browser Chorme
• Version 72
• Magento Version 2.3
• NPM version 6.7.0
• Node Version v11.10.1

Please let us know what packages this bug is in regards to:

• [ ] venia-concept
• [ ] pwa-buildpack
• [ ] peregrine
• [ ] pwa-devdocs
• [ ] upward-js
• [ ] upward-spec

Additional context
The issue is on the PHP side and is coming from rest/V1/guest-carts, not sure why?
Also, Check/Money Order Payment method is enabled on the Magento Backend, how can I enable it on the venia storefront?

Possible solutions
Add any ideas about possible solutions to the problem here.

[vikasi95dev]

Ran into the same issue. Have you added Rest API Credentials?

[rossmc]

No, I did not know about that @vikasi95dev
Where do you add them?

[vikasi95dev]

Not sure, I'm looking into this.

[rossmc]

I see there is also a Braintree token setting in .env.dist#L114

Not sure what this is, on the magento admin panel I just needed to add Merchant ID, Public & Private Keys.

Maybe the token is only required on the client side? I'm not sure if it's using the Magento Panel config for this?

[tjwiebell]

@vikasi95dev @rossmc

This may require some additional documentation, but the BRAINTREE_TOKEN environment variable and the Braintree payment configuration in the Magento instance do need to match. This is pre-configured if you use the default MAGENTO_BACKEND_URL in .env.dist, but if you're using your own instance, you'll need to generate a BRAINTREE_TOKEN and configure Braintree payments in the Magento backend.

[rossmc]

@tjwiebell 👍

That was it for me.

For anyone else with the same issue...

1. Follow these steps on your Braintree dashboard to obtain a tokenization key.
2. Add the tokenization key to the BRAINTREE_TOKEN property in your local .env file.
   i.e. see .env.dist#L114
3. Configure the Basic Braintree Settings on the Magento Admin Panel.

cc: @vikasi95dev

[niranjan-gondaliya]

I am also facing same issue with venia storefront.
Getting : Unknown or expired paymentMethodNonce error in payment log.