tobyn/angular-stripe-checkout

AngularJS wrapper around Stripe Checkout

angular-stripe-checkout's Issues

Interpolated amount gives a type error

When passing the amount using AngularJS interpolation (e.g. data-amount="{{vm.total}}", Stripe puts the following error in the console:

StripeCheckout.configure: Type mismatch for option 'amount':
Looking for type 'number', but instead we found 'string'.
You can learn about the available configuration options in the Checkout docs:
https://stripe.com/docs/checkout

I have verified the value being interpolated is a Number.

Any error catch if the Stripe Checkout window did not pop up?

So I am running this strange error. The Stripe Checkout windows something does not pop up (using your custom code example). In the error window log:

Error: Unable to communicate with Checkout. Please contact [email protected] if the problem persists.
sendMessage@https://checkout.stripe.com/checkout.js:1:48617
https://checkout.stripe.com/checkout.js:1:15530
https://checkout.stripe.com/checkout.js:1:47580
ready@https://checkout.stripe.com/checkout.js:1:47850
invoke@https://checkout.stripe.com/checkout.js:1:47521
https://checkout.stripe.com/checkout.js:1:15530
close@https://checkout.stripe.com/checkout.js:2:52386
.... ....

I have no idea what is causing this. Is there a error callback if the handler.open fail? Like I click the button that has ng-click, for some reason the window does not open. I can use a toaster message to tell user there is something wrong and try it again?

callback not working after stripe payment is successfull

<button stripe-checkout="stripeCallback" data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh" data-name="Simple Example" data-description="Five dollahs!" data-amount="500"> Buy </button>
$scope.stripeCallback=function(token){ console.log(token); }

i coudn't get the value of token in the callback functio which is stripeCallback

Issues with directive

The StripeCheckoutDirective was raising some issues when i used it in my angular application loading key from the scope. The issue did not happen the first time i loaded the view, but after i left it and came back. The issue was that the key that was being loaded was "{{ my_key }}".
I fixed this by adding a $timeout() to the directive.

Browserify not working - Wrong main file in package.json

Hi @tobyn, awesome work allowing npm/browserify, it was exactly what I needed!
However, when trying to use it I've got an error and I was able to track it to package.json having a wrong value in the main key: it says 'index.js' where it should be 'angular-stripe-checkout.js'.

Thanks for your hard work!

TypeError: Cannot read property 'apply' of undefined?

Hi, I am getting the following error when I tried to use the simple form:

TypeError: Cannot read property 'apply' of undefined
at angular-stripe-checkout.js:62
at angular.js:14569
at n.$get.n.$eval (angular.js:15848)
at n.$get.n.$digest (angular.js:15659)
at angular.js:15887
at e (angular.js:5396)
at angular.js:5668(anonymous function) @ angular.js:12332$get @ angular.js:9111(anonymous function) @ angular.js:14577$get.n.$eval @ angular.js:15848$get.n.$digest @ angular.js:15659(anonymous function) @ angular.js:15887e @ angular.js:5396(anonymous function) @ angular.js:5668

which is here in angular-stripe-checkout.js:
el.on("click",function() {
if (handler)
handler.open(getOptions(el)).then(function(result) {
callback.apply(null,result);
});
});

Does anyone know what might possibly went wrong?

iOS mobile Safari thinks Stripe checkout is an undesirable pop-up.

On Latest versions of Safari on iOS 9 the Safari mobile browser we are getting an error thrown by mobile Safari, which thinks the Stripe checkout is an undesirable pop-up and blocks it. Disabling the pop-up blocker solves the problem but we can hardly expect our users to do this.

Interpolated zip code gives a TypeError by Stripe

Similar to #18, data-zip-code="true" is not correctly parsed as a boolean and so yields a TypeError

StripeCheckout.configure: Type mismatch for option 'zipCode':
Looking for type 'boolean', but instead we found 'string'.
You can learn about the available configuration options in the Checkout docs:
https://stripe.com/docs/checkout

An easy fix is to move this line to the the BOOLEAN_OPTION_ATTRIBUTES just below.

Anyway thanks for your library, very convenient to use!

Custom directive without a controller: TypeError: Cannot read property 'apply' of undefined

Hi there, I am using a really simple code similar to the one from your simple example, in a custom Directive:

Custom Directive Code:

angular.module('mfacApp')
  .directive('test', ['StripeCheckout', '$log' function (StripeCheckout, $log) {
    return {
        templateUrl: 'test.html',
        restrict: 'E',
        replace: true,
        scope: {
            application: '=',
            index: '='
        },
        link: function (scope) {
            scope.buy = function(token) {
                $log("Stripe Token: ",token);
            }
        }
    }
});

Custom Directive Template:

<div>
    <div stripe-checkout="buy"
        data-image="{{application.icon}}"
        data-key="xxx"
        data-name="{{application.name}}"
        data-description="{{application.description}}"
        data-amount="1000">
        Buy now
    </div>
</div>

When I execute this code, the Stripe Checkout form is correctly displayed but the callback is never called when the form is submitted. In this example, the "buy" method is never triggered. I tried adding a Directive Controller, a controllerAs reference, so the "stripe-checkout" param would include an object ref and a method but it doesn't work.

In angular-stripe-checkout.js the callback is undefined:
var handler, callback = $parse(attrs.stripeCheckout)(scope);

In theory it should work but it doesn't, to fix it I replaced "callback" by "scope[attrs.stripeCheckout]" on line 68:

scope[attrs.stripeCheckout].apply(null,result);

Let me know!

Android Build Failure

I can do cordova build android and all goes well. Soon as I install the angular-stripe-checkout I get build failed.

Simple <'button stripe-checkout="method"'> method doesn't have context..!

class AuthSubscribeController {
  constructor() {
    this.user = { <user>};
  }

  doSubscription(token) {
    alert("Got Stripe token: " + token.id);  //OK
    console.log(this); //returns null
    doSomething(this.user,token.id);  //TypeError: Cannot read property 'user' of null
  }

      <div class="text-align: center;">
        <button stripe-checkout="authSubscribeController.doSubscription"
                data-key="..."
                data-name="Simple Example"
                data-description="Five dollahs!"
                data-amount="500"
                class="btn btn-lg btn-success" >
          Buy
        </button>

How do I have to deal with this?

language configuration

Stripe released a feature that allows you to haveStripe Checkout display in other languages
(Japanese, German, French, Simplified Chinese, Spanish, Italian, and Dutch),by passing data-locale attribute .
this released of stripe not yet supported in this version of angular-stripe-chekout, you can add it by adding this property
locale:"data-locale" to COPIED_OPTION_ATTRIBUTES object in angular-stripe-chekout.js

Error on ionic run android

I get this error when i try to build my ionic project for android with the angular-stripe-checkout plugin installed:

jqrgen@jQrgenpc:~/stripe-checkout-nodejs-server/ionic-example$ ionic run android
Running command: /home/jqrgen/stripe-checkout-nodejs-server/ionic-example/hooks/after_prepare/010_add_platform_class.js /home/jqrgen/stripe-checkout-nodejs-server/ionic-example
add to body class: platform-android
Running command: /home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/cordova/run 
ANDROID_HOME=/home/jqrgen/android-sdk-linux
JAVA_HOME=/usr/lib/jvm/java-7-openjdk-amd64
WARNING : No target specified, deploying to device 'BH9013N81L'.
Running: /home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/gradlew cdvBuildDebug -b /home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build.gradle -PcdvBuildArch=arm -Dorg.gradle.daemon=true
:preBuild
:compileDebugNdk UP-TO-DATE
:preDebugBuild
:checkDebugManifest
:CordovaLib:compileLint
:CordovaLib:copyDebugLint UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles UP-TO-DATE
:CordovaLib:preBuild
:CordovaLib:preDebugBuild
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl UP-TO-DATE
:CordovaLib:compileDebugRenderscript UP-TO-DATE
:CordovaLib:generateDebugBuildConfig UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets UP-TO-DATE
:CordovaLib:generateDebugResValues UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources UP-TO-DATE
:CordovaLib:processDebugManifest UP-TO-DATE
:CordovaLib:processDebugResources UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:compileDebugJava UP-TO-DATE
:CordovaLib:processDebugJavaRes UP-TO-DATE
:CordovaLib:packageDebugJar UP-TO-DATE
:CordovaLib:compileDebugNdk UP-TO-DATE
:CordovaLib:packageDebugJniLibs UP-TO-DATE
:CordovaLib:packageDebugLocalJar UP-TO-DATE
:CordovaLib:packageDebugRenderscript UP-TO-DATE
:CordovaLib:bundleDebug UP-TO-DATE
:prepareAndroidCordovaLibUnspecifiedDebugLibrary UP-TO-DATE
:prepareDebugDependencies
:compileDebugAidl UP-TO-DATE
:compileDebugRenderscript UP-TO-DATE
:generateDebugBuildConfig UP-TO-DATE
:generateDebugAssets UP-TO-DATE
:mergeDebugAssets UP-TO-DATE
:generateDebugResValues UP-TO-DATE
:generateDebugResources UP-TO-DATE
:mergeDebugResources UP-TO-DATE
:processDebugManifest UP-TO-DATE
:processDebugResources      Unable to add '/home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build/intermediates/assets/debug/www/bower_components/angular-stripe-checkout/angular-stripe-checkout.min.js.gz': file already in archive (try '-u'?)
ERROR: unable to process assets while packaging '/home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build/intermediates/res/resources-debug.ap_'
ERROR: packaging of '/home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build/intermediates/res/resources-debug.ap_' failed
 FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':processDebugResources'.
> com.android.ide.common.internal.LoggedErrorException: Failed to run command:
    /home/jqrgen/android-sdk-linux/build-tools/22.0.1/aapt package -f --no-crunch -I /home/jqrgen/android-sdk-linux/platforms/android-22/android.jar -M /home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build/intermediates/manifests/full/debug/AndroidManifest.xml -S /home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build/intermediates/res/debug -A /home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build/intermediates/assets/debug -m -J /home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build/generated/source/r/debug -F /home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build/intermediates/res/resources-debug.ap_ --debug-mode --custom-package com.ionicframework.ionicexample803434 -0 apk --output-text-symbols /home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build/intermediates/symbols/debug
  Error Code:
    1
  Output:
          Unable to add '/home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build/intermediates/assets/debug/www/bower_components/angular-stripe-checkout/angular-stripe-checkout.min.js.gz': file already in archive (try '-u'?)
    ERROR: unable to process assets while packaging '/home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build/intermediates/res/resources-debug.ap_'
    ERROR: packaging of '/home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build/intermediates/res/resources-debug.ap_' failed


* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 3.376 secs

/home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/cordova/node_modules/q/q.js:126
                    throw e;
                          ^
Error code 1 for command: /home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/gradlew with args: cdvBuildDebug,-b,/home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/build.gradle,-PcdvBuildArch=arm,-Dorg.gradle.daemon=true
ERROR running one or more of the platforms: Error: /home/jqrgen/stripe-checkout-nodejs-server/ionic-example/platforms/android/cordova/run: Command failed with exit code 1
You may not have the required environment or OS to run this project

Put in evidence that you must call StripeService.load() before call any other function

As in the title, I lost hours trying to figure it out where the error come from, when it just needed to call StripeService.load() before StripeCheckout.configure(...)

Stripe Token is coming back undefined

I'm not sure if I'm missing something obvious here, but after submitting a test payment using Checkout I'm getting an undefined token variable back in my controller. My HTML is as follows:

<md-button 
    stripe-checkout="checkout()" 
    data-zip-code="true" 
    data-key="[test key]"
    data-name="Payment" 
    data-amount="{{plan.price*100}}">
        Upgrade Now!
</md-button>

And the Controller:

function BillingCtrl($scope, StripeCheckout) {
    'use strict';
    $scope.checkout = function(token) {
        console.log('token:', token);
    };
}

angular.module('app').controller('BillingCtrl', BillingCtrl);

Any insight on what I may be missing?

iOS: Requested keys of a value that is not an object

I'm using your plugin in my app, and on android it works great, but when i run in on iOS i get this error:

Requested keys of a value that is not an object.
keys@[native code]
extend@file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:411:29
defaults@file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular-stripe-checkout/angular-stripe-checkout.js:97:11
file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/scripts/app.js:84:36
invoke@file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:4185:22
runInvokeQueue@file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:4091:40
file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:4100:25
forEach@file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:323:24
loadModules@file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:4081:12
createInjector@file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:4007:22
doBootstrap@file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:1445:34
bootstrap@file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:1466:23
angularInit@file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:1360:14
file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:26125:16
trigger@file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:2744:9
eventHandler@file:///private/var/mobile/Containers/Bundle/Application/4136E462-B248-419E-9E93-65BF92830E5D/5Treats.app/www/lib/angular/angular.js:3014:25

Can you please kindly assist?
Thanks

onhandler event on mobile

It seems like you can't call handler.open off an ng-click on mobile. Tried with iphone 6 on safari and chrome. Since Stripe Checkout on mobile opens a new window, the window doesn't pop open. I think popups only respond to a real onclick event.

3D Security

Is the plugin support 3D Security with payment intents?
If yes, do you have any wikis for that somewhere?

Directive not getting stripe_publishable_key from controller

The directive is not picking up the data-key when transitioning to this state/page... If you refresh the page it works fine, but forward/backward buttons raises this bug.

<md-button class="md-raised md-accent" stripe-checkout="purchase"
            data-key="{{stripe_publishable_key}}"
            data-name="Buy Chosen Masters"
            data-description="{{ctrl.track_db.name}}"
            data-amount="{{ctrl.final_price_stripe}}">
        Donate
      </md-button>

Failed to load resource: the server responded with a status of 400 ()
checkout.js:3 Uncaught TypeError: Cannot read property 'closed' of undefined
    at IframeView.closed (checkout.js:3)
    at Object.closed (checkout.js:3)
    at RPC.processMessage (checkout.js:2)
    at RPC.processMessage (checkout.js:2)
    at RPC.message (checkout.js:2)
    at checkout.js:2