Trying to follow Step 2 here, from within a React app: https://stripe.com/docs/connect/creating-a-payments-page?cancel=true#web-accept-payment
// Initialize Stripe.js with the same connected account ID used when creating
// the Checkout Session.
const stripe = Stripe('pk_test_s3JwCARtUtLnQGm4xlDx70Wt002kwkyJ8P', {
stripeAccount: '{{CONNECTED_STRIPE_ACCOUNT_ID}}'
});
I’ve ran npm install #stripe/stripe-js already, but does anybody know how to import Stripe?
I’ve already tried:
import {Stripe} from '#stripe/stripe-js';
import Stripe from '#stripe/stripe-js';
but both fail with
Attempted import error: 'Stripe' is not exported from '#stripe/stripe-js'.
in the npm docs they suggest (https://www.npmjs.com/package/#stripe/stripe-js):
import {loadStripe} from '#stripe/stripe-js';
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
but this is clearly different to what they gave in the Stripe docs.
Also this fails for me with Uncaught (in promise) IntegrationError: Invalid value for Stripe(): apiKey should be a string. You specified: undefined. even though I’ve verified the value I supply is not undefined.
I’m not sure why they can’t include a proper import statement in their docs...but anyway, does anyone know how to fix this?
in the npm docs they suggest (https://www.npmjs.com/package/#stripe/stripe-js):
import {loadStripe} from '#stripe/stripe-js';
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
but this is clearly different to what they gave in the Stripe docs.
It's not different. It's just a helper function to do the same thing. The stripe docs would have you add a script tag to your document, like this:
<script src="https://js.stripe.com/v3/"></script>
That script tag will download stripe and add it to the global variable window.Stripe.
Calling loadStripe will create a <script> tag with the right properties, append it to the document, wait for it to load, call init passing in your api key, and then resolve the promise to the value in window.Stripe.
Related
METHOD 1
I am trying to embed a chart from MongoDB using the following code, which was adapted from documentation from MongoDB and NPM.
<script src="https://unpkg.com/#mongodb-js/charts-embed-dom"></script>
<script>
const ChartsEmbedSDK = window.ChartsEmbedSDK;
const sdk = new ChartsEmbedSDK({
baseUrl: "https://charts.mongodb.com/charts-webscraping-ciaso-ercot-wnjhz",
});
const chart = sdk.createChart({
chartId: "62d7224c-79ab-41ca-83f6-690f4ab86869",
});
chart.render(document.getElementById('chart'));
</script>
</body>
The error I’m getting is “TypeError t is null”
a picture of the error
Near as I can tell that might mean that whatever is supposed to be imported from https://unpkg.com/#mongodb-js/charts-embed-dom is not coming through so the sdk and the chart aren’t getting created properly. Hence why the chart comes up null when it trys to getElementById.
METHOD 2
I also tried a different method. What you see below is directly copied from Mongo’s documentation. I got an error that “relative references must begin with /, ./, or ../”.
<script type=module> /*did that to avoid error cannot import outside a module*/
import ChartsEmbedSDK from "#mongodb-js/charts-embed-dom"; //error: relative references must begin with /, ./, or ../
//import ChartsEmbedSDK from "https://unpkg.com/#mongodb-js/charts-embed-dom" // Ambiguous indirect export: default
// import ChartsEmbedSDK from "/unpkg.com/#mongodb-js/charts-embed-dom" //error not found.
//import 'https://unpkg.com/#mongodb-js/charts-embed-dom'; // TypeError: t is null (same as other method)
const sdk = new ChartsEmbedSDK({
baseUrl: "https://charts.mongodb.com/charts-webscraping-ciaso-ercot-wnjhz",
});
const chart = sdk.createChart({
chartId: "62d7224c-79ab-41ca-83f6-690f4ab86869",
height: "700px",
// Additional options go here
});
chart.render(document.getElementById("chart"));
</script>
You can see I also tried a few other things (commented out).
I think that for method 2 a possible reason it’s not working is that I wasn’t able to install the #mongodb-js/charts-embed-dom package correctly. When I tried to install using npm this is what I saw:
screenshot of error with npm
I did some looking into this problem but was never able to resolve it.
Overall it seems like I'm not able to properly import the charts-embed-dom. It seems to me like method 1 only has one problem to fix, whereas method 2 has possibly 2 or more layers of problems, so I’m hoping there is a relatively simple solution to method 1.
I know another solution would be to use an iframe. I've gotten that to work, but it just doesn't seem to be versatile enough to do what I need (drop down boxes, dynamic filtering)
I'm encountering an error when trying to add a user to firebase authentication. The const auth is defined before the script is loaded. I've tried calling with and without the app parameter. The user is not being added and I can't seem to figure this error out. I've cut out only the code I think is relevant. Apologies if this is a stupid question, I'm just diving into HTML and JS.
Error: Uncaught ReferenceError: auth is not defined
at HTMLFormElement. (auth.js:12)
From html file:
import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-auth.js";
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
<script src="js\auth.js"></script>
From js file:
auth.createUserWithEmailAndPassword(email, password).then(cred => {
console.log(cred);
});
You're using the modular SDK, which means that imported names are no longer added to a global namespace. If your include file (js.auth.js) needs access to the auth service, you will need to import getAuth into that file too and initialize it there as well.
This is how I import firebase into the project:
import firebase from 'firebase/app'
import firestore from 'firebase/firestore'
import auth from 'firebase/auth'
/*
Config */
const FIREBASE_CONFIG = {
...
}
/*
Get a Firestore instance */
export const firebaseInstance = firebase.initializeApp(FIREBASE_CONFIG)
Later I would just:
import { firebaseInstance } from 'database' whenever it's needed and have to access singup, login and other available API methods like for example:
firebaseInstance.auth().fetchSignInMethodsForEmail(email)
However when I am trying
firebaseInstance.auth.EmailAuthProvider as defined in the official documentation it's simply not available and returns undefined
Can somebody please suggest what can be missing?
P.S: I've tried firebaseInstance.auth().EmailAuthProvider however after researching in github thread how other people do it, I believe that is not the thing :)
Documentation says it's static method, so it doesn't make sense to call it on instance? You can find it under firebase.auth.EmailAuthProvider
When i execute the code belove, this error shows up: Uncaught TypeError: PouchDB.plugin is not a function. If i install the pouchdb package from npm and change the first line accordingly, then the plugin part works but if i want to use a function from pouchdb-authentication i getting a function not found error.
const PouchDB = require('pouchdb-browser');
let auth = require('pouchdb-authentication');
PouchDB.plugin(auth);
The code should execute without errors and the functions from the authentication plugin should work.
use default
for browser or use cdn link
const PouchDB = require('pouchdb-browser').default;
for node
const PouchDB = require('pouchdb').default;
I fixed it with replacing the code this way:
import PouchDB from 'pouchdb';
import auth from 'pouchdb-authentication';
PouchDB.plugin(auth);
Now it works without problems
I'm trying to load translations from a JSON file with react-localize-redux and I keep getting this error. This is all fairly new to me so I apologise if it is something obvious. As fair as I can tell from reading documentation this "should" work?
The error message I am receiving:
translate.js
import { combineReducers, createStore } from 'redux'
import { localizeReducer, initialize, addTranslationForLanguage, getTranslate } from 'react-localize-redux'
import translationsEn from '../../../nls/en.json'
const localeStore = createStore(combineReducers({
locale: localizeReducer
}))
const languages = ['en']
localeStore.dispatch(initialize(languages))
localeStore.dispatch(addTranslationForLanguage(translationsEn, 'en'))
export default getTranslate(localeStore.getState().locale)
and in my component:
import translate from '../state/translate/translate'
...
<span className='node-output-schema__title'>{translate('outputSchema.title')}</span>
Any ideas to what might be going wrong?
it seems like you mixed some different frameworks inside here.
The localisation package is called - react-localize-redux.
But inside your error logs I can see that you are using some angular.
Also I just checked the documentation from the react-localize-redux package and it seems like you are working with an outdated version.
For me it should be enough to just provide a Provider to your app and afterwards use the higher order component (import { withLocalize } from "react-localize-redux";
)
Also I would recommend to use this package, which is a lot easier to handle (and indeed I used it for a project myselft)
react-18next (https://github.com/i18next/react-i18next)
this error rases because your property is undefined, so check your error and get the exact line(you can find the error on the console tab of your browser) and check which property used there and check where you filled that property if you didn't fill your property then set it