I was trying to add multiple Hubspot forms on a vue page but only one form was loading at a time.
This is how I was trying to append a single Hubspot form.
mounted() {
const script = document.createElement("script");
script.src = "https://js.hsforms.net/forms/v2.js";
document.body.appendChild(script);
script.addEventListener("load", () => {
if (window.hbspt) {
window.hbspt.forms.create({
portalId: "1791848",
formId: "ffad341d-b632-4280-a0c7-7141007bac69",
target: "#hubspotForm",
});
}
});
},
Although after wondering a lot find a really easy solution where you just have to loop through the hbspt.forms.create function and pass the individual object for your desired element.
beforeMount() {
const script = document.createElement("script");
script.src = "https://js.hsforms.net/forms/v2.js";
document.body.appendChild(script);
script.addEventListener("load", () => {
if (window.hbspt) {
const forms = [
{
portalId: "XXXXX",
formId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
target: "#hubspotForm1",
},
{
portalId: "XXXXX",
formId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
target: "#hubspotForm2",
},
{
portalId: "XXXXX",
formId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
target: "#hubspotForm3",
},
];
forms.forEach(form => {
window.hbspt.forms.create(form);
});
}
});
},
Related
I have to create subscribe and unsubscribe email page. all functionality is working fine. but when I call clevertap event, CT event is not triggered in CT dashboard.
<script type="text/javascript">
var clevertap = {
event: [],
profile: [],
account: [],
onUserLogin: [],
notifications: [],
privacy: [],
};
// replace with the CLEVERTAP_ACCOUNT_ID with the actual ACCOUNT ID value from your Dashboard -> Settings page
clevertap.account.push({ id: "TEST-000-000-001Z" });
clevertap.privacy.push({ optOut: false });
clevertap.privacy.push({ useIP: true });
(function () {
var wzrk = document.createElement("script");
wzrk.type = "text/javascript";
wzrk.async = true;
wzrk.test = 'page';
wzrk.src =
("https:" == document.location.protocol
? "https://d2r1yp2w7bby2u.cloudfront.net"
: "http://static.clevertap.com") + "/js/a.js";
var s = document.getElementsByTagName("script")[0];
console.log('s.parentNode : ', s.parentNode)
s.parentNode.insertBefore(wzrk, s);
wzrk.onerror = (e) => reject(new Error(`Failed to load script '${src}'. Error: ${e.toString()}`));
})();
</script>
onload I have call page view event
<script>
window.onload = function () {
console.log('on load');
var isReEncode = false; //Should be true only if your server is url encoding the URL on unsubscribe landing page
var withGroups = true; // Should be true if the unsubscribe groups should be displayed on the landing page.
var stageName;
$WZRK_WR.getEmail(false, withGroups);
showSectionBaseOnStage();
setTimeout(() => {
clevertap.event.push("Page viewed", {
"ProductName": "ABC",
"PageTitle": "Unsubscribe",
"Page": 'Group Unsubscribe',
"PageURL": window.location.href,
"SourceURL":""
});
console.log("on load ct event call", clevertap);
}, 5000);
};
</script>
Page viewed event not trigger
Please let me know where I do a mistake.
Thank you
I am new to reactjs.
I am trying to add a external script and trying to use a function which defined inside that script.
Script is
<script src="https://pi-test.sagepay.com/api/v1/js/sagepay.js"></script>
<script>
document.querySelector('[type=submit]').addEventListener(
'click',
function (e) {
e.preventDefault(); // to prevent form submission
sagepayOwnForm({
merchantSessionKey: '5528D329-A83B-435F-B6A7-E38A2BC60DC9',
}).tokeniseCardDetails({
cardDetails: {
cardholderName: document.querySelector(
'[data-card-details="cardholder-name"]'
).value,
cardNumber: document.querySelector(
'[data-card-details="card-number"]'
).value,
expiryDate: document.querySelector(
'[data-card-details="expiry-date"]'
).value,
securityCode: document.querySelector(
'[data-card-details="security-code"]'
).value,
},
onTokenised: function (result) {
if (result.success) {
document.querySelector('[name="card-identifier"]').value =
result.cardIdentifier;
document.querySelector('form').submit();
} else {
alert(JSON.stringify(result));
}
},
});
},
false
);
</script>
I tried with useScript. When user click the submit button the script will loaded and should call
sagepayOwnForm ( this is a defined in their script.js)
I create a useScript
export const useScript = (url: string) => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
// script.on
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [url]);
};
I don't know how to use this. I want to know How can I call their function.
Can anyone help me.
I am trying to make Paypal Checkout work with Vue.JS 3 (using the loader)
Right now I got this far:
setPaypal() {
const script = document.createElement('script');
script.src = 'https://www.paypal.com/sdk/js?client-id=AdlvqGHWrrwVpGXreZuf5VHBXjIeUWGLHBJmDzbI44Ib2w1MMN7P-UJysCHFb_W7BWTvpz0ofji0SiYB';
document.body.appendChild(script);
script.addEventListener('load', this.setLoaded())
}
This function is called in the mounted(): and inserts the script tag in my page.
setLoaded() {
window.paypal.Buttons({
createOrder: (actions) => {
return actions.order.create({
purchase_units: [
{
description: this.prestation.courtedescription,
amount: {
currency_code: "EUR",
value: this.total
}
}
]
});
},
onApprove: async () => {
this.paidFor = true;
this.loading = false;
},
onError: err => {
console.log(err)
}
})
.render(this.$refs.paypal)
}
This is the setLoaded() function called when the script is loaded.
Well obviously window.paypal is undefined
I tried using the official docs and same shit, they ask you to
const PayPalButton = paypal.Buttons.driver("vue", window.Vue);
But hey, paypal is not defined
For reference, this is the official docs
Add the SDK <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
Vue integration
<div id="container">
<app></app>
</div>
<script>
const PayPalButton = paypal.Buttons.driver("vue", window.Vue);
Vue.component("app", {
template: `
<paypal-buttons :on-approve="onApprove" :create-order="createOrder" />
`,
components: {
"paypal-buttons": PayPalButton,
},
computed: {
createOrder: function () {
return (data, actions) => {
return actions.order.create({
purchase_units: [
{
amount: {
value: "10",
},
},
],
});
}
},
onApprove: function () {
return (data, actions) => {
return actions.order.capture();
}
},
},
});
const vm = new Vue({
el: "#container",
});
</script>
Instead of using this in your setPaypal() function
script.addEventListener('load', this.setLoaded())
Use this
script.addEventListener('load', () => this.setLoaded())
I finished my app and I am planning to host it online. Can my clients use sandbox accounts to make real transactions? This is my first time developing an app and making it have real online transactions using Paypal. Does it have something to do with coding or I have to change a setting in Paypal itself?
Payments.vue
<template>
<div>
<div ref="paypal"></div>
</div>
</template>
mounted()
{
const script = document.createElement("script");
script.src =
"https://www.paypal.com/sdk/js?client-MY-CLIENT-ID";
script.addEventListener("load", this.setLoaded);
document.body.appendChild(script);
}
methods: {
setLoaded: function () {
this.loaded = true;
window.paypal
.Buttons({
createOrder: (data, actions) => {
return actions.order.create({
purchase_units: [
{
// description: this.product.description,
amount: {
currency_code: "USD",
value: this.product.price,
},
},
],
});
},
onApprove: async (data, actions) => {
const order = await actions.order.capture();
this.$q.notify({
message: "Transaction Successful!",
color: "green",
actions: [
{
label: "Dismiss",
color: "white",
handler: () => {
/* ... */
},
},
],
});
let dateObj = new Date();
let month = dateObj.getMonth();
let day = dateObj.getDate();
let year = dateObj.getFullYear();
let output = month + "" + day + "" + year;
this.$store
.dispatch("SAVE_ENTRY", {
username: this.username,
password: this.password,
confirmPass: this.confirmPass,
access_id: output + this.newAccData,
chosenSchoolId: this.chosenSchoolId,
})
.then((res) => {
if (res.data === "Success1") {
this.$q.notify({
message:
"Transaction Successful! Please complete your registration process inside the website.",
color: "green",
actions: [
{
label: "Dismiss",
color: "white",
handler: () => {
/* ... */
},
},
],
});
}
});
console.log(order);
},
onError: (err) => {
console.log(err);
},
})
.render(this.$refs.paypal);
},
}
I believe there's a sandbox environment, on https://sandbox.paypal.com/ . You have to change the API endpoint to something like that. The sandbox uses separate accounts that can be made in the developer environment on PayPal API pages.
You should be able to set up sandbox accounts here:
https://developer.paypal.com/developer/accounts/
However I dont think this is supposed to be a Javascript/Vue question, you'd want your PayPal API calls to take place on the server side as much as possible.
Hey i'm new here so please dont blame me if i do something stupid :D
So yeah my question! I have a site with vuejs and i want to put some ads on my site. So i created some components:
<template>
<div class="ad-wrapper">
<div ref="ad"></div>
<div id='div-gpt-ad-1407836229438-0' ref="adGpt"></div>
</div>
</template>
<script>
export default {
name: 'Ad-top',
props: {
},
components: {
},
data() {
return {
};
},
methods: {
setAd() {
const adScript = document.createElement('script');
adScript.type = 'text/javascript';
adScript.text = `googletag.cmd.push(function() {
googletag.defineSlot('/53015287/aniflix.tv_d_970x90_1', [970, 90], 'div-gpt-ad-1407836229438-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});`;
this.$refs.ad.appendChild(adScript);
const adGptScript = document.createElement('script');
adGptScript.type = 'text/javascript';
adGptScript.text = `googletag.cmd.push(function() { googletag.display('div-gpt-ad-1407836229438-0'); });`;
this.$refs.adGpt.appendChild(adGptScript);
},
refreshAd() {
this.$refs.ad.innerHTML = '';
this.$refs.adGpt.innerHTML = '';
this.setAd();
},
},
mounted() {
this.setAd();
this.$eventBus.$on('refreshAds', () => {
this.refreshAd();
});
},
beforeDestroy() {
this.$eventBus.$off('refreshAds');
},
};
</script>
Well that works just fine but if i try to go to another page on my sites the ads doesnt refresh and disappear.
I tried to just clear the tags
refreshAd() {
this.$refs.ad.innerHTML = '';
this.$refs.adGpt.innerHTML = '';
this.setAd();
},
But doesnt work
Does anyone have an idea?
Ok i figured it out so instead of clearing the inner HTML google provides a refresh attribute
so i just replaced
refreshAd() {
this.$refs.ad.innerHTML = '';
this.$refs.adGpt.innerHTML = '';
this.setAd();
},
with:
refreshAd() {
googletag.cmd.push(function() { googletag.pubads().refresh(); });
},