Having trouble resolving the dependency injection for stripe-angular

Attempting to integrate the stripe-angular module into my Ionic/AngularJS application.

https://github.com/gtramontina/stripe-angular

I have installed the module using npm install stripe-angular.

This is how I include the dependency in my app:

var myApp = angular.module('myApp', 
    ['ionic','ionic.utils','stripe','google.maps','myApp.controllers','myApp.services'])
.config(function($stateProvider, $urlRouterProvider, stripeProvider) { 
    stripeProvider.setPublishableKey('pk_test_APIKEY');
});

Even without injecting the dependency into any controllers or services, I encounter the following console error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: stripeProvider
http://errors.angularjs.org/1.2.25/$injector/unpr?p0=stripeProvider
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:7703:12
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11427:19
    at getService (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11555:39)
    at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11582:13)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11510:37
    at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
    at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11497:5)
    at createInjector (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11437:11)
    at doBootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9069:20)
    at bootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9084:12)
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=myApp&p1=Error%…%3A%2F%2Flocalhost%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A9084%3A12)

Here's the relevant part of my index.html file:

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="js/services.js"></script>

Am I making a mistake with my dependency injection or overlooking something? Detailed explanations would be greatly appreciated. Thank you!

Answer №1

After reviewing the instructions provided in the stripe-angular readme, it appears that there is a missing step. Specifically, the script mentioned in their second step:

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

This script actually refers to the main script for Stripe and not the stripe-angular directive itself. The error you encountered was due to the fact that the stripe-angular module ('stripe') is not included in this particular script.

To resolve this issue, you will need to first follow step #1 outlined in the readme, which involves downloading stripe-angular using Bower. Additionally, make sure to include a second script reference to stripe-angular.js like so:

<script src="your-bower-folder/stripe-angular.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Browser fails to display input value when altered

I have noticed that when the value of the Input element changes, the browser does not display the updated value. However, you can verify this change by inspecting the DevTools in the browser. I am curious as to why the actual value of the Input element is ...

AngularJS dynamic and wildcard routing strategy is a powerful feature that allows for flexible and customizable navigation within web applications

Currently, I have implemented angular ui router as shown below: angular .module('app', [ 'ui.router' ]) .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) { $u ...

Transfer the cropped image to the database through AJAX on the client side and PHP on the server side

I am attempting to upload an image to a Database using JavaScript on the client-side and PHP on the server-side. The first step is selecting an image from the gallery. After zooming and cropping the image, it should be passed to the database. The issue ...

Purging the internal buffer of the node stream

Utilizing Node Serialport, I've implemented an event listener to check the data streaming through the connection for correct units. If the units don't match what the user has set, I utilize the .pause() method to pause the stream and inform the u ...

Incorporated React component from Rails-assets.org into a Rails application

I have been trying to incorporate a react component from rails-assets.org into my Rails application. Currently, I am using the react-rails gem to write react view in my application. Now, I want to use other react components such as react-router, react-sel ...

Displaying a loading progress bar while the website is being loaded using Javascript

Currently working on developing a GUI site, I am looking to implement a progress bar. However, I require some JavaScript code that can detect the loading status of the site along with the number of elements/images that have been loaded so far, as well as d ...

Angular.js Integration for Custom Single Sign On

I currently have 3 websites built using Angular.js 1.5.8 and I want to integrate them with a single sign-on web application for centralized authentication management. How can I achieve this without relying on external libraries or frameworks? It seems ch ...

What is the reason behind the lack of data sharing among controllers in my service?

I have created a factory to retrieve data from the Database and pass it to all controllers in my application, like so: (function () { angular.module('appContacts') .factory('dataService', ['$http', dataService]); ...

React checkbox remains checked even after uncheckingIs this revised version

I am currently working on a React application where I display an array of matches as a list of rows. Each row contains two athletes, and users can use checkboxes to predict the winner for each match. Only one athlete per row can be checked. To keep track o ...

Filtering data within a specific date range on an HTML table using JavaScript

I am attempting to implement a date filtering feature on my HTML table. Users should be able to input two dates (From and To) and the data in the "Date Column" of the table will be filtered accordingly. The inputs on the page are: <input type="date" i ...

What could be the issue with trying to bind an event handler in this manner?

I'm having some trouble binding an event handler with jQuery: $(document).ready(function () { var newsScrollerForPage = new NewsScroller(); newsScrollerForPage.init(); $('#scroller-left-a').bind('on ...

Displaying AJAX data in Django using an HTML table

My Django template currently has the following AJAX script running: function create_table() { $.ajax({ method: "GET", url: "/api/data/", success: function(data){ console.log('button clicked') ...

I encountered an issue while attempting to manipulate/retrieve the JSON value using REGEX, resulting in an undefined return

I am attempting to retrieve the currency value from a JSON file and if it is USD, then I want to change it to AUD. When trying to find the currency attribute in the JSON file, it returned 'undefined' as shown below: Code: var datastring = JSON. ...

Observables in Knockout.js vanish after being bound

I'm encountering a peculiar issue with my Knockout script. Here is the viewModel: viewModel = { viewShown: function () { if (params.id !== undefined) timer = setInterval(loadVorgangsdetails, 100); else { $( ...

The Ajax URL is failing to connect with the controller through IIS

I am facing an issue where the application gets stuck in the Home controller when running it on IIS. It doesn't progress to the next controller (Data controller) as specified in the URL. However, when I run it in debug mode, everything works fine. How ...

How to eliminate space preceding a div using jQuery?

I am trying to modify the following code snippet: <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> Is there a method for me to eliminate the space before div "three" in order to achieve this result: ...

An assortment of the most similar values from a pair of arrays

I am seeking an algorithm optimization for solving a specific problem that may be challenging to explain. My focus is not on speed or performance, but rather on simplicity and readability of the code. I wonder if someone has a more elegant solution than mi ...

Invoke the method in customButton component of fullcalendar

I've integrated a custom button into my fullcalendar: ngOnInit() { this.calendarOptions = { customButtons: { custom1: { text: 'Add event', click() { this.openModal(); } } }, height: 600, editable: t ...

VueJS Error: Unable to access the 'className' property of an undefined variable

I'm currently working on a menu design project where I need to highlight the active tab/page that the user is on by adding a color class and utilizing JavaScript to update the active link. Here's a snippet of my template: <div class="menu ...

What is the best way to prevent double clicks when using an external onClick function and an internal Link simultaneously

Encountering an issue with nextjs 13, let me explain the situation: Within a card component, there is an external div containing an internal link to navigate to a single product page. Using onClick on the external div enables it to gain focus (necessary f ...