I have used the plain paypal button like this with no problems:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="xxx#xxx.net">
<input type="hidden" name="item_name" value="Website Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="amount" value="">
<input type="submit" value="Send Donation via PayPal" ><br></form>
and moved to this style to get Venmo and Credit card options:
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=secret&enable-funding=venmo¤cy=USD" data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"Site Donation","amount":{"currency_code":"USD","value":1.99}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Full available details
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
// Show a success message within this page, e.g.
const element = document.getElementById('paypal-button-container');
element.innerHTML = '';
element.innerHTML = '<h3>Thank you for your payment!</h3>';
// Or go to another URL: actions.redirect('thank_you.html');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
I have a IPN page to receive the order information from the original button and it checks the item_name and item_number field from that.
My questions is, will the description (Website Donation) from the createOrder section translate to those same fields or will the description be a new field (what is it called)?
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"Site Donation","amount":{"currency_code":"USD","value":1.99}}]
});
},
In one of your sandbox Business accounts, set a sandbox IPN listener URL.
Create a REST app for that particular sandbox business account, and copy its client ID. Use that client ID to create a sandbox test payment, using a sandbox Personal account to approve the payment.
Log the data from the sandbox IPN you receive. It will have the available fields for that transaction.
I guess I could have tested it, but anyhow. I created a 1.99 butt and had someone use it. The "description" used in the new button came through with the field name of &transaction_subject=Site Donation&.
Related
We are using Paypal checkout for our web app. We have the client lib where we are setting up the payment. In the back end, we are trying to capture the processed details via webhook. We tested this on a sandbox account. The webhook is sending all the details as expected except the custom field. We need the custom field in order to associate a payment with a certain service.
In our web app, we have the following:
paypalConfig = {
env: 'sandbox',
style: {
size: 'responsive',
color: 'white',
shape: 'rect',
label: 'pay',
layout: 'horizontal',
tagline: 'false'
},
client: {
sandbox: 'SANDBOX_ID',
},
commit: false,
payment: (data, actions) => {
console.log("data is", data, actions);
return actions.order.create({
payment: {
transactions: [
{ amount: { total: this.finalAmount * 100, currency: 'USD' }, job_id: this.jobId }
]
}
});
},
onApprove: (data, actions) => {
return actions.order.capture().then((details) => {
// This function shows a transaction success message to your buyer.
// alert('Transaction completed by ' + details.payer.name.given_name);
this.openModel('modal1');
}).catch(err => {console.log("Error in authorize in paypal", err); this.openModel('modal2');})
}
}
As you can see, the payment handler is adding a job_id property for the transaction object. In the back end, we are listening for the following events:
Checkout order completed, Payment capture completed, Payment sale completed
We only need to listen for an event (like Payment Received) that tells us when the transaction goes through. I wasn't sure so I added all events that seemed relevant because there wasn't any event named Payment Received.
Can this be done as we are trying here? We don't get the custom job_id field in the webhook.
First of all you appear to be using old PayPal checkout.js , switch to the newest sdk.js
Second of all you are using a client-side only integration, switch to a proper client-server pattern. Here is the front-end: https://developer.paypal.com/demo/checkout/#/pattern/server
You will need two corresponding routes on your server, 'Set Up Transaction' and 'Capture Transaction', documented here: https://developer.paypal.com/docs/checkout/reference/server-integration/
With the above solution, you have an immediate, synchronous API response on payment capture. There is no need for an additional asynchronous notification from webhooks, so those will essentially become superfluous to you.
Once all the above is working and creating successful transactions for you, there's one more thing to consider: propagating failures. That is, what happens in the case of an unhappy path, if the buyer's funding source fails to capture, e.g. their card is declined? There is a guide for how to send that error back to the UI, so they can add or choose a different card. Anyway, this is just the final detail to worry about.
Just create a paypal form and then add custom as one of the values. Heres an example. Also, here is a great tutorial to walk you through it https://youtu.be/HIwRzATH6iU
<form action="https://sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="amount" value="50.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="custom" value="{MemberID}">
<input type="hidden" name="business" value="youremail#business.example.com">
<input type="hidden" name="item_name" value="Whatever Item">
<input type="hidden" name="item_number" value="600">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="return" value="https://www.yourwebsite.com/success/">
<input type="hidden" name="cancel_return" value="https://www.yourwebsite.com/failure">
<input type="hidden" name="notify_url" value="https://www.yourwebsite.com/ipn">
<input type="submit" value="Pay Now" name="submit" title="PayPal - The safer, easier way to pay online!" class="btn btn-primary">
</form>
i'm having a bit of an issue with some code regarding the paypal smart button i'm no code expert i dabble a bit but could do with some help.
I have the button set up and all is working but i would like to make it so the customer can enter the amount they wish to pay but everything i have tried has failed so far.
for example if customer A owes £25 they can visit the pay section enter £25 and then click the nice new fancy paypal button.
Been looking for like 3 days now and hitting dead ends im no coder i know a bit but not enough to work out the issue.
<script src="https://www.paypal.com/sdk/js?client-id=xxxxxxx¤cy=GBP&commit=true">
</script>
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
// Set up the transaction
return actions.order.create({
purchase_units: [{
amount: {
value: '10'
}
}]
});
}
}).render('#paypal-button-container')
</script>
You have to pass the amount dynamically to PayPal Create order function.
Added a input field and passed amount to function - in addition to this you can check for negative and non 0 amount as well by adding checks to input fields.
Try the below basic code , i hope that this will solve the issue
<script src="https://www.paypal.com/sdk/js?client-id=xxxxxxx¤cy=GBP&commit=true">
</script>
<label>Enter amount : </label><input name="amount" type="text" id="amount" />
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
var amt = document.getElementById("amount").value;
// Set up the transaction
return actions.order.create({
purchase_units: [{
amount: {
value: amt
}
}]
});
}
}).render('#paypal-button-container')
</script>
Building on the example by PayPal_vidya, I used the following code that worked with the latest PayPal smart button code:
<div id="paypal-button-container">
<label>Enter amount : </label><input name="amount" type="text" id="amount" />
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=USD" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
amt = document.getElementById("amount").value;
return actions.order.create({
purchase_units: [{
amount: {
value: amt
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
</script>
Actually, I need to implement the PayUMoney with Ionic 3. I know, I don't have proper plugin. But I need to integrate the PayUMoney processing with my Server and send the acknowledgement to ionic 3.Please Guide me to solve this issue.
I'm not sure if you have found the solution already, but this might help others looking for the answer.
So lets assume you have all the required post parameters(You either have it locally somehow or get it from your server).
this.paymentString = `
<html>
<body>
<form action="${this.post_url}" method="post" id="payu_form">
<input type="hidden" name="firstname" value="${this.firstname}"/>
<input type="hidden" name="email" value="${this.email}"/>
<input type="hidden" name="phone" value="${this.phone}"/>
<input type="hidden" name="surl" value="${this.surl}"/>
<input type="hidden" name="curl" value="${this.curl}"/>
<input type="hidden" name="furl" value="${this.furl}"/>
<input type="hidden" name="key" value="${this.key}"/>
<input type="hidden" name="hash" value="${this.hash}"/>
<input type="hidden" name="txnid" value="${this.txnid}"/>
<input type="hidden" name="productinfo" value="${this.productinfo}"/>
<input type="hidden" name="amount" value="${this.amount}"/>
<input type="hidden" name="service_provider" value="${this.service_provider}"/>
<button type="submit" value="submit" #submitBtn></button>
</form>
<script type="text/javascript">document.getElementById("payu_form").submit();</script>
</body>
</html>`;
console.log(this.paymentString);
this.paymentString = 'data:text/html;base64,' + btoa(paymentString);
So basically now you have a base64 html string which you can pass to your InAppBrowser(from ionic native).
Please find how to include InAppBrowser in your project from ionic native docs (PS: Include InAppBrowser in app.modules.ts as well).
constructor(private iab: InAppBrowser) { }
Next step is to open the your base64String inAppBrowser and listen for completion of the transaction.
const browser = this.iab.create(payString, "_self", {
location: 'no',
clearcache: 'yes',
hardwareback: 'no',
});
browser.on('loadstart').subscribe((event: InAppBrowserEvent) => {
if (event.url === this.surl) {
this.paymentSuccess();
} else if (event.url === this.furl) {
this.paymentFailure();
}
});
What you do in functions paymentSuccess and paymentFailure is up to you.
That is it, should work as required.
Read further if you intend to send json data in 'productinfo'
You need to convert it to htmlsafe characters.
So replace this line
<input type="hidden" name="productinfo" value="${this.productinfo}"/>
with
<input type="hidden" name="productinfo" value="${this.htmlEntities(this.productinfo)}"/>
and have a function to convert json data to html safe characters,
private htmlEntities(str) {
return String(str)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
}
hi am trying to make setinterval work when i submit a form,
this what i have so far
setInterval(function(){ getUsers(); }, 1000);
`document.getElementById("cal").onsubmit =
function getUsers()
{
$.ajax({
url: 'test.php',
type: 'post',
success: function(data) {
$('.htmlelement').html(data);
}
});
}'
html
<FORM id= "cal" NAME="Calc" action="seller.php" method="post"
onsubmit="myFunction()">
<input type="text" name="firstname" value="Mickey"><br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="submit">
</FORM>
I think you have misunderstood how intervals should be wrapped. What you should do is wrap the submit button inside an interval and then make it call your function. You can use this fiddle http://jsfiddle.net/wauzpzdz/1/ for this purpose.
I have a paypal button with the code in a file name paypaltest.php:
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<!--<input type="hidden" name="custom" value="<?php //echo $id ?>">-->
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
I also have a paypal ipn php file name listener.php in the same location on my web hosting server directory.
I want to know how would i link the two to know if a transaction was Verified or not. Should i replace the sandbox url on the form with the listener.php file.
I can help you with single page PayPal pay now button
actually I use this one of my projects
<script src="https://www.paypal.com/sdk/js?client-id=XXXXXXXXXXXXXXXXX">
</script>
<div id="paypal-button-container"> </div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '1230'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed');
// Call your server to save the transaction
return fetch('codes/paypalapi.php?invo=123', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID,
amount: data.amount
})
});
});
}
}).render('#paypal-button-container');
</script>