Hi all,
I have very little code experience if any. So far i have built an website out for a buddy of mine. They later wanted a payment sections. I have completed the payment inputs and have been able to have a single button token created and charge.
My issue is that now i would like to have Stripe send the Auto receipt after the sucessful payment.
Can someone please help me with the code for this
Hi everyone,
We are building a very simple marketplace and I am currently struggling to get the simple first step to setup Stripe Connect for seller accounts. Our Stripe account is all setup to connect with Standard accounts.
I followed the steps listed on the Stripe site here https://stripe.com/docs/connect/standard-accounts .
Steps 1 to 3 are fine - we have a button on a register page which routes sellers so they can setup / connect their account, then when they’re done we route them back to a URI page we setup where the seller would get some kind of “you’re all set” message. When the user is routed to the URI page in the URL I can get the “ac_xxxxx” code.
This is where it becomes an issue. In the Stripe instructions of step 4 it says to make a POST request to fetch the seller’s credentials
curl https://connect.stripe.com/oauth/token \
-d client_secret=sk_test_XXXXX \
-d code="{AUTHORIZATION_CODE}" \
-d grant_type=authorization_code
which I have translated to the code below, however when I run my code I get the following error.
{
"error": {
"code": "parameter_missing",
"doc_url": "https://stripe.com/docs/error-codes/parameter-missing",
"message": "You must supply either a card, customer, PII data, bank account, or account legal entity to create a token. If you're making this request with a library, be sure to pass all of the required parameters for creating a token. If you're making this request manually, be sure your POST parameters begin with the token type. For example, a PII token would require `pii[personal_id_number]`, while an account token would require a parameter beginning with `account[legal_entity]`. See the API reference for more information: https://stripe.com/docs/api#token_object",
"type": "invalid_request_error"
}
}
I don’t see any other option than having a card or account[legal_entity] parameter in the POST method which makes no sense when looking at the instructions for step 4.
I am going mad… Can anyone help please?
Thanks!!
FRONT END CODE
This is the code of the URI page, where sellers are routed to once having agreed to link their Stripe account to ours. The “completeRegistration” function is where the POST request to Stripe is made to retrieve credentials and I would then parse those in the “response” object once it works.
import wixLocation from 'wix-location';
import { completeRegistration} from 'backend/stripeProxy';
var authCode;
$w.onReady(function () {
let query = wixLocation.query;
authCode = query['code'];
if (authCode === undefined) {
console.log(query['error_description']);
} else {
completeRegistration(authCode)
.then((response) => {
console.log(response);
console.log("Stripe user ID: " + response['stripe_user_id']);
}).catch(e => {
console.log(e);
});
}
});
BACKEND CODE
I build the object following the curl code found on the Stripe page, injecting the seller’s code provided in the URI when connection is made to our Stripe account. I then believe a fetch to the token page needs to be made, but this is where I must be doing something wrong.
export async function completeRegistration(auth_code) {
const apiKey = "sk_test_XXXXX";
var object = {
"client_secret": apiKey,
"code": auth_code,
"grant_type": "authorization_code"
};
const response = await fetch("https://api.stripe.com/v1/tokens", {
method: 'post',
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": "Bearer " + apiKey
},
body: encodeBody(object)
});
if (response.status >= 200 && response.status < 300) {
const json = await response.json()
return json.id;
}
const responseText = await response.text();
console.log(responseText);
return response;
}
function encodeBody(body) {
var formBody = [];
for (var property in body) {
var encodedKey = encodeURIComponent(property);
var encodedValue = encodeURIComponent(body[property]);
formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");
console.log(formBody);
return formBody;
}
Right, I got a response from the Stripe team, the URL I was using for the POST query was wrong, and instead replaced it with Stripe Login | Sign in to the Stripe Dashboard which fixed it.
@mason-turpin @david-seroy - Thank you both for all of your constributions on this forum chain! I am following this latest input instructions for the HTML, PAGE CODE, and BACKEND as it most applicable to my use case.
I need to save the customer payment details to charge them later for ease of checkout. I would like to use the HTML iframe with the STRIPE ELEMENT since its much nicer than just a regular input text box.
However, I can’t seem to get the following to work:
Hey David, I like this process, is there anyway when a customer fills this out that the amount is already in the code. I sell a product for a fixed price and would like the fixed price it be in the amount filed and when the customer clicks to pay that amount would be charged. thanks
Hi,
Here’s an issue I’m scratching my head with:
Requirement:
I’d like to create a Wix Paid Plan with a 3-month free trial period - after which, the card details collected at commencement of the free trial period will be charged.
My Understanding:
It seems that Wix Paid Plans allow one to either have free plans or charge for paid plans immediately using the Stripe card payment solution.
Solution?
Is there a way to achieve the requirement above or will I need to ignore Wix Paid Plans and build my own plans and code using the Stripe API. i.e.
Thanks for any advice David Seroy, Wix, or this community can give.
Finally, let me also thank this community of Wix developers and the guys and gals at Wix who have allowed me to do some really cool stuff with Wix.
Riaz
I have successfully built a form that will accept payments after a user inputs all of their information. I would like to create a confirmation message (maybe a lightbox) once the card is charged. Can someone lead me to resources to do this?
I would also like for Stripe to automatically send a receipt to the user’s emails address. Any advice on that would be appreciated.
I have to say, I find it absolutely pathetic that this has been an issue for over 2 years and yet it is still this difficult to properly implement a Stripe payment solution into Wix websites. I appreciate all the time that was put into this thread. I have a lot of work to do to get this to work on my site. Thanks for the advice.
PLEASE Wix, fix this. Add PHP. Make a better integration with Stripe. Whatever. Just get it done.
You can accomplish this by using Wix Pay API. Here is more about it, I have created an article tutorial:
https://support.totallycodable.com/en/article/setting-up-wix-pay-api
Hello everyone! Not getting Customers Records in Stripe 
Hoping to get some answers here…
I have this website taking bookings and Events payments (the Wix apps) and I have configured the payment system from Stripe. Everything looks brilliant and I am getting the payments as expected BUT for some reason I cannot get the customer records in Stripe. This is something I really need as part of other integrations.
Does Anyone know how to resolve this issue? Do I need to add backend code in Stripe or Wix in order to get Customer records from transactions made from the website?
any information would be appreciated.
Thanks!
I am still stumped here as well - this has been an issue forever - please let me know if you get any code recommendations
@parachutesbcn
@riazmkhan Did you get any input here? I can’t figure out how to save Stripe Customer info for recurring charges…
I have this code working so far as it is sending it to stripe and stripe and stripe is registering the charge, but then nothing. I am trying to figure out where to insert the code for successful info? I used the code on page one but had to make two tiny tweaks and voila:
IFrame:
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- Used to display form errors -->
<div id="card-errors" role="alert"></div>
SUBMIT PAYMENT
Page Code: import {charge} from 'backend/stripecharge'; $w.onReady(() => { $w("#html1").postMessage(""); $w("#html1").onMessage( (event) => { let token = JSON.parse(event.data); console.log(token); charge(token.id, getCart()) .then((chargeResponse) => { console.log("Charge ID: " + chargeResponse.id); }); }); }); function getCart(){ **return** { "amount": $w("#amount").value * 100, "currency": "USD", "description": "whatever" }; } backend: import {fetch} from 'wix-fetch'; export function charge(token, cart) { const apiKey = "sk_test_c2l6Vig1HQhdlJ6b31nATHl0"; **return** fetch("https://api.stripe.com/v1/charges", { method: 'post', headers: { 'Accept': 'application/json', 'Content-Type': "application/x-www-form-urlencoded", 'Authorization': "Bearer " + apiKey }, body: encodeBodyToken(token, cart) }) .then( (httpResponse) => { if (httpResponse.ok) { **return** httpResponse.json(); } }); } function encodeBodyToken(token, cart) { let encoded = ""; **for** ( let [k, v] of Object.entries(cart)) { encoded = encoded.concat(k,"=", encodeURI(v), "&"); } encoded = encoded.concat("source=", encodeURI(token)); console.log("Encoded" + encoded); **return** encoded; } any help would be greatly appreciated!