I'm trying to implement Google Pay to my Ionic app. As I didn't find any convenient library matching both, I tried to use what is described here
https://developers.google.com/pay/api/web/guides/tutorial#full-example.
Problem: loading the pay.js library
I don't know how to load the library pay.js in my Ionic project.
I hope that's pretty clear.
Thanks for your help.
You need to first include the pay.js library.
The preferred method is to include the script in your page:
<script src="https://pay.google.com/gp/p/js/pay.js" async></script>
Alternatively, if you need to load it with JavaScript you could dynamically load the script:
function loadScript(src) {
return new Promise(function(resolve, reject) {
let script = document.createElement('script');
script.src = src;
script.onload = () => resolve(script);
script.onerror = () => reject(new Error(`Script load error for ${src}`));
document.head.append(script);
});
}
loadScript('https://pay.google.com/gp/p/js/pay.js')
.then(() => getGooglePayPaymentsClient());
For code completion in supported editors, you can use the #types/googlepay package:
npm install --save-dev #types/googlepay
Related
I am working on a javaScript / react playground (something like very simple codesandbox.io) and I'm trying to figure out how to transpile the code. I was thinking of using Babel transform but the app itself is built using create-react-app so I do not have access to Babel. My question is, if I do something like the following and install Babel, will it also override how create-rect-app currently transpiles the code for the app?
// transpile.js
const babelOptions = {
presets: [ "react", ["es2015", { "modules": false }]]
}
export default function preprocess(str) {
const { code } = Babel.transform(str, babelOptions);
return code;
}
EDIT:
I've since learned that I can use Babel standalone for exactly this use case! Now it's just to figure out how to configure it. I would still appreciate help but if I find a solution first I will post for others :)
Ok so I have figured this out but it is not straight forward. I will try to add some details here in case anyone else finds it helpful.
I first needed to load Babel standalone and so I used this answer to create a custom hook to load a script:
import { useEffect } from 'react';
const useScript = url => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
console.log(`${url} script loaded`);
return () => {
document.body.removeChild(script);
console.log(`${url} script removed`);
}
}, [url]);
};
export default useScript;
then I used it in my component like this:
import useScript from '../../../hooks/useScript';
useScript("https://unpkg.com/#babel/standalone/babel.min.js");
then I later use the code I wrote in the initial question to transpile my code.
I am using this native plugin to open a InAppBrowser. Also I want to inject a css and/or JS in that page, as in that page mentioned, I should use below code for css inject but it doesn't work:
browser.on('loadstop').subscribe(event => {
browser.insertCSS({ code: "body{color: red;" });
});
Can anyone help me?
You can execute javascript with below syntax
let promise = browser.executeScript({
code: '(function() {if(functionname) { return functionname(); }}())'
});
This will return promise
promise.then((values) => {
// process values here
});
where browser is instance of your inappbrowser for example -
const browser = this.iab.create('url', "_blank", this.options);
When using the Cameara to take a picture with destinationType: this.camera.DestinationType.FILE_URI, the resulting URL will not work to display the image. For example, when attempting to take a photo like this:
this.camera.getPicture(options).then((url) => {
// Load Image
this.imagePath = url;
}, (err) => {
console.log(err);
});
Attempting to display it as <img [src]="imagePath" > will result in an error (file not found).
The problem here is that the URL is in the file:///storage... path instead of the correct one based on localhost.
In previous versions of Ionic, this would be solved by using normalizeURL. This will not work on Ionic 4 (or at least I could not make it work).
To solve this issue, you will need to use convertFileSrc():
import {WebView} from '#ionic-native/ionic-webview/ngx';
...
this.camera.getPicture(options).then((url) => {
// Load Image
this.imagePath = this.webview.convertFileSrc(url);
}, (err) => {
console.log(err);
});
Now the image URL will be in the appropriate http://localhost:8080/_file_/storage... format and will load correctly.
See WKWebView - Ionic Docs for more information.
In my case, the following code works with me
const downloadFileURL = 'file:///...';
// Convert a `file://` URL to a URL that is compatible with the local web server in the Web View plugin.
const displayedImg = (<any>window).Ionic.WebView.convertFileSrc(downloadFileURL);
In case some gots here looking for the answer on ionic4, check this out
"Not allowed to load local resource" for Local image from Remote page in PhoneGap Build
and look for the answer from #Alok Singh that's how I got it working on ionic4 and even works with livereload
UPDATE december 2021:
You have to install the new Ionic Webview
RUN:
ionic cordova plugin add cordova-plugin-ionic-webview
npm install #awesome-cordova-plugins/ionic-webview
Import it in app.module and your page where you wanna use it:
import { WebView } from '#awesome-cordova-plugins/ionic-webview/ngx';
image = "";
constructor(private webview: WebView){}
Then this will work:
this.camera.getPicture(options).then((imageData) => {
this.image = this.webview.convertFileSrc(imageData)
}, (err) => {
// Handle error
});
And show it in the HTML page:
<img [src]="image" alt="">
I'm developing an ionic project.
I have follwed all steps to installa Social Sharing and Deeplinks.
This is my schema when I install plugin.
ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=app --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=app.com --variable ANDROID_PATH_PREFIX=/
But when I share with Social Sharing don't send a url, Social Sharing send as string or via email send some structure as string an other part as url.
e.g. via hangout as string
e.g. via email app://app.com/page --> app:// as string and app.com/page as url
In Social share documentation schema is share(meesage, subject, file, url)
message:string, subject:string, file:string|Array, url:string
this.socialSharing.share('Lorem ipsum', 'title', null, 'app://app.com/about')
.then( ()=> {
console.log('Success');
})
.catch( (error)=> {
console.log('Error: ', error);
});
The app open deeplinks when I tested using browser from codepen.io with hiperlink.
< h1 >< a href="app://app.com/about" >Click Me< /a>< /h1>
But when I share a deeplink send as string.
Why??? Can you help me???
I struggled with the same problem, the solution to this is very straight forward:
Do not use custom url schemes
The main reason for not using custom url schemes is that Gmail and other webmail provider indeed destroys links such as "app://...". So there is no way to get this work.
See the following links for details:
Make a link in the Android browser start up my app?
https://github.com/EddyVerbruggen/Custom-URL-scheme/issues/81
Use universal links instead
Universal links is supported by Android und iOS. Since you are already using the ionic-plugin-deeplinks plugin, you already configured a deeplink url.
All you have to do is change
href="app://app.com/about"
to
href="https://app.com/about"
For using universal links you need to create configuration files for android and iOS. These files must include application identifiers for all the apps with which the site wants to share credentials. See the following link for details:
https://medium.com/#ageitgey/everything-you-need-to-know-about-implementing-ios-and-android-mobile-deep-linking-f4348b265b49
The file has to be located on your website at exactly
https://www.example.com/.well-known/apple-app-site-association (for iOS)
https://www.example.com/.well-known/assetlinks.json (for android)
You can also use to get data from custom URL and deep link in our app if exist. Otherwise, redirect to play/app store like this:
index.html
$(document).ready(function (){
var lifestoryId = getParameterByName('lifestoryId');
if(navigator.userAgent.toLowerCase().indexOf("android") > -1){
setTimeout(function () {
window.location.href = "http://play.google.com/store/apps/details?id=com.android.xyz&hl=en";
}, 5000);
}
if(navigator.userAgent.toLowerCase().indexOf("iphone") > -1){
setTimeout(function () {
window.location.href = "https://itunes.apple.com/us/app/app/id12345678?ls=1&mt=8";
}, 5000);
}
window.location.href = "app://lifestory/info:"+lifestoryId;
});
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
Call link like: BASE_URL/index.html?lifestoryId=123
I am a UI person and very new to ionic framework.. I wanted to add search feature in my android app built using Ionic framework. After a research i found that I will need to use this plugin https://github.com/djett41/ionic-filter-bar. but there is no detail documentation available. Can anyone please guide how to use this plugin working. I have made all setup but stuck with actual code.
First of all you must install the plugin. You can use bower for that:
bower install ionic-filter-bar --save
and it will copy all the javascript and css needed in the lib folder inside www.
Then you must add the references to the css to your index.html:
<link href="lib/ionic-filter-bar/dist/ionic.filter.bar.css" rel="stylesheet">
same thing for the javascript:
<script src="lib/ionic-filter-bar/dist/ionic.filter.bar.js"></script>
You have to inject the module jett.ionic.filter.bar you your main module:
var app = angular.module('app', [
'ionic',
'jett.ionic.filter.bar'
]);
and you must reference the service $ionicFilterBar in your controller:
angular.module('app')
.controller('home', function($scope, $ionicFilterBar){
});
Now you can start using it.
In my sample I want to trigger the search-box when the user clicks/taps on a icon in the header. I would add this HTML to the view:
<ion-nav-buttons side="secondary">
<button class="button button-icon icon ion-ios-search-strong" ng-click="showFilterBar()">
</button>
</ion-nav-buttons>
The action trigger an event in my controller showFilterBar:
$scope.showFilterBar = function () {
var filterBarInstance = $ionicFilterBar.show({
cancelText: "<i class='ion-ios-close-outline'></i>",
items: $scope.places,
update: function (filteredItems, filterText) {
$scope.places = filteredItems;
}
});
};
which creates the $ionicFilterBar and shows it.
As you can see here I am using an array of objects $scope.places
$scope.places = [{name:'New York'}, {name: 'London'}, {name: 'Milan'}, {name:'Paris'}];
which I have linked to the items member of my $ionicFilterBar. The update method will give me in filteredItems the items (places) filtered.
You can play with this plunker.
Another option is to use the plugin to actually fetch some data remotely through $http.
If we want to achieve this we can use the update function again.
Now we don't need to bind the items to our array of objects cause we won't need the filtered elements.
We will use the filterText to perform some action:
$scope.showFilterBar = function () {
var filterBarInstance = $ionicFilterBar.show({
cancelText: "<i class='ion-ios-close-outline'></i>",
// items: $scope.places,
update: function (filteredItems, filterText) {
if (filterText) {
console.log(filterText);
$scope.fetchPlaces(filterText);
}
}
});
};
We will call another function which will, maybe, call $http and return some data which we can bind to our array of objects:
$scope.fetchPlaces = function(searchText)
{
$scope.places = <result of $http call>;
}
Another plunker here.
PS:
If you want to configure it using some sort of customization you must do it in your configuration using the provider $ionicFilterBarConfigProvider:
angular.module('app')
.config(function($ionicFilterBarConfigProvider){
$ionicFilterBarConfigProvider.clear('ion-ios-close-empty');
})
PPS:
In my plunker I've included the css and the script directly copying it from the source.
UPDATE:
Someone asked not to replace the list with the updated one.
My cheap and dirty solution is to check if the filterText contains some values. If it's empty (no searches) we go throught each element an set a property found = false otherwise we compare the places array we the filteredItems array.
Matching elements will be marked as found.
function allNotFound(filteredItems) {
angular.forEach($scope.places, function(item){
item.found = false;
});
}
function matchingItems(filteredItems) {
angular.forEach($scope.places, function(item){
var found = $filter('filter')(filteredItems, {name: item.name});
if (found && found.length > 0) {
console.log('found', item.name);
item.found = true;
} else {
item.found = false;
console.log('not found', item.name);
}
});
and now we can integrate the filter bar this way:
$scope.showFilterBar = function () {
var filterBarInstance = $ionicFilterBar.show({
cancelText: "<i class='ion-ios-close-outline'></i>",
items: $scope.places,
update: function (filteredItems, filterText) {
if (!filterText) {
allNotFound();
} else {
matchingItems(filteredItems);
}
}
});
};
We can use the found attribute of the object to change the style of the element.
As always, a Plunker to show how it works.
Ionic uses Angular, and Angular include an atributte filter very useful. Look this: https://docs.angularjs.org/api/ng/filter/filter and the example there. Regards