How to include external JS SDK in .NET .razor? - javascript

I'm trying to include the PayPal SDK in my .NET application. From the PayPal documentation, I need to include the following (with MY_CLIENT_ID coming from my PayPal application)
<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id=MY_CLIENT_ID"></script>
If I place this in my index.html, everything works perfectly.
The issue is that MY_CLIENT_ID cannot be hard-coded, as it varies from environment. From my understanding, this can't be configured dynamically in index.html. To remedy this, I've placed the id in my config file, then use that value to generate the src URL. Then, in my .razor file I'm using
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var sdkUrl = await _billingApi.GetPayPalSDK();
await JS.InvokeAsync<IJSObjectReference>("import", sdkUrl);
}
}
from Microsoft's documentation
However, I'm running into this JS error and can't seem to find a solution. The sdkUrl matches exactly what I put in index.html. My guess is .NET is looking for the sdkUrl inside my project? Does anyone know the proper way to include an external JS script with a dynamic URL?

Related

Raw Github js file not loading (direct link) like CDN

I created a coding library for the public to use by putting a <script> tag in the <head> tag on the page but when I try to use the a function it says undefined when it ran.
. I linked the url to the index.js file but it doesn't load it to the client user.
<head>
<script src="https://github.com/McJoe21/coderslib/blob/master/index.js"></script>
</head>
When I run a console.log(ranInteger(1,10)) which I have defined in my index.js file but I get a ranInteger is not defined error. All help is welcome!
Technically speaking, GitHub doesn't allow source code to be accessed from their site like a CDN, however from This StackOverflow Question, there is a workaround. I wouldn't recommend using it, but you can use "https://cdn.jsdelivr.net/gh/" to get your script to work (from user #anayarojo on StackOverflow).
The url in your case would look like this:
https://cdn.jsdelivr.net/gh/McJoe21/coderslib/index.js
The pattern for the URL is:
https://cdn.jsdelivr.net/gh/<username>/<repository>/<file>
You cannot load JavaScript from raw version of Github because the content type(MIME type) is text/plain, not application/javascript or text/javascript. This is to stop you using Github as a CDN. Still you can achieve serving raw file as cdn in the following way, using cdn.jsdelivr.net.
https://cdn.jsdelivr.net/gh/<github-username>/<github-repo-name#branch-name>/<filename>
If file is at main branch, no need to include in branch section after #. If you mention also, it'll work.
For more reference
The file you're attempting to import is a GitHub viewer for a file. To import the raw data for that file, you'd want to use this code:
<script>
const source = 'https://raw.githubusercontent.com/McJoe21/coderslib/master/index.js';
fetch(source).then((response) => {
return response.text()
}).then((response) => {
eval(response);
}).catch((error) => {
console.error(`An error occured while attempting to load the "${source}" resource!`);
console.error(error);
});
</script>
Since GitHub does not directly allow the import of their user content, you will need to wrap your source URL in the above fetch-eval block.

How do I dynamically load third party libraries that only offer a CDN in an Angular 7 App?

I am trying to download the content of a javascript file from a CDN imperatively within a typescript file so that I can make use of it in the correct lifecycle hooks, and so that I can ensure it is only downloaded when it is first needed.
For example the googleCDN to download Jquery:
I do not want to add the library src to my index.html page, and I do not want to add it to my angular.json configuration file because I do not want to use this library in many places in my app, and so I do not want to always force my users to download it.
I have been experimenting with the HttpClient.JsonP method because the CDN server I am trying to request the library from is enforcing CORS, however, I believe that because the response is not JSON, rather a function, it doesn't work.
example code:
load<T = any>(): Observable<T> {
return this.http
.jsonp(
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
'callback'
) as Observable<T>;
}
with the error:
"JSONP injected script did not invoke callback."
That error makes sense I think because the response is not JSON and is not wrapped in a function like a browser expects.
I am now trying a similar technique as here:
https://gist.github.com/zainzafar90/1f58a4a04ac17fcf8e7424a053620822#file-dynamic-script-loader-service-ts
But I really don't like this as I believe I will have to augment a global variable with this, although I don't know how as of yet.

How can I serve remote React app with a script tag?

We have at our company a react app (built with create-react-app) which is served today via an iframe, which works well.
A need has risen to serve the app (which is always embedded within other pages), with a script tag alone (no iframe tag).
I thought of something like:
<div id="app-placeholder"></div>
<script src="https://our-app.com/init.js"></script> // this will create a function called window.InitMyApp
<script>
InitMyApp('#app-placeholder', 'token', otherOptions)
</script>
I've tried to create init.js file in the react app's public folder. I can access the file.
From that file, how can I render the react app itself to the given selector (#app-placeholder)?
Because this file is served as-is, and doesn't get transpiled by webpack/babel, I cannot use import/jsx/require() and other stuff.
Am i on the right track?
Should I manually transpile this file?
Are there any other solutions to this rendering method?
You should try configuring the compiler with { output.library }. This should produce a compilation output that's ready for distribution, which means you can easily reference it in another document (and not need to worry about, say, transpiling/optimizing sources, because this was already performed by webpack).
Here's an example of a multi-part library produced by webpack. As you can see, the entrypoint exports are being assigned to window.

shopify js buy sdk not working in wordpress

I want to use shopify js buy sdk with wordpress. I've downloaded the sdk files and follow the steps as described in the documentation
import Client from 'shopify-buy';
const client = Client.buildClient({
domain: 'your-shop-name.myshopify.com',
storefrontAccessToken: 'your-storefront-access-token'
});
But It always give an error, which says import declarations may only appear at top level of a module.
So I've keep it at the top and add type="module" at the script tag. then the error is solved, but javascript code within this script is not working...
So, can anyone tell me what can I deo to solve this problem?
If you aren't using any of the Node or JS package managers then try using the UMD package available on their documentation page:
<script src="http://sdks.shopifycdn.com/js-buy-sdk/v1/latest/index.umd.min.js"></script>
You can use it like any other js script, it exposes a global window.ShopifyBuy factory.
Then use it like this:
const client = window.ShopifyBuy.buildClient({
domain: 'your-shop-name.myshopify.com',
storefrontAccessToken: 'your-storefront-access-token'
});

cordova window.location.href behaviour error

In my assets/www/index.html, I am trying to open html in the
/data/data/files/xyz/index.html with this javascript command:
window.location.href = cordova.file.dataDirectory + "xyz/index.html";
In the ../xyz/index.html it also included the cordova.js which exists on the same xyz directory:
<script type="text/javascript" src="cordova.js"></script>
The index.html can be loaded, but in the catlog show error like below
W/CordovaWebViewImpl﹕ Blocked (possibly sub-frame) navigation to
non-allowed URL: gap://ready
is there something wrong with my method? Is it wrong to use window.location.href to open another cordova application in the data folder ?
EDIT : I already found the root cause, that is my cordova.js in the /data/data/files/xyz/cordova.js is having different version with the one in asset folder. after i copied the same cordova js version, it can be loaded without error warning. Thanks.
You don't need to use "cordova.file.datadirectory". That's only if you use the file plugin for accessing data files, such as saving high-scores in a game or level data. You do not use the plugin for loading/unloading pages into the current webview.
You would want all of your HTML files to be in the same folder branch as your "index.html". Assume a directory structure like this:
/ index.html <!---- this is your current index.html
/ page2.html
/ js / index.js
/ xyz /index.html
All you would have to do is window.location='xyz/index.html'. However, I strongly encourage you to not replace entire pages if you're developing for iOS. It's almost a guarenteed way to get your app rejected. Try loading your pages in via AJAX using a framework like "Framework7".
NOTE: You can only view files within the webview, that are in the same folder or are children of, as your initial index.html.
EDIT: You want to load another Cordova webview application. I'd suggest still making it a child of the initial "index.html" folder. However, you might be able to write a plugin or customize the platform itself to access the other files. However, that's out of the scope of this question!

Categories

Resources