braintree / braintree-web Goto Github PK
View Code? Open in Web Editor NEWA suite of tools for integrating Braintree in the browser
Home Page: https://developer.paypal.com/braintree/docs/start/hello-client/javascript/v3
License: MIT License
A suite of tools for integrating Braintree in the browser
Home Page: https://developer.paypal.com/braintree/docs/start/hello-client/javascript/v3
License: MIT License
Drop-in integration README.md suggests
<div id="payment-form"></div>
It actually needs to be
<form id="payment-form"></form>
If you call this a 2nd time, with a different user's token, it still keeps the first user:
braintree.setup(token, "dropin", { ... });
In our scenario, a user is about to pay, but realizes that they are logged in as the wrong account (such as another family member's account who uses the same browser).
The user re-authorizes the alternate account and gets a new token, but a 2nd call to braintree.setup() with a different user's token still keeps the first payer's cards active! Worse, the transaction succeeds!!! In other words, "Account B" is able to pay with "Account A's" card even though the token is from a "Account B" .
Is there any way to reset braintree? I'm willing to try something outside the box such as reloading braintree.js.
Interestingly, we can pay twice with the same user using different tokens w/o reloading. It's just the user info that doesn't seem to update after calling setup().
Notes:
I can only verify that this is a problem with the dropin and in the sandbox.
This is within a Cordova app, so it's not convenient to just reload the whole page.
When I use the dropin for a new user who doesn't yet have any payment options, it also displays the PayPal button even though I've not selected PayPal as one of my options in setup().
braintree.setup(client_token, "dropin", {
container: container,
paymentMethodNonceReceived: function (event, nonce) {
...
}
});
I see you can change the Paypal flow locale passing the option "locale", but what about the DropIn form fields?
It should be really helpful to have an option for the dropin too to be able to change the locale of the form.
Otherwise I think the only way to do this is to not use the dropin and create a "custom" form right?
Hi guys,
It would be nice to have more control on the locking and unlocking of Drop-in integration form fields.
Currently, if you use the paymentMethodNonceReceived callback, when you click the submit button the form fields are being locked and when the nonce code is received the form fields are being unlocked but the payment process is not yet complete, we just received a nonce code.
Thanks
In Chrome 40, after generating a payment token and retrieving all html and css files needed, iframe gets displayed only first time.
After refreshing the page, iframe is not rendered anymore. The only way to get it back is in Incognito mode.
As discussed in this thread, people would find it useful if we included an unminified version of braintree.js in this repo.
Steeps to reproduce:
If you paste a value into the credit card input, but the field doesn't have focus when the paste happens (such as when you're using a clipboard manager like Alfred for OSX), the form doesn't properly notice that the value has been updated and doesn't think it's a credit card number. It lets the user then press the submit button, but the submission doesn't include a credit card number and it fails with "there was an error processing your request".
You can see the behavior in the video attached to this tweet: https://twitter.com/tednaleid/status/551114969144496128/photo/1
This was on chrome 39.0.2171.95 on OSX Mavericks.
I'm using the following coffeescript setup code for the drop-in UI:
braintree.setup client_token, 'dropin',
container: 'braintree-dropin',
paymentMethodNonceReceived: (event, nonce) ->
console.log event, nonce
client_token
is a valid Braintree client token that's not associated with a Braintree customer. In the sandbox, if I enter in valid credit card information and submit the form with the braintree-dropin
, then enter a different credit card and submit the same form, the same nonce gets used both times, which would then be rejected when submitting it to the Braintree server the second time during a customer create/update.
Is there a way of making this work? We do duplicate card checking on our side, which means that a user then might need to enter in a different card on the same form after being rejected.
I been integrating Braintree with my application and I found a problem. I need to use the method tokenizeCard but it seems the callback it's not called and I don't understand why.
function buyNow() {
var token = getSessionVarFromView('client_token_braintree');
console.error(token);
var client = new braintree.api.Client({clientToken: token});
client.tokenizeCard({number: "4111111111111111", expirationDate: "10/20"}, function (err, nonce) {
console.error("On tokenize card");
});
}
The method buyNow it's called after the user presses buy. The method to generate my client token in the server is:
Braintree_Configuration::environment('sandbox');
Braintree_Configuration::merchantId('merchantId');
Braintree_Configuration::publicKey('publicKey');
Braintree_Configuration::privateKey('privateKey');
$clientToken = Braintree_ClientToken::generate();
return $clientToken;
After this, the callback function of tokenizeCard never gets called.
I hope you can help me
Thank you
It seems like there aren't any callbacks when a new payment method has been created from drop-in UI. Are there any plans on adding this callback?
We have a form that contains user registration details as well as a braintree dropin frame.
We would like to disable the outer form's submit button after the user has pressed it once, so they can't double-submit.
If we disable the submit button, we need to re-enable it if the dropin iframe is showing an error (meaning the form did not actually submit).
We see that the braintree.setup
for dropin can accept an onPaymentMethodReceived
callback, which is a good way to know if the iframe submitted successfully.
Additionally, it seems to accept an onError
callback. However, that does not seem to fire when the form is submitted but client side validation fails. I am not sure what circumstances trigger this onError
event (probably if the iframe form submit failed when being sent over the network?).
In short, any time the iframe has started doing work, we would like to have an event that tells us when the iframe has stopped doing work, successfully or unsuccessfully.
There seem to be a few different errors that occur if a form button is clicked while the iframe is still spinning its loading icon. For example, using rspec/rails/phantomjs to try to proceed quickly through a form, I get this:
TypeError: 'undefined' is not an object (evaluating 'this.views[this.currentView].handleRequestNonce')
at https://assets.braintreegateway.com/dropin/1.1.9/braintree-dropin-internal.min.js:6
...
And a loading icon is visible in the saved screenshot. Clicking quickly around in Chromium, I was able to get this:
Uncaught TypeError: Cannot read property 'handleRequestNonce' of undefined braintree-dropin-internal.min.js:6
...
I can work around it to some extent, but it seems dangerous to not handle this situation.
When you initiate the paypal single payment flow the following is returned:
{
"nonce": "c812933e-fc0c-4786-a712-afbde4d8e280",
"details": {
"email": "[email protected]",
"firstName": "John",
"lastName": "Doe",
"phone": "312-123-4567",
"shippingAddress": {
"streetAddress": "123 Division Street",
"extendedAddress": "Apt. #1",
"locality": "Chicago",
"region": "IL",
"postalCode": "60618",
"countryCodeAlpha2": "US",
"recipientName": "John Doe"
}
},
"type": "PayPalAccount"
}
When you initiate the future payments flow the following is returned:
{
"nonce": "ac592269-0501-4985-a34e-9f0a6d03a8db",
"details": {
"email": "[email protected]",
"shippingAddress": {
"id": "1807238",
"defaultAddress": true,
"preferredAddress": false,
"postalCode": "123456",
"region": "CT",
"type": "HOME_OR_WORK",
"streetAddress": "2300 Park Road",
"recipientName": "Jane Doe",
"countryCodeAlpha2": "US",
"locality": "Ridgefield",
"extendedAddress": "56688 B Street"
}
},
"type": "PayPalAccount"
}
I really need the first name and last name separated out like the single payments flow. Should be consistent between the 2 flows.
I noticed github is using braintree for its payment gateway (e.g. try creating a new private repository).
When I click the Paypal button, it opens an iframe within a modal.
I can't figure out from the documentation whether this is supported. I believe this behaviour comes with braintree client because the iframe id "braintree-paypal-frame"
is referenced in https://assets.braintreegateway.com/v2/braintree.js https://js.braintreegateway.com/v2/braintree.js
A little bit of digging shows that the github page uses the following configuration to setup the braintree client. I tried the same but I couldn't get the Paypal login to show within a modal.
braintree.setup(t, "paypal", {
displayName: "GitHub",
container: i,
paymentMethodNonceInputField: n,
onSuccess: function() {
//
}
});
Any help/thoughts?
braintree-web
's design comes from a time when checkout flows generally used a <form>
POST. This is no longer the case in 2015, where SPAs and JS-heavy checkout flows are common.
There are a couple things that keep braintree-web
from working well in SPAs, the biggest of which is that braintree.setup
can only be called once per page load.
I'm starting this thread to discuss what kinds of features would be useful for making braintree-web
work better in JS-heavy checkout flows.
Related Issues:
After a user has a payment method in the vault, the Dropin iframe is transparent, and it looks fine over our black background:
However, the first time, it's white/opaque and looks poor on our black background:
The dropin does a lot for us, so I prefer to use it rather than write the customized forms. Is there any chance that you will make the initial screen also transparent or else give us some minor customization options such as background color?
I got in touch with support about potentially adding this, but it sounds like it's not in the plans.
I'm creating submerchants in a SPA-like environment. It would be amazing to have support for something like this:
client.tokenizeMerchant({
dob: dateOfBirth,
routing: bankRouting,
account: bankAccount
}, function(err, submNonce) {
//off it goes
});
Originally discussed here: https://github.com/braintree/braintree-encryption.js/issues/28
Questions I have:
Entered “Expiration Date” field value is incorrect, digits for YY are inverted
Steeps to reproduce:
The Drop In UI hangs at the ajax loading stage on my page. Then it gives me the error in the console:
Function.prototype.apply: Arguments list has wrong type braintree-dropin-internal.min.js
We haven't yet tracked down the cause, we instantly rolled back to tag 2.3.3 because it was stopping our customers from placing non-CC orders. I will update once I have more details on the specifics. This ticket is mostly as a note to others who might hit breakage.
For anyone else looking for a quick fix, 2.3.3 can referenced at https://js.braintreegateway.com/js/braintree-2.3.3.min.js (thanks @jeffcarp)
Hi,
I'm using the dropin widget in a modal dialog. The issue is that if the modal is closed, an "iframe" is left behind in the document.body. I searched for a destroy
or dispose
method in the component but couldn't find none. At the moment I'm removing the iframe manually, but it doesn't feel right.
Am I missing something? Thanks in advance.
Is there any way of using custom ui for paypal button?
I wanted to style and align the button using bootstrap and font awesome to match my sites styling. Would appreciate it if anyone knows how to do this. Thanks.
I am disappointed in the implementation of this lib. The size, number of dom bindings and only offering a minimized/uglified version is IMO insulting. There should be a way to extract the client module?
Braintree is for developers?
Help me keep my applications lean.
Hi,
When enableShippingAddress is set to true for the 'paypal' container in braintree setup, the shipping address choice screen is displayed after clicking agree. However, when it is set to 'dropin' the shipping address selection screen is not displayed when paypal is chosen as a payment method. Is that intentional? I am using the sandbox.
trying to load the dropui using colorbox most of the time returns (usually after a page refresh)
Uncaught ReferenceError: braintree is not defined
$(".colorbox_ajax").colorbox({
});
latest chrome version , and the same with IE
Brought up by @messageagency in https://github.com/braintree/braintree-encryption.js/issues/30
I only see hints and pieces documented on various pages strewn about several different domains (...) it would be nice to have some proper documentation for this and other functions.
browser = IE Mobile 11.0
os = Windows Phone 8.1
"Card Number", "Expiration Date" & "CVV" not activated after normal tapping (1 finger).
However, fields are activated for data entry after taping with 2 fingers.
This may not be the right repository but it seems to get the most attention. When using transaction.sale and the option to storeInVaultOnSuccess can we have the ability to pass in an existing customer id to have it appended to the record? Currently if you try and pass in a current customer ID you get the following:
"customer": {
"validationErrors": {
"id": [
{
"attribute": "id",
"code": "91609",
"message": "Customer ID has already been taken."
}
]
},
This makes it more difficult to vault a payment method for a current customer as you now have to do the paymentMethod.create and then the transaction.sale creating the transaction from the vaulted token. Would be SO much easier to be able to do this in transaction.sale and have it append to the customers payment methods if it is an existing customer.
Hi Braintree team!
Are there any updates on customizing Paypal button since this issue's been closed #17 ?
And if it's not possible to customize paypal button, is there any braintree.js method that opens Paypal's validation iframe and returns payment token ? Because I can't find any explicit method description in documentation.
Thanks in advance!
Hi will there be a npm module for braintree-data as well?
I see that bower install is available for braintree-web.
I'd rather build my own UI instead of using the included paypal button. Is there a way I can manually trigger the paypal pop up in my own event listener callback?
I get this error when trying to require the module with webpack.
Is this expected behavior, or a bug?
fcafe,re=15715070==(16777215&ie);re&&"Microsoft Internet Explorer"==navigator.
ReferenceError: navigator is not defined
Hi Braintree team,
I'm working on paypal button applying on rails application. Here is my raw example of button initialization:
braintree.setup(token, 'paypal', {
container: 'paypal_container_vault',
singleUse: true, // We don't store paypal payment method in vault
currency: 'USD',
paymentMethodNonceInputField: 'paypal_vault_input',
onPaymentMethodReceived: function(responseObj){
console.log(responseObj);
$('form#braintree_transaction_paypal_vault').submit();
},
onCancelled: function(responseObj){
console.log(responseObj);
alert('Canceled')
}
});
form html:
<form accept-charset="UTF-8" action="/payment/create_transaction_paypal" id="braintree_transaction_paypal_vault" method="post">
<div class="element">
<div class="label">
<label>Enter Amount and loging Paypal</label>
</div>
<input name="amount" type="text" value="">
<input id="paypal_vault_input" name="payment_method_nonce" type="hidden" value="">
</div>
<div class="element">
<div class="label">
<label>Enter Any invoice id</label>
</div>
<input name="id" type="text" value="">
</div>
<div id="paypal_container_vault"></div>
</form>
As a result within braintree sandbox credentials I receive an opportunity to login with any valid email and password:
After pressing login I receive only updated paypal button container
Is it possible to send certain purchase details in order to show it paypal's iframe?
Because we think it's a little bit confusing for customer to be redirected to website page just after successful paypal authorization without any notification on paypal's iframe.
Thanks in advance!
Hello!
We're using braintree on a form in which the user can opt to pay a subscription fee via Braintree, or opt for a free account instead. If the user chooses the free option, then we hide the Braintree form.
Unfortunately, running braintree.setup('dropin') installs a 'submit' handler on the form permanently, which will validate the credit card information even when the form is hidden. We would like a way to disable the form validation after initializing the dropin component.
We've worked around this for now by monkey-patching addEventListener, but obviously this feels sub-optimal.
Thanks!
Mike
Steeps to reproduce:
It is not possible to change separate digits. The only option is to delete CC number and retype it.
I'm trying to write some integration tests against an application that uses the braintree dropin thingie, and I'm running into trouble because the iframe it creates doesn't have a "name" attribute.
In PhantomJS/poltergeist, if you do this:
page.within_frame('braintree_frame') do
fill_in 'Card Number', with: '...'
end
it will only work if the name "braintree_frame" had been assigned before the iframe was added to the document (this seems like a phantom/poltergeist bug). There doesn't seem to be any other way for poltergeist to interact with the iframe.
So that's all a bunch of hullabaloo all just to say it would make things easier if the braintree-web javascript assigned that iframe a name. Or made it a configuration option, whatever.
Can we get a change log or some comments on the commits about the changes that were made when you bump versions? I am guessing they are just bug fixes but it would be nice to know when new functionality is added.
Currently the PayPal flow does not seem to support any kind of MFA from PayPal w/ no error being displayed. Is there any planned support for PayPal + MFA soon ?
Currently the login page just looks like it failed without any indication that two-factor is not supported (even though the 2.7.3 changelog indicates that there should/might be a two-factor failure message).
There are a significant number of our potential users who have been turned away due to a lack of MFA support and confused by the lack of a failure message FWIW.
Hi guys,
I've just updated from 2.3.3 to 2.5.1 and the same drop-in code that I've used before is not working anymore. Maybe something has changed that needs to be reflected in the docs, I didn't find anything.
Thanks
Hey Jeff,
Would there be a callback function somewhere in the pipeline?
The use case would be to activate the form (or show the submit button) only after braintree has finished loading. This way we wont have a premature form submission from users who are too eager to click on submit buttons!
Cheers,
Ernest
The sandbox iframe seems to generate mock data for shipping address/card/paypal account validation when a token generated using sandbox credentials is used. On client side, does onPaymentMethodReceived still get triggered with a payload with nonce, shipping address etc that can be sent to server side? Or can it be tested only with live credentials?
Many checkout systems show a preview page with a summary of what is about to happen, like "$44 will be charged to your Visa ending in 1234". That's not possible with the Drop-In UI, since the only thing we have access to at preview time is a nonce, and (if you care about the CVV) the nonce can only be used to create a transaction.
So, here is a simple feature request: the Drop-In UI should submit the credit card type and last four digits in some additional parameters to our form, along with the nonce. Presumably something similar would apply to PayPal transactions.
Hi guys, I'm using your module within webpack but I got this warning.
I didn't find an open issue
WARNING in ./~/braintree-web/dist/braintree.js
Critical dependencies:
2:423-430 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./~/braintree-web/dist/braintree.js 2:423-430
The problem is that is included only the pre-built file, while I'd need an unminified version of the file.
I gave a look at the #1 issue, can you include the source file now?
If not, could you explain me the reason?
Thanks.
Hi guys,
If you enter CC "4111 1111 1111 1112" you will get an error, now select last digit and type 1, that resulting CC is a valid one but you will still see it as being invalid. If you do the same for "4111 1111 1111 1111" and changing last digit to 2 you will see an error, only from 2 to 1 the CC field does not get reevaluated.
Thanks
Drop-In is not paying any attention what payment method marked as default.
Steeps to reproduce:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.