How can I integrate a PayPal payment gateway in flutter framework. I tried with web view but not get success. What is the best way for it.
First I tried with access token and RSET API, but there is problem that no user login for payment. My code is below and this code run with Tryit Editor successfully
import 'package:flutter/material.dart';
import'package:flutter_webview_plugin/flutter_webview_plugin.dart';
class PayPalPayment extends StatefulWidget {
#override
_PayPalPaymentState createState() => _PayPalPaymentState();
}
class _PayPalPaymentState extends State<PayPalPayment> {
String test = "Test Charge";
int amount = 100;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: WebviewScaffold(
url: new Uri.dataFromString('''
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<script
src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID">
</script>
<script>paypal.Buttons().render('body');</script>
</body>
</html>
''', mimeType: 'text/html').toString(), ),
);
}
}
SB_CLIENT_ID = My client id
If you're planning to handle responses from inside a WebView, you can use webview_flutter plugin and follow this similar approach.
However, if you're looking for an easier approach, I suggest using Flutter's pay package for handling payment transactions. The package has support for Apple Pay and Google Pay - both of which supports Paypal.
PayPal doesn't support 'WebViews'. Ref: https://developer.paypal.com/docs/api/info-security-guidelines/#secure-applications
Related
I have some basic Server and Client Side code with FastAPI, but I am trying to find the best way to read in that data for a live application that does some audio processing. I am not sure how to approach this, as FastAPI can only read the data from the client as bytes. Should I even bother converting it to a Blob after recording? Maybe use HTTP for simplicity (just building a prototype so it does not need to be optimal)? I also read about RTSP but I can't seem to find any good resources for it, so I would appreciate some way to point me in the right direction. Thanks for any advice!
Client
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>helloworld</h1>
<script>
var ws = new WebSocket("ws://localhost:8000/ws", 'echo-protocol');
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start(5000);
mediaRecorder.addEventListener("dataavailable", event => {
console.log("sending audio");
const audioBlob = new Blob([event.data], {type: 'audio/mp3'});
ws.send(audioBlob);
console.log("sent audio");
});
});
</script>
</body>
</html>
Server
from fastapi import FastAPI, WebSocket, Request
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory="templates")
#app.get("/")
def read_root(request: Request):
return templates.TemplateResponse("index.html", {"request": request})
#app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
await websocket.accept()
while True:
data = await websocket.receive_bytes()
I would like to create a preview of a url with the title and thumbnail in flutter
I downloaded the web page correctly with the http package, but I can't get the tag
https://flutter.dev/docs/cookbook/networking/fetch-data
var document = parse('''<!doctype html>
<html lang="en">
<head>
<title>Hello World!</title>
</head>
<body>
<h1>HELLO WORLD!</h1>
<p>PAGE HTML!</p>
<img src="image.jpg">
</body>
</html>''');
print("PRINT - "+document.body.getElementsByTagName('h1').toString()); --> ("PRINT - [<html h1>]") *
*I would like to get the h1 title : HELLO WORLD!
Thank you.
You can use flutter-link-preview plugin:
import 'package:flutter/material.dart';
import 'package:link_preview/widget/whatsapp/index.dart';
WhatsAppLinkPreview whatsapp = WhatsAppLinkPreview();
void main() {
runApp(MaterialApp(
home: Scaffold(
body: Center(
child: whatsapp.build('https://whatsapp.com')
),
),
));
}
i did it once using
html plugin
it gives you something like
var document = parse(response.body);
document.getElementById // or tagName or className
but you will get weird html element needs to be parsed
print(document.body.getElementsByTagName('h1')[0].innerHtml);
works most of the time.
I am working with braintree paypal checkout function, i found jquery code for that, i need to place Braintree Sandbox Auth Key in jquery variable, i created account in braintree, i tried all that code, but in jquery console log it says authrization failed, can anyone please help me where can i find that code ?
Here is my sameple code
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script src="https://js.braintreegateway.com/web/3.11.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.11.0/js/paypal-checkout.min.js"></script>
</head>
<body>
<div id="paypal-button-container"></div>
<script>
var BRAINTREE_SANDBOX_AUTH = '38mqtdwp4nth5tbk';
// Render the PayPal button
paypal.Button.render({
// Pass in the Braintree SDK
braintree: braintree,
// Pass in your Braintree authorization key
client: {
sandbox: BRAINTREE_SANDBOX_AUTH,
production: '<insert production auth key>'
},
// Set your environment
env: 'sandbox', // sandbox | production
// Wait for the PayPal button to be clicked
payment: function(data, actions) {
// Make a call to create the payment
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '1', currency: 'USD' }
}
]
}
});
},
// Wait for the payment to be authorized by the customer
onAuthorize: function(data, actions) {
// Call your server with data.nonce to finalize the payment
console.log('Braintree nonce:', data.nonce);
// Get the payment and buyer details
return actions.payment.get().then(function(payment) {
console.log('Payment details:', payment);
});
}
}, '#paypal-button-container');
</script>
</body>
I need to place code in this variable var BRAINTREE_SANDBOX_AUTH = '38mqtdwp4nth5tbk'; can anyone help me to resolve this issue ?
Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support#braintreepayments.com.
It looks like you are setting your BRAINTREE_SANDBOX_AUTH variable to a Merchant ID, rather than a Client Token. In order to initiate the Braintree checkout, you will need to generate, then pass in a client_token.
You generate the client_token on your server, then pass it into your client-side call: braintree.client.create().
If successful, braintree.client.create() will return a client instance that you can use to create a PayPal checkout component with braintree.paypalCheckout.create().
Within the paypalCheckout component, you can configure your PayPal button using paypal.Button.render().
I have created the LinkedIn app and retrieved the client id and client_secret.
Now inside the integrated api of OAuth.io created an api and have added the keys and permission scope.
I want to run this project using Ionic Framework. What should be done to achieve it.
P.S: I am new to Ionic Framework and OAuth.io. So please don't mind my style of asking the question.
whole index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="js/ng-cordova-oauth.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button class="button" ng-click="linkedInLogin()">Login via LinkedIn</button>
</body>
</html>
whole app.js:
angular.module('starter', ['ionic', 'ngCordova', 'ngCordovaOauth'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller("MainCtrl", function($scope, $cordovaOauth) {
document.addEventListener( "deviceready", onDeviceReady );
function onDeviceReady( event ) {
// on button click code
$scope.linkedInLogin = function(){
OAuth.initialize('07IxSBnzVoGGQL2MpvXjSYakagE')
OAuth.popup('linkedin').done(function(result) {
// Here you will get access token
console.log(result)
result.me().done(function(data) {
// Here you will get basic profile details of user
console.log(data);
})
});
};
}
});
Please go through the steps and below code:
1) create a project from terminal as ionic start linkedinlogin blank
2)cd linkedinlogin project
3)Add the required platform in terminal as ionic add platform ****
4)Add the ng-cordova.min.js file above the cordova.ja file in our project
5)Install ng-cordova-oauth as bower install ng-cordova-oauth -S
6)Then include ng-cordova-oauth.min.js file in index.html
7)Inject 'ngCordova' and 'ngCordovaOauth' as dependency in app.js file
8)In index.html create a button as login via linkedin
9)In app.js create a Controller with below code
10)Please update your cordova platform if the above plugin doesn't work
$cordovaOauth.linkedin(clientId, clientSecret, ['r_basicprofile', 'r_emailaddress']).then(function(success){
//Here you will get the access_token
console.log(JSON.stringify(success));
$http({method:"GET", url:"https://api.linkedin.com/v1/people/~:(email-address,first-name,last-name,picture-url)?format=json&oauth2_access_token="+success.access_token}).success(function(response){
// In response we will get firstname, lastname, emailaddress and picture url
// Note: If image is not uploaded in linkedIn account, we can't get image url
console.log(response);
}, function(error){
console.log(error);
})
}, function(error){
console.log(error);
})
I thing you read the ngCordova plugins.
Using oauth.io i have implemented login via linkedin:
Please follow the steps:
1. Create a app in oauth.io and get public key.
2. Click on the Integrated APIs menu from the left side bar.
3. Now click on ADD APIs green button on the right top corner.
4. Now Search and select LinkedIn.
5. Now add the Client id and Client Secret in keys and permission scope.
6. use below command to add plugin to project:
cordova plugin add https://github.com/oauth-io/oauth-phonegap
7. For controller code check below code.
document.addEventListener( "deviceready", onDeviceReady );
function onDeviceReady( event ) {
// on button click code
$scope.linkedInLogin = function(){
OAuth.initialize('your public key')
OAuth.popup('linkedin').done(function(result) {
// Here you will get access token
console.log(result)
result.me().done(function(data) {
// Here you will get basic profile details of user
console.log(data);
})
});
};
}
Hope it may be help you..
I have a problem I do not know how to solve, I do not know if it's a bug of 'azure media player' but when I view a streaming video shows me this error "'Uncaught Error: cannot find the request in the request queue azuremediaplayer.min.js (2,338210)' but if I see a local video as a mp4 does not give me any problems. What could be the problem? Excuse my English.
By the way, I'm using Ripple to emulate Android, if I visualize from a physical device does not give me problems.
Thanks
(function () {
"use strict";
document.addEventListener('deviceready', onDeviceReady.bind(this), false);
var myOptions = {
"nativeControlsForTouch": false,
controls: false,
autoplay: false,
width: "640px",
height: "360px",
poster: "",
logo: {
enabled: false
}
}
var myPlayer = amp("azuremediaplayer", myOptions);
function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener( 'resume', onResume.bind( this ), false );
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
//var element = document.getElementById("deviceready");
//element.innerHTML = 'Device Ready';
//element.className += ' ready';
myPlayer.src([
{
//"src": "movie/Rutina.mp4",
//"type": "video/mp4"
"src": "http://amssamples.streaming.mediaservices.windows.net/830584f8-f0c8-4e41-968b-6538b9380aa5/TearsOfSteelTeaser.ism/manifest",
"type": "application/vnd.ms-sstr+xml",
"protectionInfo": [
{
"type": "AES",
"authenticationToken": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cm46bWljcm9zb2Z0OmF6dXJlOm1lZGlhc2VydmljZXM6Y29udGVudGtleWlkZW50aWZpZXIiOiI5ZGRhMGJjYy01NmZiLTQxNDMtOWQzMi0zYWI5Y2M2ZWE4MGIiLCJpc3MiOiJodHRwOi8vdGVzdGFjcy5jb20vIiwiYXVkIjoidXJuOnRlc3QiLCJleHAiOjE3MTA4MDczODl9.lJXm5hmkp5ArRIAHqVJGefW2bcTzd91iZphoKDwa6w8"
}
]
}
]);
myPlayer.autoplay(true);
};
function onPause() {
// TODO: This application has been suspended. Save application state here.
};
function onResume() {
// TODO: This application has been reactivated. Restore application state here.
};
} )();
<!DOCTYPE html>
<html>
<head>
<!--
Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<meta http-equiv="Content-Security-Policy" content="default-src http://amp.azure.net 'self' data: gap: blob: https://ssl.gstatic.com http://amssamples.streaming.mediaservices.windows.net 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self'; media-src http://localhost:4400/ blob:">
<title>Mobile</title>
<link href="lib/ionic/release/css/ionic.css" rel="stylesheet" />
<link href="http://amp.azure.net/libs/amp/1.6.3/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
<script src="http://amp.azure.net/libs/amp/1.6.3/azuremediaplayer.min.js"></script>
</head>
<body>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"></video>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script src="lib/ionic/release/js/ionic.bundle.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Unfortunately, using an emulator for video playback can be an unreliable testing scenario. The issue you're seeing could very well be unique to the emulator itself, which can be dependent on the performance of the machine your emulator is running on as well as the capabilities of the emulator.
You are better of testing your code on a physical device, especially if the issue is not occurring on it.