I have an accordion with some items. Now I want to show a paypal pay button in each accordion item. I am using the paypal JS SDK. So for it is working just for the first open accordion item. There the paypal button is shown, I can click on it and paypal modal is opening to login and pay.
I have created a file where I have added the "paypal-button-container" and included a PHP file with the paypal JS script:
<?php
include_once ('method/paypal_accordion.php');
?>
<div id="paypal-button-container"></div>
In the included file 'method/paypal_accordion.php' I have the paypal script with the variables for the payment:
<script>
// Loop over each funding source/payment method
var FUNDING_SOURCES = [
paypal.FUNDING.PAYPAL
];
FUNDING_SOURCES.forEach(function(fundingSource) {
// Initialize the buttons
var button = paypal.Buttons({
fundingSource: fundingSource,
createOrder: function (data, actions) {
return actions.order.create({
application_context: {
brand_name: 'my-page.com',
locale: 'en_gb',
shipping_preference: 'SET_PROVIDED_ADDRESS',
},
intent: 'CAPTURE',
payer: {
email_address: '<?php echo $email; ?>',
...
onApprove: function (data, actions) {
return actions.order.capture().then(function (orderData) {
...
});
},
How can the paypal button be shown on every opened accordion item?
Currently I just see the paypal div there, but no button:
<div id="paypal-button-container"></div>
Should I reload the DOM or is there an event in the accordion to do that?
Or should I use a button with a form or some AJAX?
Each div where you want to render a PayPal button must have a unique id
Each time you invoke paypal.Buttons({...}) and call .render('#some-id-goes-here'), the selector to render in should be one of those ids.
Related
This is my html file
<button (click)="pay()">Add to Cart</button>
This is my ts file
pay(){
Swal.fire(
`Congratulations!!🤩`,
`<h3>The item has been added to the cart!!<h3>`,
'success');
}
So, when I click on the OK(which in here is success), I want user to redirect to the Cart Page of the site. How do I add a link?
Just make use of JavaScript promises. Put the then method after swal function. We do not need to use timer features. For example:
swal({
title: 'Request Delivered',
text: 'You can continue with your search.',
type: 'success'
}).then(function() {
window.location = "redirectURL";
})
Thank you
pay(){
Swal.fire(
`Congratulations!!🤩`,
`<h3>The item has been added to the cart!!<h3>`,
'success').then(() => {
this.router.navigate(['/yourCartPage']);
})
}
I have trouble with this Paypal smart buttons. Even it it looks simple as I imagine :) can't get it to work.
I have three items, side by side in separate divs and want to add paypal smart buttons under each item but only different price.
When I put this paypal code under first, it is working like a charm.
<div id="paypal-button-container"></div>
<!-- <script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR" data-sdk-integration-source="button-factory"></script> -->
<script src="https://www.paypal.com/sdk/js?client-id=ARcbGj17hMo1yw4nEMDB5E-Y7W00gbie9F_zb0m--XCOjKWo4jIddFV9N5UzbluK-if61HLUVs0rQ7zC¤cy=EUR" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'vertical',
label: 'pay',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '13.88'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
window.open('www.google.ba');
});
}
}).render('#paypal-button-container');
</script>
But when I put same code with changed money value it only shows that second one, and also when I put under third item it shows only that one.
I tried to render.('#custompaypalbutton') - to change class of button div where it shows up but nothing changed.
Am I missing something?
Do I maybe need different paypal app (REST Api) for every button that will generate new ID?
<script src="https://www.paypal.com/sdk/js... must only be loaded once per page
Each button should .render('...') to its own container element
I created Smart paypal button and got this code
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'vertical',
label: 'buynow',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '13.88'
}
}]
});
},
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>
I am wondering, is there function to open specific url after successful payment to add in onApprove function after alert? Will it work like that?
Will window.open() work in this case?
You want to use location.assign. The syntax:
location.assign(url);
You could use "location.replace()".
You can additionally get the order id from the details object and use that as a get parameter in the redirect url. This allows you to verify the transaction on the next page, preventing the user from just directly calling the "success" url.
When a user presses the enter key on my site the PayPal Express modal pops up. I need to prevent this happening.
I am using client-side PayPal Express (checkout.js).
I have tried $("#paypal-button").blur()
What I need is a way to prevent the box popping up, by setting a JavaScript variable (some way to validate).
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: 35, currency: 'USD' }, description: name + " " + email, custom: 'New York'
}
]
},
You can add the blur method to the button in onCancel and onAuthorize processing like so;
onCancel: function(data, actions) {
$("#paypal-button").blur()
},
onAuthorize: function(data, actions) {
$("#paypal-button").blur();
return actions.payment.execute().then(function(payment) {
});
}
This should remove focus from the button after the modal is closed
I have one form that is in a dialog. When I apply the function:
var form = $('#xxx');
form.valid()
It works as expected, but this dialog has a button that currently calls another dialog. This second dialog has a form too with its own validation. When I close the second dialog, and then close the first one and open this last again, the validation of the first dialog,I mean "jquery.valid()", does not work. I noticed that the "form.validate.currentelement" of the first dialog, before calling the second dialog has data, but after calling the second one it does not.
part of my code
Landing page
//my first dialog
<div id="dgAddEdit" style="display: none;">
<div id="dgAddEditContent"></div>
</div>
<!-- my second dialog-->
<div id="dgVendorSearch" title="Vendor Search" class="dialogs"></div>
<div id="dgCollectible">
#using (Html.BeginForm("", "", FormMethod.Post, new { id = "" }))
{
//some html tags for the landing
}
</div>
Calling the dialogs
$('#dgAddEdit').dialog("option", "buttons", [
{ id: "SaveButton", text: "Save", click: function () { SaveFeature(); } },
{ id: "CancelButton", text: "Cancel", click: function () { $(this).dialog("close"); } },
{
id: "VendorSearch", text: "Vendor Search", click: function () {
$("#dgVendorSearch").dialog('open');
}
}
]);
calling the first dialog
$('#dgAddEdit').dialog("open");
my problem was that the second dialog had a reference to "jquery.valid" , this deleted all the validation rules of the first dialog, after deleting this reference all the dialogs are working as expected.