Develop Reference

cant redirect to success page in django paypal

i have a Django Store Website which use Paypal for payment
but in my views.py,Django do everything except go to the directed page that i choose
this is my views.py
def capture(request,id):
do some stuff
return redirect(reverse("shop:success"))
and this is JavaScript
<script type="text/javascript">
function completeOrder(){
var url = "{% url 'shop:paypal' id=orders.id %}"
fetch(url, {
method:'POST',
headers:{
'Content-type':'application/json',
'X-CSRFToken':csrftoken,
},
body:JSON.stringify("{{orders.id}}")
})
}
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
style: {
layout: 'horizontal',
color:"blue",
label:"checkout",
tagline:"false",
shape:"pill",
size:"small",
},
// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '{{orders.converter}}'
}
}]
});
},
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Show a success message to the buyer
completeOrder()
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
</script>

Do not use actions.order.create() and actions.order.capture() to create+capture on the client side and then call a server with fetch after a client-side capture. This is thoroughly bad design when using a server.
Instead, switch to a proper server-side integration: make two routes on the server, one for 'Create Order' and one for 'Capture Order', documented here; there is a Checkout-Python-SDK you can use. These two routes should return only JSON data (no HTML or text). The latter one should (on success) store the payment details in your database before it does the return (particularly purchase_units[0].payments.captures[0].id, the PayPal transaction ID)
Pair your two routes with the following approval flow: https://developer.paypal.com/demo/checkout/#/pattern/server
In the success code of that flow, the redirect can be done with actions.redirect(), or simply setting window.location.href (general JavaScript solution)

Errors: Use intent=capture to use client-side capture [Paypal Javascript SDK]

I am using the PayPal javascript SDK to create a Paypal subscription button for my web page, the problem resides when testing the button using a sandbox account in which after performing all the payment for the subscription the following error appears:
Error: Use intent=capture to use client-side capture ...
Here's my HTML script used to show my pay PayPal button
<script src="https://www.paypal.com/sdk/js?client-id=MY_CLIENT_ID&vault=true&intent=subscription&components=buttons"></script>
<div id="paypal-button-container"></div>
Heres my js file which performs the respective handlers depending on the actions and status of the payment:
paypal.Buttons({
style: {
shape: 'rect',
color: 'black',
layout: 'vertical',
label: 'subscribe'
},
createSubscription: function(data, actions) {
if (discordUser.value === "") {
alert("Introduce tu usuario de discord");
return;
}
slotDecremented = true;
alterSlots();
return actions.subscription.create({
'plan_id': 'P-ID' // here is my plan id
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
sendEmailToken(details.payer.email_address, discordUser.value, data.subscriptionID);
});
},
onCancel: function(data) {
alterSlots(true);
slotDecremented = false;
},
onError: function(data) {
if (!slotDecremented) {
return;
}
alterSlots(true);
slotDecremented = false;
}
}).render('#paypal-button-container');
the alterSlot() function makes an API call with AJAX to my specific endpoint, just extra information if neccesary
EDIT:
The sendEmailToken() function makes an AJAX request to an API hosted on my server, such that the server performs the correct action and being secure (just metadata for knowing what's going on in that part)

onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
sendEmailToken(details.payer.email_address, discordUser.value, data.subscriptionID);
});
},
actions.order.capture() is for a client-side one-time payment button. It does not belong in a Subscribe button, as there is no order to capture.
See e.g. the PayPal Subscriptions documentation, which only has a basic success alert in its onApprove example: https://developer.paypal.com/docs/subscriptions/integrate/#create-the-subscription
Since it appears your intent is to perform a server-side operation such as sending an email after subscription approval, you should be activating said subscription from your server to ensure subscriptions don't become active without your server being correctly being notified of this fact. Here is some information: https://stackoverflow.com/a/65139331/2069605

Stripe client intergration not taking affect after I click buy now link

I followed this documentation and my stripe checkout is not working. I have taken out the sku and pk from the SO snippet below but can anybody see what I have done wrong as I thought I implemented it correctly.
When I click the buy now link, nothing happens, don't even redirect to the checkout page.
HTML link:
<a class="buy-btn">Buy Now</a>
...
Javascript:
<script>
(function () {
var stripe = Stripe('pk_test_xxx');
var checkoutButton = document.getElementsByClassName('buy-btn');
checkoutButton.addEventListener('click', function () {
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
items: [{ sku: 'sku_xxx', quantity: 1 }],
// Do not rely on the redirect to the successUrl for fulfilling
// purchases, customers may not always reach the success_url after
// a successful payment.
// Instead use one of the strategies described in
// https://stripe.com/docs/payments/checkout/fulfillment
successUrl: window.location.protocol + '//www.xxx-online.com/xxx-leap/success',
cancelUrl: window.location.protocol + '//www.xxx-online.com/xxx-leap/cancelled',
})
.then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer.
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
});
})();

reset the star-rating component, VUE JS

I am using star-rating plugin in vue js, and I am using v-model to show the ratings from db. Everything works fine as when user is not logged in and he/she tries to rate it shows an error "login to rate", but the stars dont reset to db value instead it shows the rating of not logged in user. Currently after the error msg I am refreshing the whole page. Is there a simple way to reset the stars instead of refreshing the whole page?
:show-rating="false" #rating-selected="setRating" v-model="rating"
v-bind:star-size="20"
above is the start rating and while clicking it calls a function where I am checking if user is logged in or not with an api call. Thanks in advance.
setRating: function (rating) {
axios.get('/checkuser').then(response => {
this.user = response.data;
if (this.user === "Logout") {
toastr.error('Please login to rate', 'Error', {
positionClass: 'toast-bottom-right'
});
window.location = "/menu/" + this.menu_id;
} else {
// save in to db
}
}).catch(error => {
// TODO: Handle error
});
},

You will have to reset rating object if it's not logged in.
setRating: function (rating) {
axios.get('/checkuser').then(response => {
...
if (this.user === "Logout") {
...
this.rating = 0; <=== reset rating here (in data, not the rating parameter)
}
...
})
...
},

managed to fix it by using "this.load()" after the api call, which refreshes all components. :)

Paypal Sandbox App login error

I've a problem with my sandbox app. I integrated the script given for the paypal checkout express payment in my web app. This the script :
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<div id="paypal-button-container"></div>
<script>
var total = 0;
$.getJSON("/Home/getTotal", function (result) {
total = result;
});
// Render the PayPal
paypal.Button.render({
// Set your environment
env: 'sandbox', // sandbox | production
// Specify the style of the button
style: {
label: 'buynow',
fundingicons: true, // optional
branding: true // optional
},
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'AT9iydEDhcqfM_dhU8MR0lvkFgZBjD1oXQVrG-CR9CyK_vd-aXpNzEnyVV7um_hAPrkqQX8JhtjGCbBt'
},
// Wait for the PayPal button to be clicked
payment: function (data, actions) {
return actions.payment.create({
transactions: [
{
amount: { total: total, currency: 'USD' }
}
]
});
},
// Wait for the payment to be authorized by the customer
onAuthorize: function (data, actions) {
return actions.payment.execute().then(function () {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
This code displays a paypal button. When I click on the button, it shows me a login page to proceed to the payement. The problem is : I can't login on this page with a paypal account that I have. I read somewhere that only the sandbox's test accounts can be used to login on this page, but I want to let everyone who has a paypal account login in this page. What should I do ? Thank you for your answers!

I've found the solution : if you want to let everybody login into your payment's page, you've to pass to production mode.