Messenger webview working in mobile not on desktop - facebook

I am making messenger webview example but it is only working in mobile while form desktop it is redirecting me to a new tab,
Here is the Button payload,
var buttons = [{
type: "web_url",
url: constant.SERVER_URL + "/checkout",
title: "Yes",
webview_height_ratio: "tall",
messenger_extensions: false
}]
Here is request method,
app.get("/checkout", function (req, res) {
let referer = req.get('Referer');
console.log(referer)
if (referer) {
if (referer.indexOf('messenger') >= 0) {
res.setHeader('X-Frame-Options', 'ALLOW-FROM https://www.messenger.com/');
} else if (referer.indexOf('facebook') >= 0) {
res.setHeader('X-Frame-Options', 'ALLOW-FROM https://www.facebook.com/');
}
res.render('checkout')
}
});

var buttons = [{
type: "web_url",
url: constant.SERVER_URL + "/checkout",
title: "Yes",
webview_height_ratio: "tall",
messenger_extensions: True
}]
The Problem was about messenger_extensions i made it true and it worked.

Related

Google Actions Smart Home on Lambda not working

I've been trying to get my Google Actions Smart Home (nodejs) working in AWS lambda. However it isn't working. Whenever I connect it on the Google Home app, I just get a message of "Couldn't update the setting...". I've already configured the API gateway correctly and set the Handler to "index.smarthome" as shown in the below image link. Why isn't it working, and how can I get my lambda google action smart home working?
Image Link
My firebase version is working though (modified from the washing machine example at https://codelabs.developers.google.com/codelabs/smarthome-washer/#2).
const functions = require('firebase-functions');
const {smarthome} = require('actions-on-google');
const app = smarthome();
app.onSync(body => {
return {
requestId: 'ff36a3cc-ec34-11e6-b1a0-64510650abcf',
payload: {
agentUserId: '123',
devices: [{
id: 'washer',
type: 'action.devices.types.WASHER',
traits: [
'action.devices.traits.OnOff',
'action.devices.traits.StartStop',
'action.devices.traits.RunCycle',
'action.devices.traits.Modes',
'action.devices.traits.Toggles',
],
name: {
defaultNames: ['My Washer'],
name: 'Washer',
nicknames: ['Washer']
},
deviceInfo: {
manufacturer: 'Acme Co',
model: 'acme-washer',
hwVersion: '1.0',
swVersion: '1.0.1'
},
attributes: {
pausable: true,
availableModes: [{
name: 'load',
name_values: [{
name_synonym: ['load'],
lang: 'en'
}],
settings: [{
setting_name: 'small',
setting_values: [{
setting_synonym: ['small'],
lang: 'en'
}]
}, {
setting_name: 'large',
setting_values: [{
setting_synonym: ['large'],
lang: 'en'
}]
}],
ordered: true
}],
availableToggles: [{
name: 'Turbo',
name_values: [{
name_synonym: ['turbo'],
lang: 'en'
}]
}]
}
}]
}
};
});
app.onExecute((body) => {
const {requestId} = body;
const payload = {
commands: [{
ids: [],
status: 'SUCCESS',
states: {
online: true,
},
}],
};
for (const input of body.inputs) {
for (const command of input.payload.commands) {
for (const device of command.devices) {
const deviceId = device.id;
payload.commands[0].ids.push(deviceId);
for (const execution of command.execution) {
const execCommand = execution.command;
const {params} = execution;
switch (execCommand) {
case 'action.devices.commands.OnOff':
payload.commands[0].states.on = params.on;
break;
case 'action.devices.commands.StartStop':
payload.commands[0].states.isRunning = params.start;
break;
case 'action.devices.commands.PauseUnpause':
payload.commands[0].states.isPaused = params.pause;
break;
case 'action.devices.commands.SetModes':
break;
case 'action.devices.commands.SetToggles':
break;
}
}
}
}
}
return {
requestId: requestId,
payload: payload,
};
});
exports.smarthome = functions.https.onRequest(app);
And here is the code that I used in my AWS lambda function. I referenced https://github.com/actions-on-google/actions-on-google-nodejs & creating dialogflow v2 project with serverless to make it lambda compatible. The main difference between the lambda and firebase versions is the "exports.smarthome" code.
const {smarthome} = require('actions-on-google');
const app = smarthome();
app.onSync(body => {
return {
requestId: 'ff36a3cc-ec34-11e6-b1a0-64510650abcf',
payload: {
agentUserId: '123',
devices: [{
id: 'washer',
type: 'action.devices.types.WASHER',
traits: [
'action.devices.traits.OnOff',
'action.devices.traits.StartStop',
'action.devices.traits.RunCycle',
'action.devices.traits.Modes',
'action.devices.traits.Toggles',
],
name: {
defaultNames: ['My Washer'],
name: 'Washer',
nicknames: ['Washer']
},
deviceInfo: {
manufacturer: 'Acme Co',
model: 'acme-washer',
hwVersion: '1.0',
swVersion: '1.0.1'
},
attributes: {
pausable: true,
availableModes: [{
name: 'load',
name_values: [{
name_synonym: ['load'],
lang: 'en'
}],
settings: [{
setting_name: 'small',
setting_values: [{
setting_synonym: ['small'],
lang: 'en'
}]
}, {
setting_name: 'large',
setting_values: [{
setting_synonym: ['large'],
lang: 'en'
}]
}],
ordered: true
}],
availableToggles: [{
name: 'Turbo',
name_values: [{
name_synonym: ['turbo'],
lang: 'en'
}]
}]
}
}]
}
};
});
app.onExecute((body) => {
const {requestId} = body;
const payload = {
commands: [{
ids: [],
status: 'SUCCESS',
states: {
online: true,
},
}],
};
for (const input of body.inputs) {
for (const command of input.payload.commands) {
for (const device of command.devices) {
const deviceId = device.id;
payload.commands[0].ids.push(deviceId);
for (const execution of command.execution) {
const execCommand = execution.command;
const {params} = execution;
switch (execCommand) {
case 'action.devices.commands.OnOff':
payload.commands[0].states.on = params.on;
break;
case 'action.devices.commands.StartStop':
payload.commands[0].states.isRunning = params.start;
break;
case 'action.devices.commands.PauseUnpause':
payload.commands[0].states.isPaused = params.pause;
break;
case 'action.devices.commands.SetModes':
break;
case 'action.devices.commands.SetToggles':
break;
}
}
}
}
}
return {
requestId: requestId,
payload: payload,
};
});
exports.smarthome = function(event, context, callback) {
app.handler(event, {})
.then((res) => {
if (res.status != 200) {
callback(null, {
"fulfillmentText": `I got status code: ${res.status}`
});
} else {
callback(null, res.body);
}
}).catch((e) => {
callback(null, {
"fulfillmentText": `There was an error\n${e}`
});
});
};
Check your AWS CloudWatch logs and see what happens when the lambda is called. You can print to stdout in your lambda and have it show up in these logs.
Along with your Cloudwatch logs, you could also have a look at your Stackdriver logs.

Paypal Checkout - don't ask for delivery address for non-members?

I've just started playing with this module:
https://github.com/paypal/paypal-checkout
I'm trying to work out how to can turn off the shipping address for clients. I know in order versions you could do &NOSHIPPING=1 in the URL, but I can't find anything about the API 4 version. My code is:
paypal.Button.render({
// Pass the client ids to use to create your transaction on sandbox and production environments
locale: 'fr_FR',
//env: 'production',
env: 'sandbox',
client: {
sandbox: "...",
production: "..."
},
// Pass the payment details for your transaction
// See https://developer.paypal.com/docs/api/payments/#payment_create for the expected json parameters
payment: function() {
return paypal.rest.payment.create(this.props.env, this.props.client, {
transactions: [
{
amount: {
total: window.my_config.grand_total,
currency: 'EUR',
details: {
"subtotal": window.my_config.price,
"tax": window.my_config.vat_amount
}
},
}
]
});
},
// Display a "Pay Now" button rather than a "Continue" button
commit: true,
// Pass a function to be called when the customer completes the payment
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function() {
console.log('The payment was completed!');
console.log(data, actions)
if (error === 'INSTRUMENT_DECLINED') {
actions.restart();
}
});
},
// Pass a function to be called when the customer cancels the payment
onCancel: function(data) {
console.log('The payment was cancelled!');
},
style: {
shape: 'rect',
size: "medium"
}
}, '#paypalContainerEl');
Use "shipping_preference: 'NO_SHIPPING'."
createOrder: function(data, actions) {
$('#paypalmsg').html('<b>' + 'WAITING ON AUTHORIZATION TO RETURN...' + '</b>');
$('#chkoutmsg').hide()
return actions.order.create({
purchase_units: [{
description: 'GnG Order',
amount: {
value: cartTotal
}
}],
application_context: {
shipping_preference: 'NO_SHIPPING'
}
});
},
You need to pass the no_shipping option under experience in the payment function, like so:
return actions.payment.create(
{
payment:
{
transactions: [
{
amount:
{
total: "10",
currency: 'EUR'
}
}]
},
experience:
{
input_fields:
{
no_shipping: 1
}
}
});
In the docs, here and here. A quick note though, guests will still be asked for their billing address, even though their shipping address will no longer be asked.
For those of you integrating via PayPal REST API in PHP, to set the no_shipping attribute:
apiContext = $this->apiContext;
$payer = new \PayPal\Api\Payer();
$payer->setPaymentMethod('paypal');
$inputFields = new \PayPal\Api\InputFields();
$inputFields->setNoShipping(1); //<-- NO SHIPPING!!!!!!!!!!
$webProfile = new \PayPal\Api\WebProfile();
$webProfile->setName($uid); // <-- UNIQUE NAME FOR THE TRANSACTION
$webProfile->setInputFields($inputFields);
$createProfileResponse = $webProfile->create($apiContext);
$webProfile = \PayPal\Api\WebProfile::get($createProfileResponse->getId(), $apiContext);
$amount = new \PayPal\Api\Amount();
$amount->setCurrency('EUR')
->setTotal($this->deposit_eur);
$transaction = new \PayPal\Api\Transaction();
$transaction->setAmount($amount);
$redirectUrls = new \PayPal\Api\RedirectUrls();
$redirectUrls->setReturnUrl($this->return_url)
->setCancelUrl($this->cancel_url);
$payment = new \PayPal\Api\Payment();
$payment->setIntent('sale')
->setPayer($payer)
->setRedirectUrls($redirectUrls)
->setTransactions(array($transaction))
->setExperienceProfileId($webProfile->getId()); //<-- SET EXPERIENCE PROFILE
try{
$payment->create($apiContext);
} catch (\Exception $ex) {
debug($ex);
exit;
}
$approvalUrl = $payment->getApprovalLink();
For the unlucky lads integrating this via PayPal REST API, using C#, this is a bit trickier.
You create a WebProfile as in the Paypal Repo Example.
var experienceProfile = new WebProfile()
{
name = Guid.NewGuid().ToString(), // required field
input_fields = new InputFields()
{
no_shipping = 1
}
};
var experienceId = experienceProfile .Create(_apiContext).id;
new Payment
{
intent = "sale",
payer = new Payer
{
payment_method = "paypal"
},
transactions = new List<Transaction>
{
// ...
},
redirect_urls = new RedirectUrls
{
return_url = "..",
cancel_url = ".."
},
experience_profile_id = experienceId
};
If anyone runs into this problem with the v2 API REST approach, setting application_context with shipping_preference on create order in the body did work for me.
https://developer.paypal.com/docs/api/orders/v2/#definition-experience_context_base
const response = await fetch(url, {
method: 'post',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${accessToken}`,
},
body: JSON.stringify({
intent: 'CAPTURE',
application_context: {
shipping_preference: 'NO_SHIPPING',
},
purchase_units: []
})
For the new API you need to set the parameter no_shipping=1
https://developer.paypal.com/docs/classic/paypal-payments-standard/integration-guide/Appx_websitestandard_htmlvariables/

Remove shipping address option in PayPal Express Checkout

I am using the JS script recommended by PayPal. It's working well, however it is showing a "Ship to" address of the buyers.
I am trying to search the internet and found that https://api.sandbox.paypal.com/v1/payment-experience/web-profiles/ requested with "no_shipping": 1, can do the trick. But for that we need to make a curl request before the payment.create, so that we can pass it returned id in the function.
Is this possible in JS?
Or is there a much better and simpler way to remove it using the following JS?
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
<script>
paypal.Button.render({
env: 'sandbox', // Optional: specify 'sandbox' or 'production'
client: {
sandbox: '{{$data['SandboxId']}}',
production: '{{$data['ProductionId']}}'
},
payment: function() {
var amount = document.getElementById("amount").value;
var env = this.props.env;
var client = this.props.client;
return paypal.rest.payment.create(env, client, {
transactions: [
{
amount: {
total: amount,
currency: "USD",
details: {
subtotal: amount,
tax: "0.00",
shipping: "0.00"
}
},
description: "This is payment description.",
item_list: {
items:[
{
quantity:"1",
name:"Orders",
price:amount,
sku:"product12345",
currency:"USD"
}
],
},
}],
});
},
commit: false, // Optional: show a 'Pay Now' button in the checkout flow
onAuthorize: function(data, actions) {
console.log(data);
alert('confirmation here');
// Optional: display a confirmation page here
return actions.payment.execute().then(function() {
alert('Success here');
// Show a success page to the buyer
});
},
}, '#paypal-button');
</script><div id="paypal-button" ></div>
To expand on Bluepnume's answer, here is a complete example:
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '1.00', currency: 'USD' }
}
]
},
experience: {
input_fields: {
no_shipping: 1
}
}
});
},
You can pass an experience options like so:
paypal.rest.payment.create({
// payment options here
}, {
// experience options here
});
This is how it needs to be done in ngx-paypal version 11
application_context:
{
shipping_preference: "NO_SHIPPING"
}
ngx-paypal: "^11.0.0"

Ionic2 Push notification with background processing

I am using ionic.io to send push to my app. I have following body
{"tokens":["DeviceToken"],
"profile":"Profile",
"notification":{ "payload": {
"type": "loadCategories"
},
"ios": {
"content_available": 1
},
"android": {
"content_available": "1"
}}}
Type script code.
var push = Push.init({
android: {
senderID: "ID"
},
ios: {
alert: "true",
badge: true,
sound: 'false'
},
windows: {}
});
if((<any>push).error) {
console.log((<any>push).error);
return;
};
push.on('registration', (data)=>{
console.log(data.registrationId);
this.pushToken = data.registrationId;
this.updateToken();
});
push.on("notification", (data)=>{
console.log(data);
// if(data.additionalData.payload && data.additionalData.payload.type == 'categoryEvent') {
// console.log("at date")
// }
});
push.on('error', function(e) {
console.log(e.message);
});
Idea is that I need to send push to user and load data from the server. But problem is that if app is in background then notification event is not fired. It works only if app is active. But as soon as i understand from documentation it should work.
Known issue that has been addressed with setting content_available = 1. See https://github.com/phonegap/phonegap-plugin-push/issues/93 for more.

Share custom story with staged image on Facebook using FB.ui no working

I have the following code that stage the canvas image and then create object to share it using FB.ui. Staging the image and create the object are working without problem but the share dialog not displayed. If I replaced the image parameter in create object with an image url it is working.
is there any wrong in my code:
var userAccessToken = $("#user_access_token").val();
var appAccessToken = $("#app_access_token").val();
try {
blob = dataURItoBlob(dataURL);
} catch (e) {
console.log(e);
}
var fd = new FormData();
fd.append("access_token", userAccessToken);
fd.append("file", blob);
try {
var imageURI;
$.ajax({
url: "https://graph.facebook.com/me/staging_resources",
type: "POST",
data: fd,
processData: false,
contentType: false,
cache: false,
success: function (data) {
console.log("success " + data['uri']);
imageURI = data['uri'];
},
error: function (shr, status, data) {
console.log("error " + data + " Status " + shr.status);
},
complete: function () {
FB.api(
'https://graph.facebook.com/app/objects/myappnamespace:myobject',
'post',
{
access_token : appAccessToken,
object:{
app_id: myappid,
url: "myappurl",
title: "Sample Photo",
image: {
url:imageURI,
user_generated:true
},
description: ""
}
},
function(response) {
var objectId = response['id'];
FB.ui({
method: 'share_open_graph',
action_type: 'myappnamespace:myaction',
action_properties: JSON.stringify({
myobject:objectId
})
}, function(response){});
}
);
}
});
} catch (e) {
console.log(e);
}
finally I found the solution by changing user_generated parameter from true to false
now the code for creating object looks like below:
FB.api(
'https://graph.facebook.com/app/objects/myappnamespace:myobject',
'post',
{
access_token : appAccessToken,
object:{
app_id: myappid,
url: "myappurl",
title: "Sample Photo",
image: {
url:imageURI,
user_generated:false
},
description: ""
}
}