Stripe - Not charging card - javascript

I've setup a stripe custom checkout using javascript. Every parameter goes through, I receive a status 200 in the log when we make a payment. Everything looks like it goes through. However the amount remains as "0" in the Parsed Request Query Parameters and not charging the card.
I've gone over documentation for hours and can't get my head around the issue.
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var pinId = "<%= #id %>";
var from = "<%= #from %>";
var content = "Supersize+me";
var handler = StripeCheckout.configure({
key: 'Published-Key',
image: '/assets/campusboard-logo.png',
token: function(token, args) {
$.getJSON( "purchased/"+pinId )
.done(function( data ) {
window.location = "http://"+window.location.host+"/pins/"+pinId+"?utm_source=Purchased&utm_medium="+from+"&utm_campaign=Featured%20Pins&utm_content="+content;
})
.fail(function( jqxhr, textStatus, error ) {
alert("We've encountered a problem with the transaction. Please try again.");
});
}
});
document.getElementById('ssm').addEventListener('click', function(e) {
// Open Checkout with further options
handler.open({
name: 'CampusBoard',
description: 'Featured Pin (£29.00)',
amount: "100",
currency: 'GBP',
panelLabel: 'Supersize my Pin'
});
e.preventDefault();
});
document.getElementById('mmh').addEventListener('click', function(e) {
// Open Checkout with further options
handler.open({
name: 'CampusBoard',
description: 'Featured Pin (£59.00)',
amount: 5900,
currency: 'GBP',
panelLabel: 'Make my Pin Huge'
});
content = "Make+me+huge";
e.preventDefault();
});
</script>
Can someone see where I'm going wrong?

Stripe Checkout is just a well-done pre-made payment form. You actually have to create a Charge object on your server using your Stripe secret API key. Follow these tutorials for your specific language.

You are passing the amount as a string whereas I think stripe is expecting it as a number. So:
handler.open({
...
amount: 100,
...
});

Related

Ajax post data to external URL don't receive callback javascript jquery

