Sure @ritaorlov (BTW it would be great if we could actually tag members in comments).
You need to write code in 3 places for this to work:
- A Javascript file in your Public Folder. This one is called stripeAPI.js
import {fetch} from 'wix-fetch';
export async function createToken(card) {
//Go to stripe.com to create a test key and replace the one in the example
const apiKey = "[Your Publishable API Key]";
const response = await fetch("https://api.stripe.com/v1/tokens", {
method: 'post',
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": "Bearer " + apiKey
},
body: card
});
if (response.status >= 200 && response.status < 300) {
const json = await response.json();
return json.id;
}
const responseText = await response.text();
return response.status;
}
export function encodeCard(card){
let encoded = "";
for (let [k, v] of Object.entries(card)) {
encoded = encoded.concat("card[", k, "]=", encodeURI(v), "&");
}
return encoded.substr(0, encoded.length - 1);
}
- A Javascript Web Module in your Backend Folder. This one is called stripeProxy.jsw
import {fetch} from 'wix-fetch';
export async function charge(token,cart) {
//Go to stripe.com to create a test key and replace the one in the example
const apiKey = "[Your Secret API Key]";
const response = await fetch("https://api.stripe.com/v1/charges", {
method: 'post',
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": "Bearer " + apiKey
},
body: encodeBody(token, cart)
});
if (response.status >= 200 && response.status < 300) {
return await response.json();
}
return await response.text();
}
function encodeBody(token, cart){
let encoded = "";
for (let [k, v] of Object.entries(cart)) {
encoded = encoded.concat(k,"=", encodeURI(v), "&");
}
encoded = encoded.concat("source=", encodeURI(token));
return encoded;
}
- The page in your Wix Editor where you will be collecting the CC information
import {createToken, encodeCard} from "public/stripeAPI.js";
import {charge} from 'backend/stripeProxy';
$w.onReady(function () {
setData();
});
export function payNow() {
createToken(encodeCard(createCard()))
.then((token) => {
charge(token,getCart())
.then((chargeResponse) => {
});
});
}
function createCard() {
return {
"name": $w("#nameOnCard").value,
"number": $w("#cardNumber").value,
"cvc": $w("#cvc").value,
"exp_year": $w("#expYear").value,
"exp_month": $w("#expMonth").value
};
}
function getCart(){
return {
"amount": $w('#paymentAmount').value*100,
"currency": "USD",
"description": "test charge"
};
}
function setData() {
$w("#nameOnCard").value = "Paco ElFlaco";
$w("#cardNumber").value = 4242424242424242;
$w("#cvc").value = 123;
$w("#expYear").value = 18;
$w("#expMonth").value = 12;
}
export function payButton_click(event, $w) {
return payNow();
}
And voila! I hope this helps you get what you need. You can learn more about Stripe’s API here: Stripe API reference – curl
