srikanthonl / ngx-braintree Goto Github PK

Hi, does this component support Venmo payments?

If not, any suggestions on how to implement it?

Hi,

Thanks for creating this package!

I'm wondering if there is a way to handle the fail case after purchase i.e. after the 'createPurchaseUrl' is called, and the backend tries to process the transaction (or save the customer), if that fails (e.g. because the user made a typo,) I want the front-end to display the credit card entry screen again. Is there any mechanism in ngx-braintree to support this?

Thank you,

-S. Arora

## I get StaticInjectorError when I add directive into template

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[HttpClient]: 
  StaticInjectorError[HttpClient]: 
    NullInjectorError: No provider for HttpClient!
Error: StaticInjectorError[HttpClient]: 
  StaticInjectorError[HttpClient]: 
    NullInjectorError: No provider for HttpClient!

"dependencies": { "@angular/animations": "^5.0.0", "@angular/cdk": "^5.0.2", "@angular/cli": "^1.6.3", "@angular/common": "^5.2.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.2.0", "@angular/material": "^5.0.2", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/router": "^5.0.0", "@ngrx/store": "^@4.1.1", "angular-checkboxes": "^1.0.3", "braintree": "^2.4.0", "core-js": "^2.4.1", "devextreme": "^17.2.4", "devextreme-angular": "^17.2.4", "ng2-nouislider": "^1.7.4", "ngx-braintree": "^3.0.0", "ngx-order-pipe": "^1.1.0", "ngx-pagination": "^3.0.3", "nouislider": "^10.1.0", "rxjs": "^5.4.2", "swiper": "^4.0.7", "zone.js": "^0.8.14" },

How can I differentiate whether it is a card or pay pal method, so that it can be sent to api for further functionality.

Any plan for VaultManager support?

I am binding payment methods to customerId for Dropin, and it works well.
But while i am trying to delete an existing payment method, i could not figure the way out, as ngx-braintree lacks of the vaultManager option anyway? Or how can i configure it properly in ngx-braintree?

see Dropin official doc:
https://developers.braintreepayments.com/guides/drop-in/customization/javascript/v3#delete-a-saved-payment-method

Please help, thanks~

Is there support for adding CVV number to the UI?

As mentioned in another issue.
Loader directive is targeting an "img" element.
It should target something more generic, a CSS class or ID, or even better make it a directive.

After doing the update with the chargeAmount i get this error.

Error: Cannot find module "ngx-braintree"

Hi I tried to use your module but getting on error on console Angular 5 and module stops working.

ERROR Error: StaticInjectorError[HttpClient]: 
  StaticInjectorError[HttpClient]: 
    NullInjectorError: No provider for HttpClient!
    at _NullInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js._NullInjector.get (core.js:993)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js.StaticInjector.get (core.js:1094)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js.StaticInjector.get (core.js:1094)
    at resolveNgModuleDep (core.js:10878)
    at NgModuleRef_.webpackJsonp../node_modules/@angular/core/esm5/core.js.NgModuleRef_.get (core.js:12110)
    at resolveNgModuleDep (core.js:10878)

Code in module

import { NgxBraintreeModule } from 'ngx-braintree';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { HttpModule } from '@angular/http';
.
.
.
.
.
imports: [
        NgxBraintreeModule,
        HttpModule,
        HttpClientModule,
    ],
providers: [
        HttpClientModule,
        HttpClient,
    ],

And in my html view, as follows however still getting the error. Any idea how to fix it?

        <ngx-braintree 
        [clientTokenURL]="'api/braintree/getclienttoken'" 
        [createPurchaseURL]="'api/braintree/createpurchase'" 
        [chargeAmount]="55.55"
        (paymentStatus)="onPaymentStatus($event)">
    </ngx-braintree>

Enable/Disable Pay button when the DropIn UI is Valid/Invalid

Hi, this looks promising.

Is there (planning to be) any support for PayPal Vault / recurring payments?

https://developers.braintreepayments.com/guides/paypal/vault/javascript/v3

I am getting below error

below given is the html directive

I am not getting able to call createpurchase method but able to call getclienttoken
while calling createpurchase method, I am getting CORs issue

Previously it was working fine

When I enter one of the test cards from BrainTree which returns processor declined a message comes up stating "DropinError: No Payment Method is Available". I'm not sure why this message is coming up, but it doesn't seem like it is needed as the Drop-In UI is also showing a message.

Hi Srikanth,

Thank you for creating such a great module!!

I could not find anything about handling Errors with RxJS 6 with Angular 6.1.

Is the loader supposed to stop when an Error is thrown?

Here is the code that I am using to handle any type of Errors from my backend API.

CC-checkout.service.ts
`
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

public createCCPurchase(formData){
let clientPurchaseURL = "http://localhost:5000/api/v1/paypal/cc-checkout"

    return this.http.post(clientPurchaseURL, formData).pipe(
        catchError(this.handleError)
    );
}

private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) 
{
    // A client-side or network error occurred. Handle it accordingly.
    console.error('An error occurred:', error.error.message);
} 
else {
    // The backend returned an unsuccessful response code.
    // The response body may contain clues as to what went wrong,
    console.error(
    `Backend returned code ${error.status}, ` +
    `body was: ${error.error}`);
}
// return an observable with a user-facing error message
    return throwError(error);
};  `

Can you please let me know what is expected to happen to the NGX-Braintree component when an error is returned and if I am handling the error properly.

If there is anymore information you need please let me know.

Thanks in Advance
Sean

@srikanthonl , Can you add support for 3D secure?

On my backend, I need my custom user ID to be sent along with the payment request. Currently there is no way to add this data to the request object.

I propose having an additional optional property, purchaseData which can be used to add extra data, like a UID, to the payment request.

Pay button wont get enabled even after the dropin being valid unless enablePaypalVault or enablePaypalCheckout is enabled

Is there any plan to release a Google Pay support ?
(Thanks for your amazing work!)

I have notice there is no CVV input option. It would be great if it is added.
Thanks for this great package btw.

Hi,
I want to integrate Braintree Suscription model with pure Angular 5 with Firebase.
I have installed the npm and have imported the module.
But I am unable to understand ,
<ngx-braintree
[clientTokenURL]="'api/braintree/getclienttoken'"
[createPurchaseURL]="'api/braintree/createpurchase'"
[chargeAmount]="55.55"
(paymentStatus)="onPaymentStatus($event)">

what is clientTokenURL and createPurchaseURL? What do I need to do to proceed further?

I am getting this error: Customer does not have any credit cards
could you help me out, please?

braintree.dropin.create accepts a callback function for when the component is fully loaded and ready. Would be good to have an option similar to paymentStatus to handle the 'ready'.

I have enabled Paypal checkout but dont know how to check if the payment was successful or not.
this is my code.

My Drop-in is working fine Just want to know how to handle Paypal Checkout Responce

braintree.component.html

<ngx-braintree
    [clientTokenURL]="My API'" 
    [createPurchaseURL]="My API"
    [chargeAmount]="55.55"
    [buttonText]="'Pay'"
    (paymentStatus)="onPaymentStatus($event)"
    [enablePaypalCheckout] = "true"
    [currency]="'USD'">
</ngx-braintree>

braintree.component.ts

onPaymentStatus(braintreeResponce) {
	console.log('BrainTree Responce');
	console.log(braintreeResponce);
}

Hi,

Could you please provide guidelines for implementing above approach for braintree hostedfields? I'm facing an issue saying - "Element already contains a Braintree iframe". Please help with this regard.

Thanks

I have implemented braintree payment successfully in angular5, but there is 1 requirement to show cvv input field to customer. Please help me to achieve this.
Thanks in advance.

Can I use a function instead of url for purchase?

This is the error I get.

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/ngx-braintree/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

Have to click Pay button twice when paying through Paypal. The payment doesnt start on one click.

My implementation gets as far as showing the purchase button (token was returned), but the button does nothing when clicked. No JS errors either.

Implementation:

<ngx-braintree *ngIf="credits == 150" [clientTokenURL]="'-snip-'"
    [createPurchaseURL]="'-snip-'" (paymentStatus)="onPaymentStatus($event)"
    [buttonText]="'Purchase'">
</ngx-braintree>

Angular CLI: 1.6.0
Node: 8.9.1
OS: darwin x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.1
@angular/cli: 1.6.0
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.1
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.4.2
webpack: 3.10.0

I found that the keyboard wouldn't successfully get dismissed after entering credit card information. I'm using this within an Ionic app. I had to use the following code to get it to dismiss correctly.

    var field = document.createElement('input');
    field.setAttribute('type', 'text');
    document.body.appendChild(field);

    setTimeout(function() {
        field.focus();
        setTimeout(function() {
            field.setAttribute('style', 'display:none;');
        }, 50);
    }, 50);

However this requires the keyboard to be shown already for it to work. Since I don't know when the keyboard is visible this shows the keyboard and then hides it. Not sure if there is a way to tell when the keyboard is visible or not.

The component is not rendering and
not calling my getToken function and
no error.

I'm using Angular 6

    "@angular/animations": "6.0.3",
    "@angular/common": "6.0.3",
    "@angular/compiler": "6.0.3",
    "@angular/core": "6.0.3",
    "@angular/forms": "6.0.3",

    "ngx-braintree": "6.1.2",

After entering the card details and pressing "Purchase", there is at least a 2-3 second delay, where the Braintree component disappears, but (paymentStatus) has not fired yet.

For improved UX, would be good if there was an event that would be fired right after user has pressed "Purchase" or if the Braintree component would not disappear and would display a loader until the paymentStatus event fires.

When trying to build my project via Angular AoT I get the following error.

Error during template compile of 'NgxBraintreeModule' Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule' 'NgModule' calls 'ɵmakeDecorator'.

Any advice or suggestions would be greatly appreciated as I've spent weeks implementing this into my project only to have it fail when I run a production build.

Hi,
I am using this plugin with this configuration

<ngx-braintree [clientTokenURL]=braintreeTokenUrl [createPurchaseURL]=braintreeCheckoutUrl (paymentStatus)="onPaymentStatus($event)" [showCardholderName]="true" [chargeAmount]="50" [enablePaypalCheckout] = "true" [buttonText]="'Pay'" [enabledStyle]="enabledStyle" [disabledStyle]="disabledStyle" [currency]="'EUR'"> </ngx-braintree>

It works using ionic serve, with cordova platform browser and android (emulator and devices), but it doesn't work on iOS.

There is an infinite loader.
No errors into console log.

Thanks

How to remove the place holder (......) present in cardName braintree dropin ui.

My backend is running python 2.7 and when Im trying to serialize and return the response from gateway.subscription.create I'm getting an error telling me that the result cannot be serialized. I understand this is not an issue with your module, but I also can't find a solution for how I'm supposed to serialize this response. Thus, I'm wondering if you could provide some more details about what the module is specifically looking for in successful and erroneous response objects.

Thank you.

I have an app similar to motel booking. Once they have reserved the room a timer starts that enforces payment. I would like to stop the timer when the user clicks the pay button. Can the plugin fire an event when the pay button is clicked?

Hi guys, we are able to apply Cardhold name but not able to show the cvv and check it as well.

Can you update Angular and RxJs dependencies to work with Angular 6.
The final has been released a few days ago.

Add progress indicator for ngx-braintree component when for ex: client token is being received and when waiting for createPurchase response.

I didn't see anything for sending the amount dynamically to the purchase api.

Locale support

For now, when set enablePaypalCheckout to true, it will show paypal payment methods in drop in which is great. But it also always show Credit Card payment in drop in too. What if i only want to show paypal payment method. Is there any directive to set it (Example: enableCreditCheckout = false).

Thank you so much for your wonderful work! You really saves my life!

Hi,
I want to give an option in html to pay via saved card if a customer has already made a payment with braintree. How can I give that option in frontend?
Please help me out to achieve this.

Hi,

instead of doing all the styling buttons internally, and leaving us no way to change it, would you consider making just a class input, so we can do/override styling.

For example I have a boostrap built with custom variables, I'd like the button the appear as all the other theme buttons. Right now I'll have to override each and every css property in all states, with ng:deep. If I could just set the "btn-primary" class on the button I wouldn't need to do any of that.

Also would you considering adding an optional "Back" button, which by default doesn't do anything but has an output that can be handled. A lot of payments are at the end of wizards. Right now I have 3 wizards steps with identical BACK/CONTINUE buttons, and the last payment step with only a pay button totally different from anything else, or a way to inline another button next to it.

I think it'd be helpful if we could pass in a custom function for resolving the client token and create purchase urls, this would allow somebody to use any http library or headers/functions that are needed, and it'd possibly reduce any friction, the function would perferrably return an observable and the final calls would just subscribe to either the service or the custom function passed in so that the event can be triggered, as long as the observable returns the data in a given format it should work great.

An example of how i imagine this working is i have payments.component.ts with the following

class PaymentsComponent {
  ...
  getClientToken(){
    return this.http.get('my-url', {headers: new HttpHeaders({requestType: 'application/json', my_header_here: xyz})}).map(result => {
      // Imagine the result is some sort of user/entity identifer with a property of key added, so i'm returning the value as an object matching the required format
      return {token: result.key};
    });
  }

  createPurchase(nonce, amount) {
    // Similar type of deal as above, just returns an observable (could be http or anything else)
    return this.http.post(xyz,{other:data}); // a stub.
  }
}

and then in my html file it'd be like this

<ngx-braintree 
	[clientTokenFunction]="getClientToken" 
	[createPurchaseFunction]="createPurchase" 
	[chargeAmount]="55.55"
	(paymentStatus)="onPaymentStatus($event)">
</ngx-braintree>

Hi,

Let me start by saying thanks for creating this simple Angular plugin. Getting it up and running was pretty simple.

Question: Are you planning on supporting CVV ?

Thanks again
Sean

Can you please add support for Angular 7? Thank you.

The BrainTree Drop in UI Script needs to be updated. Currently version 1.8.0 is being used and the latest is version 1.12.0. PayPal can break when using versions older then 1.9.3.