i have one form if user enter his details on his form and submit form, after submit form it stores to database and after successfully store users data in database only then i have to open paypal checkout modal otherwise not.
this is paypal
paypal.Button.render({
env: 'sandbox',
client: {
sandbox: ''
// production: 'demo_production_client_id'
},
locale: 'en_US',
style: {
layout: 'horizontal',
size: 'small',
color: 'blue',
shape: 'pill',
label: 'checkout',
height: 40,
tagline: 'false'
},
commit: true,
payment: (data, actions) => {
return actions.payment.create({
transactions: [{
amount: {
total: '1',
currency: 'USD'
}
}]
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute()
.then(function() {
window.alert('Thank you for your purchase!');
});
}
}, this.paypalRef.nativeElement);
this is submit form api call
submit(){
const data={
url: this.URL,
email:this.email
}
this.home.websiteScratching(data)
.subscribe(res=>{
},err=>{
console.log(err);
})
}
after submit success response i want to go for paypal checkout process how to do it.. i am stuck.
In short you have to create new component and use dialogRef.
https://material.angular.io/components/dialog/overview
const dialogRef = this.dialog.open(SuccessPaymentPaypalComponent, {
disableClose: true,
data: { PaypaplRetunrnTrasactionId: this.params.Paypalid }
})
dialogRef.afterClosed().subscribe(() => {
});
Related
I have a generic Split button defined like:
this.toolbarButtons.publish = new Ext.SplitButton({
text: t('save_and_publish'),
iconCls: 'pimcore_icon_save_white',
cls: 'pimcore_save_button',
scale: 'medium',
handler: this.publish.bind(this),
menu: [{
text: t('save_pubish_close'),
iconCls: 'pimcore_icon_save',
handler: this.publishClose.bind(this)
},
{
text: t('save_only_new_version'),
iconCls: 'pimcore_icon_save',
handler: this.save.bind(this, 'version'),
hidden: !this.isAllowed('save') || !this.data.general.o_published
}
]
});
What I need to happen is - when user clicks the Publish button a confirm box appears which collects yes/no click.
I have a AJAX call on the yes/no click to execute/prevent user notification of the publish action.
I have tried something like this:
this.toolbarButtons.publish = new Ext.SplitButton({
text: t('save_and_publish'),
iconCls: 'pimcore_icon_save_white',
cls: 'pimcore_save_button',
scale: 'medium',
listeners: {
click: function() {
Ext.MessageBox.confirm(
'Confirm', 'Notify related users?', callbackFunction);
function callbackFunction(btn) {
if(btn == 'yes') {
Ext.Ajax.request({
url: Routing.generate('save_phrase_and_notify'),
jsonData: {
notifyFlag: JSON.stringify(true),
phraseId: JSON.stringify(phraseId),
},
method: 'POST',
success: (response) => {
button.up('window').close();
},
failure: () => {
Ext.MessageBox.alert(
t('Sum Tim Wong'),
);
},
});
} else {
Ext.Ajax.request({
url: Routing.generate('save_phrase_and_notify'),
jsonData: {
notifyFlag: JSON.stringify(false),
phraseId: JSON.stringify(phraseId),
},
method: 'POST',
success: (response) => {
button.up('window').close();
},
failure: () => {
Ext.MessageBox.alert(
t('Sum Tim Wong 2'),
);
},
});
}
}
}
},
handler: this.publish.bind(this),
menu: [{
text: t('save_pubish_close'),
iconCls: 'pimcore_icon_save',
handler: this.publishClose.bind(this)
},
{
text: t('save_only_new_version'),
iconCls: 'pimcore_icon_save',
handler: this.save.bind(this, 'version'),
hidden: !this.isAllowed('save') || !this.data.general.o_published
}
],
});
This confirm box work but I need to prevent the handler( handler: this.publish.bind(this)) from executing until the yes/no is clicked by the user. Currently the confirm box appears but the handler runs anyways, which redirects to a overview page.
How do I prevent the handler from running until yes/no is clicked? Ultimately how can I move the handler bind action in the AJAX success function?
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.
is there a way to automatically submit the form after the user has chosen a payment method with the Braintree Drop-in?
The problem is that the user is asked to choose a payment method, then press Ok, then again Ok, then press the actual Checkout button on my page.
It is a very weird behavior.
Here's the code I use to create the Drop-In.
<script>
var form = document.querySelector('#payment-form');
var nonceInput = document.querySelector('#nonce');
braintree.dropin.create({
authorization: '{{ $client_token }}',
container: '#dropin-container',
paypal: {
flow: 'vault',
currency: 'EUR',
buttonStyle: {
color: 'blue',
shape: 'rect',
size: 'medium'
}
},
card: {
cardholderName: true
}
}, function (err, dropinInstance) {
if (err) {
// Handle any errors that might've occurred when creating Drop-in
console.error(err);
return;
}
form.addEventListener('submit', function (event) {
event.preventDefault();
dropinInstance.requestPaymentMethod(function (err, payload) {
if (err) {
// Handle errors in requesting payment method
return;
}
$.fancybox.open({
src : '#processing-loading',
type : 'inline',
opts : {
toolbar: false,
buttons: false,
smallBtn: false
}
});
// Send payload.nonce to your server
nonceInput.value = payload.nonce;
form.submit();
});
});
});
</script>
I am testing a web app with a PayPal express checkout button
I click on Pay now, I log-in with one of my sandbox accounts and pay with Paypal fundings, but payment doesn't end well and I receive a 400 error: {"ack":"contingency","contingency":"INSTRUMENT_DECLINED","meta":...
my code is
paypal.button.render({
env: 'sandbox',
client: {
sandbox: 'AAAAAAAAAAA',
production: '<????>'
},
locale: 'en_US',
commit: true, // Show a 'Pay Now' button
style: {
size:'medium',
color: 'silver',
label: 'pay',
},
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: ctrl.amount, currency: 'EUR' }
}
]
},
experience: {
input_fields: {
no_shipping: 1
}
},
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function(payment) {
alert("Payment completed!");
paymentCompleted();
});
},
onCancel: function(data, actions) {
alert("Payment doesn't end well :-(");
location.href=location.href;
}
}, '#paypal-button');
I noticed the same behaviour in interactive demo, I can login, pay, but the payment is not accepted due to INSTRUMENT_DECLINED.
Any idea about where can be the problem?
I tried to create different sandbox accounts, but nothing changes.
What I am trying to do is create a form with meteor-autoform that will redirect the user to a newly generated route on submit. My thought process is that I can take the submissions _id and use it for an iron:router parameter. What I have so far looks as followed:
Creation of Form
Submits = new Meteor.Collection('Submits');
Submits.allow({
insert: function(username, doc){
return !!username;
}
});
SubmitSchema = new SimpleSchema({
title: {
type: String,
label: "Title"
},
subject:{
type: String,
label: "Subject"
},
summary:{
type: String,
label: "Summary"
},
author:{
type: String,
label: "Author",
autoValue: function() {
return this.userId
},
autoform: {
type: "hidden"
}
},
createdAt: {
type: Date,
label: "Created At",
autoValue: function(){
return new Date()
},
autoform: {
type: "hidden"
}
}
});
Submits.attachSchema( SubmitSchema );
Routing
Router.route('/submit', {
layoutTemplate: 'submitLayout',
waitOn: function() { return Meteor.subscribe("Submits"); },
loadingTemplate: 'loading'
});
Router.route('/submit/:_id', {
name: 'formDisplay',
data: function() {
return Submits.findOne({this.params._id});
}
});
And then I just have the average publish and find calls. My issues are I'm not sure how to perform the redirect on submit, and I am not sure how to display the form results on the newly generated route.
Any help would be appreciated.
I was able to do it by adding an autoform.hook and changing my routing a bit.
Autoform hook:
AutoForm.addHooks('insertSubmit', {
onSuccess: function(doc) {
Router.go('formDisplay',{_id: this.docId});
}
})
Routing:
Router.route('/submit/:_id', {
name: 'submitLayout',
data: function() { return Products.findOne(this.params._id);}
});
I got this information from this post:
Route to the new data submitted by Meteor autoform using iron router?