Cannot get an embedded dialog to show up in facebook javascript sdk - javascript

I'm using the default stream.publish example in an iframed facebook app with the new SDK.
My problem is that the stream.publish always shows up in a popup window instead of an on page dialog. Does anyone know how to get this old behavior back?
$(document).ready(function(){
$("#streampublish").click(function() {
FB.ui(
{
method: 'stream.publish',
message: 'getting educated about Facebook Connect',
attachment: {
name: 'Connect',
caption: 'The Facebook Connect JavaScript SDK',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
href: 'http://github.com/facebook/connect-js'
},
action_links: [
{ text: 'Code', href: 'http://github.com/facebook/connect-js' }
],
user_message_prompt: 'Share your thoughts about Connect'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
}
}

FB.ui({method: 'apprequests',access_token:'Valid Access Token',display:'iframe',
message: 'You should learn more about this awesome game.', title: 'APP NAME'},
function(response) {
if(response && response.request_ids){
alert(response.request_ids);
}
}
);
Add display:'iframe' in your code as shown above and pass a valid access token.
Reference: http://developers.facebook.com/docs/reference/dialogs/

Related

Credimax hosted checkout payment always return "Unsuccessful Payment" in response?

I am using the Credimax hosted checkout payment gateway. After getting the session id from the server, I'm trying to do a test transaction using Credimax testing cards, but it always show the "Unsuccessful Payment" response from the server with 200 code.
The below link shows the official documentation.
https://credimax.gateway.mastercard.com/api/documentation/integrationGuidelines/hostedCheckout/integrationModelHostedCheckout.html?locale=en_US#x_obtainThePaymentResult
You can also check this documentation too,
https://credimax.gateway.mastercard.com/api/documentation/integrationGuidelines/index.html
This is what I have done so far.
<script type="text/javascript">
function errorCallback(error) {
console.log(JSON.stringify(error));
}
function cancelCallback() {
console.log('Payment cancelled');
}
$( document ).ready(function() {
console.log( "ready!" );
});
Checkout.configure({
merchant: 'E18009950',
session: {
id: 'SESSION0002013654327E6XXXX8'
},
interaction: {
operation : "PURCHASE",
merchant: {
name: 'XYZZZ',
address: {
line1: '200 Sample St',
line2: '1234 Example Town'
}
},
},
order: {
// amount : "12.0",
// currency : "BHD",
description: "Ordered Goods",
id: "2325487321"
}
});
</script>
This script loads the payment page successfully but throws this error at the beginning of the page;
Let me know if anyone has faced this issue and found any solution.

Interaction has already been acknowledged

I am currently having an issue with my /help command, the way my /help command works is it sends a nice fancy embed with a selectmenu that you can select different pages. That all works fine the issue comes when if I were to do /help and get the embed then do /help again and interact with the second embed it will crash and give the error "Interaction has already been acknowledged" Here is my code.
const generalHelp = { // Creates generalHelp embed.
color: 0x901ab6,
title: 'join our support server!',
url: 'https://discord.gg/MUwJ85wpKP',
author: {
name: 'Help Menu',
icon_url: 'https://cdn.discordapp.com/attachments/937276227692150815/937552170520301588/Letter_Z.png',
},
description: 'Select an option to view the commands I have!',
fields: [
{
name: ':tada: Fun Commands',
value: 'Shows all the bots varying fun commands in a nice little page for easy viewing.',
inline: true,
},
{
name: ':tools: Admin Commands',
value: 'Shows all the bots varying admin commands in a nice little page for easy viewing.',
inline: true,
},
/*{
name: '\u200b',
value: ' \u200b ',
inline: false,
},*/
],
}
const adminHelp = { // Creates moderationHelp embed.
color: 0x901ab6,
author: {
name: 'Help Menu',
icon_url: 'https://cdn.discordapp.com/attachments/937276227692150815/937552170520301588/Letter_Z.png',
},
description: 'Here are the commands!',
fields: [
{
name: 'Prefix: `/`',
value: '\u200b',
},
{
name: ':tools: Admin Commands',
value: '`toggle`, `settings`'
},
]
}
const funHelp = { // Creates funHelp embed.
color: 0x901ab6,
author: {
name: 'Help Menu',
icon_url: 'https://cdn.discordapp.com/attachments/937276227692150815/937552170520301588/Letter_Z.png',
},
description: 'Here are the commands!',
fields: [
{
name: 'Prefix: `/`',
value: '\u200b',
},
{
name: ':tada: Fun Commands',
value: '`ping`, `poll`',
},
]
}
const row = new MessageActionRow() // Creates MessageActionRow with name row.
.addComponents(
new MessageSelectMenu()
.setCustomId('select')
.setPlaceholder('Select an option')
.addOptions([
{
label: '🎉 Fun Commands',
description: '',
value: 'first_option',
},
{
label: '🔨 Admin Commands',
description: '',
value: 'second_option',
},
])
)
await interaction.reply({ embeds: [generalHelp], components: [row]}) // Displays general help embed
And here is my code that handles the interactions.
interaction.client.on('interactionCreate', interaction => { // Detects which value is selected.
if(!interaction.isSelectMenu()) return
if (interaction.values[0] === 'first_option') // Checks if values[0] is = to first_option to display gameHelp embed.
{
interaction.update({embeds: [funHelp]}) // Updates bots interaction embed
}
if (interaction.values[0] === 'second_option') // Checks if values[0] is = to second_option to display musicHelp embed.
{
interaction.update({embeds: [adminHelp]}) // Updates bots interaction embed
}
else // If values[0] is anything else display error message to console. (PM2 will auto restart bot if error happens.)
{
return//console.log('Help Menu Select Menu Error!') // Logging to PM2 console.
}
})
If someone could help me fix it that would be great <3
Its because you already .reply()-ed to the interaction, so the interaction is already acknowledged with that.
To solve this you can use .editReply():
interaction.reply({ content: 'This is my first reply!' });
interaction.editReply({ content: 'This my edited second reply!' });
For anyone still looking for an answer the reason this happens is because the first time it works 100% fine because there is no update and is a fresh interaction. However when you try and update it which also counts as an interaction. Putting your interactionCreate code into an event handler solves this issue.
module.exports = {
name: 'interactionCreate',
execute(interaction) {
//console.log(`${interaction.user.tag} in #${interaction.channel.name} triggered an interaction.`);
if (!interaction.isSelectMenu() && interaction.isCommand()) return
if (interaction.customId !== 'select') return
switch (interaction.values[0]) {
case 'first_option':
interaction.update({embeds: [funHelp], ephemeral: true})
break
case 'second_option':
interaction.update({embeds: [adminHelp], ephemeral: true})
break
default:
return
}
},
};

Check if Google Pay is available with JS

There is a system called Engaging Networks where the system provides payment methods like Apple Pay or Google Pay. I would like to show/hide the relevant payment button whether the payment type is available or not.
I know that I can check Apple Pay simply with window.ApplePaySession but I can't see how to check Google Pay availability.
I can see the request has been sent to https://pay.google.com/gp/p/ui/pay, but basically that's it.
Is there any way to check this?
As called out by #esqew, here is an example of how to call isReadyToPay:
function onGooglePayLoaded() {
const client = new google.payments.api.PaymentsClient({
environment: 'TEST',
merchantInfo: {
merchantId: '12345678901234567890',
merchantName: 'Demo Merchant',
},
});
const readyToPayOptions = {
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [
{
type: 'CARD',
parameters: {
allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
allowedCardNetworks: ['MASTERCARD', 'VISA'],
},
tokenizationSpecification: {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'example',
},
},
},
],
};
client.isReadyToPay(readyToPayOptions).then(result => console.log('Is ready to pay: ', result));
}
<script
async
src="https://pay.google.com/gp/p/js/pay.js"
onload="onGooglePayLoaded()">
</script>

Facebook | Youtube embed video not showing on friends news feed but showing on my profile page, Fb.ui

I am using "fb.ui share dialog" to share video from app to my wall, resulting not embedding on friends news feed, message is showing but no video.
Where as i can see video embed on my profile page, with message. All working fine but not on friends wall.
See screenshot
Code
FB.ui(
{
method: 'feed',
name: 'Lorem ispm',
link: 'google.com',
picture: 'http://img.youtube.com/vi/'+ getParameter(addressValue, 'v') +'/0.jpg',
caption: 'Hello',
source: 'http://www.youtube.com/v/'+ getParameter(addressValue, 'v') +'?version=3&autohide=1&autoplay=1',
type: 'video',
description: 'Hello'
},
function(response) {
if (response && response.post_id) {
//alert('Post was published.');
} else {
//alert('Post was not published.');
}
}
);
Just use the link parameter as the youtube video url. You dont need to use image and other parameters.
FB.ui(
{
method: 'feed',
name: 'Lorem ispm',
caption: 'Hello',
link: 'http://www.youtube.com/watch?v='+ getParameter(addressValue, 'v'),
description: 'Hello'
},
function(response) {
if (response && response.post_id) {
//alert('Post was published.');
} else {
//alert('Post was not published.');
}
}
);
Example
Youtube has their og tags defined on their page. It will provide facebook with the related image and other things.
Another thing to note is that- you must use Share Dialog now instead, the feed dialogs are deprecated.

FB.ui post to App page as well as user page

Assuming the code below, which works correctly (IE: when the user presses the share button, the content is published to THEIR page), how would I also get it to publish to the Apps page also, ideally changing the message slightly. At the moment the text posted to the users wall is, for example, "I like xx on xx website". I would also like the event posting to my App page, with a different message along the lines of " just liked xxx on our website".
Just to clarify, this code works OK, but I would like to publish to my Apps page at the same time with a different message.
Thanks in advance.
<input type="button" onclick="share_prompt()" value="Share" />
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript" charset="utf-8"></script>
<div id="fb-root"></div>
<script type="text/javascript" charset="utf-8">
FB.init({
appId: 'YOUR_APP_ID',
status: true,
cookie: true,
xfbml: true
});
function share_prompt()
{
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
}
</script>

Categories

Resources