OK, I’ve done this 4 times now. Followed EXACTLY what the tutorial shows. Still not working. Please help!!!
Code I am using:
Page:
import wixWindow from “wix-window”;
$w.onReady( function () {
$w(“#booknow”).onClick((event, $w) => {
var amm = $w(“#amount”).text.replace
var data = {
amount: $w(“#amount”).text,
itemName: $w(“#title”).text,
description: $w(“#desc”).text
}
wixWindow.openLightbox(“Payment”, data)
});
});
Lightbox:
import {
createToken,
encodeCard
} from “public/stripeAPI.js”;
import {
charge
} from “backend/stripeProxy”;
import wixWindow from “wix-window”;
import wixData from “wix-data”;
var pmtdata;
$w.onReady(function () {
$w(“#button2”).onClick((event, $w) => {
payNow();
});
pmtdata = wixWindow.lightbox.getContext();
changeState(pmtdata.amount, pmtdata.description);
$w(“#button2”).label = "Pay " + pmtdata.amount + “$”;
});
var payment;
function payNow() {
var accepted = false;
createToken(encodeCard(createCard())).then((token) => {
charge(token, payment).then((chargeResponse) => {
if (chargeResponse.id !== undefined) {
$w(“#info”).show();
$w(“#info”).text = “Payment Successful!”;
accepted = true;
var item = {
“amount”: pmtdata.amount,
“productName”: pmtdata.itemName,
“productDesc”: pmtdata.description,
“stripeChargeId”: chargeResponse.id
}
wixData.insert(“Payments”, item)
}
});
});
setTimeout(function () {
if (!accepted) {
$w(“#info”).show();
$w(“#info”).text = “Payment Declined. Please check your details.”;
}
}, 3200);
}
function createCard() {
return {
“name”: $w(“#cardowner”).value,
“number”: $w(“#cardnumber”).value,
“cvc”: $w(“#cvc”).value,
“exp_year”: $w(“#yyyy”).value,
“exp_month”: $w(“#mm”).value
};
}
function changeState(x, y) {
payment = {
“amount”: (x * 100),
“currency”: “GBP”,
“description”: y
}
}
Public:
import {
fetch
} from “wix-fetch”;
export async function createToken(card) {
const apiKey = “pk_test_vuwqLp8hT9Ygygz5OHVWrPKP”;
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();
console.log(responseText);
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);
}
Backend:
import {
fetch
} from “wix-fetch”;
export async function charge(token, payment) {
const cart = payment;
const apiKey = “sk_test_F08ZLWvnemwJYgDjedMrGmvv”;
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;
}