$(document).ready(function()
{
$("img").click(function()
{
$.post("https://.co.za/payweb3/initiate.trans",
{
PAYGATE_ID: "1029612100016",
REFERENCE: "Basket_ACDDDDA1-816E-48D7-A9DB-64ECAC97C76",
AMOUNT: "33900",
CURRENCY: "ZAR",
RETURN_URL: "https://www./checkout.asp",
TRANSACTION_DATE: "2019-10-21 9:17:9",
LOCALE: "en-za",
COUNTRY: "ZAF",
EMAIL: "dave#.co.za",
NOTIFY_URL: "https://www./thanks.asp",
CHECKSUM: "6251a4edec03bfcc86ad88112b10637d"
},
//Callback
function(data) {
alert( "Data Loaded: " + data );
//document.form1.submit();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
I perform an ajax post to the external URL but don't receive the HTTP post reply. I have never had to do this before so I am a bit lost.
I adapted function from W3schools but bit in the dark...
This is the expected postback data from URL, I don't receive it. Please help.
PAYGATE_ID=1029612100016&PAY_REQUEST_ID=C7701B85-F479-DBB1-73BE-B1D57F17EAE0&REFERENCE=Basket_ACDDDDA1-816E-48D7-A9DB-64ECAC97C76&CHECKSUM=40c4daefb5e7d1eef6fa6a085789b89c
The callback doesn't work, not sure what I'm doing here?
$(document).ready(function()
{
$("img").click(function()
{
$.post("https://my.paymentgateway.com/some/endpoint",
{
PAYGATE_ID: "123456",
REFERENCE: "BASKET_REF_123",
AMOUNT: "33900",
CURRENCY: "ZAR",
RETURN_URL: "https://www.my.shop.com/checkout.asp",
TRANSACTION_DATE: "2019-10-21 9:17:9",
LOCALE: "en-za",
COUNTRY: "ZAF",
EMAIL: "dave#my.show.com",
NOTIFY_URL: "https://www.my.shop.com/thanks.asp",
CHECKSUM: "6251a4edec03bfcc86ad88112b10637d"
}).done((data)=> {
// Success handling
}).fail((xhr, status, error) => {
// Error handling
});
});
});
Try to use the done() and fail() handlers.
There are a couple of errors in your snippet:
You have no img in your HTML, so it cannot be clicked. I changed it to a button in my snippet.
You seem to have CORS problems - that means the server thinks you are not allowed to request the resource you try to get. I put http://cors-anywhere.herokuapp.com/ before your URL. Keep in mind that it's only a test solution, not for production. You either have to get the provider to set the correct headers (so accept your request), or you need to create a solution that goes around this problem. (So if you remove the URL part I put there, the snippet won't work.)
Something is not right with your request data, as it returns a ERROR=DATA_CHK message - this is not conventional, so I don't know what it means or implies.
$(document).ready(function() {
$('.button').on('click', function(e) {
e.preventDefault();
$.post("https://cors-anywhere.herokuapp.com/https://.co.za/initiate.trans", {
PAYGATE_ID: "123456",
REFERENCE: "Basket_ACDDDDA1-816E-48D7-A9DB-64ECAC97C76",
AMOUNT: "33900",
CURRENCY: "ZAR",
RETURN_URL: "https://www./checkout.asp",
TRANSACTION_DATE: "2019-10-21 9:17:9",
LOCALE: "en-za",
COUNTRY: "ZAF",
EMAIL: "dave#.co.za",
NOTIFY_URL: "https://www./thanks.asp",
CHECKSUM: "6251a4edec03bfcc86ad88112b10637d"
},
function(data) {
console.log('data:', data)
})
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button class="button">CLICK HERE</button>
More on CORS:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
https://www.codecademy.com/articles/what-is-cors

Razor Pay checkout form not appearing and giving error as not a function

I am implementing razorPay payment in angular7 project.I am trying to open checkout form by creating a single instance of Razorpay and accessing its function open(). But instead it is throwing error "is not a function". I couldn't find any proper documentation regarding this.
However, If I try to simple create payment using razorpay, it opens up the window but there is no option for user to choose any method and hence it throws error again because directly creating payment will not add up any card(if method is 'card'). So it is necessary to open checkout form.
Here is my function I am using, firstly i create order on server to generate id and then proceed to payment.
buyPlan() {
let postdata = {
amount: 1000,
currency: "INR",
receipt: "1",
notes: {},
payment_capture: true
}
this.common.createOrder(postdata).subscribe(
(result: any) => {
console.log(result)
var razorpay = new this.winRef.nativeWindow.Razorpay({
key: 'dashboard_key_id',
image: 'assets/images/logo-1.png',
});
var data = {
amount: 1000,
currency: "INR",
email: 'abc#example.com',
contact: '9874563210',
notes: {
address: 'Sector 65 Delhi',
},
method: 'card',
order_id: result.data.id,
handler: function (response) {
alert(response.razorpay_payment_id);
}
};
razorpay.open();
}, (err: HttpErrorResponse) => {
}
);
}
For Custom Integration
Remove:
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
from index.html file
and put:
<script type="text/javascript" src="https://checkout.razorpay.com/v1/razorpay.js"></script>
inside <head></head> tag

How to create a Stripe subscription with a variable quantity?

Right now I'm successfully creating a Stripe subscription that has a hardcoded quantity:
customer = stripe.Customer.create(email=request.form['stripeEmail'], source=request.form['stripeToken'])
# For the moment, change the quantity parameter for each customer
subscription = stripe.Subscription.create(
customer = customer.id,
items = [
{
'plan': 'plan_*************',
'quantity': 7,
},
],
)
The idea would be to obtain that value for quantity from the frontend. I already have a selector that sets the quantity value programmatically and I'm actually using it to print variable amounts in Stripe Checkout:
<script>
var handler = StripeCheckout.configure({
key: "{{pub_key}}",
image: "https://stripe.com/img/documentation/checkout/marketplace.png",
locale: "auto",
zipCode: true,
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
}
});
document.getElementById("customButton").addEventListener("click", function(e) {
var quantity = document.getElementsByName("selectedQuantity")[0];
var text = quantity.options[quantity.selectedIndex].text;
// Open Checkout with further options:
handler.open({
name: "Company, Inc.",
description: text + " Subscriptions",
amount: 900 * text
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener("popstate", function() {
handler.close();
});
</script>
Notice that I'm getting the public key from the backend, but I don't know how to retrieve the quantity value from the frontend in the backend.
How do I do that?
EDIT:
When I wasn't using a custom Checkout integration I had a form that would do this:
<form action="{{ url_for('pay') }}" method="POST">
But there is no form here, so I'm not sure what should the next step be.
How are you submitting the token to your backend server(i.e. how have you implemented the token function)? Once you've done that, you can just submit the quantity in the same way.
One way to do this might be to use a form, add the Stripe token to a hidden input in that form, and then submit it with Javascript.
Here's an example : https://jsfiddle.net/53u96kvw/
Or if you don't have a form at all, you can make an AJAX request with the same information : https://jsfiddle.net/kcp12o3z/

correct way to use Stripe's stripe_account header from oauth with meteor

I'm trying to build a platform based on Meteor that uses Stripe Connect. I want to use the "preferred" authentication method from Stripe (Authentication via the Stripe-Account header, https://stripe.com/docs/connect/authentication) so that I can create plans and subscribe customers on behalf of my users. I cannot get it to work. I tried with a second params object, similar to the exemple in the documentation:
var stripeplancreate = Meteor.wrapAsync(Stripe.plans.create, Stripe.plans);
var plan = stripeplancreate({
amount: prod.price,
interval: prod.interv,
name: prod.name,
currency: prod.curr,
id: prod.id+"-"+prod.price+"-"+prod.curr+"-"+prod.interv,
metadata: { prodId: prod._id, orgId: org._id },
statement_descriptor: prod.descr
},{stripe_account: org.stripe_user_id});
but I get "Exception while invoking method 'createStripeProduct' Error: Stripe: Unknown arguments ([object Object]). Did you mean to pass an options object? See https://github.com/stripe/stripe-node/wiki/Passing-Options." which does not seem to accurately reflect the issue but prompted me to try adding stripe_account in the params object itself:
var stripeplancreate = Meteor.wrapAsync(Stripe.plans.create, Stripe.plans);
var plan = stripeplancreate({
amount: prod.price,
(...)
statement_descriptor: prod.descr,
stripe_account: org.stripe_user_id
});
I then get the following error: "Exception while invoking method 'createStripeProduct' Error: Received unknown parameter: stripe_account"
Any ideas? Has anybody managed to have Stripe Connect stripe_account authentication work with Meteor, especially with Meteor.wrapAsync(...)?
This should work for wrapAsync, HOWEVER check out my answer here for possible issues with wrapAsync - Wrapping Stripe create customer callbacks in Fibers in Meteor:
Here is also a great video on wrapAsync: https://www.eventedmind.com/feed/meteor-meteor-wrapasync
var createStripePlanAsync = function(shoppingCartObject, callback){
stripe.plans.create({
amount: shoppingCartObject.plan.totalPrice,
interval: shoppingCartObject.plan.interval,
name: shoppingCartObject.plan.planName,
currency: "usd",
id: shoppingCartObject.plan.sku //this ID needs to be unique!
}, function(err, plan) {
// asynchronously called
callback(err, plan);
});
};
var createStripePlanSync = Meteor.wrapAsync(createStripePlanAsync);
var myShoppingCart = {
customerInfo: {
name: "Igor Trout"
},
plan: {
totalPrice: 5000,
interval: "month",
name: "Set Sail For Fail Plan",
sku: "062015SSFF"
}
};
// Creates the plan in your Stripe Account
createStripePlanSync(myShoppingCart);
Later when you subscribe a customer to a plan you just refer to the plan via the id that you gave the plan when you first created it.
After much trying multiple things, for now, I just managed to get it working using the stripe-sync package instead of the "normal" one + wrapAsync.
try{
var plan = Stripe.plans.create({
amount: prod.price,
...
},{stripe_account: org.stripe_user_id});
}catch(error){
// ... process error
}

Facebook requests 2.0 filter

So I hope someone call help me with this issue as I'm not too sure if its javascript, or if its facebook.
Here's my situation. I upgraded to Requests 2.0 on facebook, which no longer gives me the ability to add an exclude_ids field to the form where users will invite their friends to the App. The purpose of this form is not to just invite friends, but to add friends as something in the App.
In short, I have a list of friends that they have already added, and I want to filter that from the master list of their friends so that when they want to use the form, the friends already added do not show up.
Here is my javascript to get the friends:
<script language="Javascript" type="text/javascript">
var friends_filter = '<?=$myClass->getFiltered());?>';
</script>
Will return something like:
999999999,999999999,999999999,999999999,999999999,999999999,999999999
Which is a list of IDs of the users who they have NOT added that are their friends.
Here is my code for the form:
function addUser() {
FB.ui(
{
method: 'apprequests',
display: 'dialog',
title: 'Add friends',
message: 'Hey, I added you as a user/friend on such-and-such App',
data: 'added',
filters: [{name: 'Non-Added', user_ids: [friends_filter]}],
},
function(response) {
if(response && response.request_ids) {
showLoading('Adding Relatives');
var dataString = 'rids='+response.request_ids;
$.ajax({
type: "GET",
url: server_url+"ajax/add_relative.php",
data: dataString,
success: function(data){
window.location.reload();
}
});
}
}
);
}
If you look at the filters: [{name: 'Non-Added', user_ids: [friends_filter]}], line, that is where I include the list of IDS that I only want to see in the selector. The dialog pops up, but then list those ID's in friends_filter and an error message stating "does not resolve to a valid user ID"
This is where I get confused, if I copy and paste what friends_filter outputs and replace it the friends_filter with the list of IDs, i.e. 999999999,999999999,999999999,999999999, exactly as it appears, it works correctly.
I know this is an exhaustive post and I'm sorry, but I'm at my wits end.
The only thing I could think of is that perhaps my javascript variable friends_filter needs to be converted to some type of some sort?
Any ideas?
i was try this code and it is work good with me
FB.ui(
{
method: 'apprequests',
filters: ['app_non_users'],
message: 'msg here!',
title: 'title for box'
},
function(response) {
alert(response.request_ids);//this is return after send invite
}
);
just if you want filter result with list of user use
filters: [{name: 'Invite friends', user_ids: <?php echo json_encode($users_array);?> }],
After much trial and error, I figured out the solution.
in:
<script language="Javascript" type="text/javascript">
var friends_filter = '<?=$myClass->getFiltered());?>';
</script>
I changed to
<script language="Javascript" type="text/javascript">
var friends_filter = [<?=$myClass->getFiltered());?>];
</script>
By replacing the quotes around the php echo with brackets.
Then I changed:
filters: [{name: 'Non-Added', user_ids: [friends_filter]}],
To:
filters: [{name: 'Non-Added', user_ids: friends_filter}],
If you want to exclude those (of your friends) who added the application, you simply use:
filters: ['app_non_users']

Categories

Resources