Stripe has updated its API because the old ones do not respect a European regulation.
How do I update the code on the site, I have now integrated the old API like this:
PAGE:
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
import {createToken, encodeCard} from "public/stripeAPI.js";
import {charge} from 'backend/stripePrivate';
$w.onReady(function () {
// TODO: write your page related code here...
});
function createCard() {
return {
"name": $w("#iptName").value,
"number": $w("#iptCardNumber").value,
"cvc": $w("#iptCVC").value,
"exp_year": $w("#iptYear").value,
"exp_month": $w("#iptMonth").value
};
}
export function payNow() {
/*var euro = 1;
if ($w('#checkbox1').checked){
euro = euro + 5;
}
*/
console.log($w('#dbMembers').getCurrentItem())
console.log()
let payment = {
"amount": ($w('#checkbox2').value * 100),
"currency": "EUR",
"description": "trial"
}
createToken(encodeCard(createCard()))
.then((token) => {
charge(token, payment, wixUsers.currentUser.id)
.then((response) => {
if(response.chargeId) {
//payment success
$w('#response').text = response.chargeId;
$w('#lblResponse').text = "Pagato!!!";
}
else {
//payment fail
$w('#response').text = response.error;
$w('#lblResponse').text = "Processing error (from Stripe):";
}
$w('#response').show();
});
});
}
export function button1_click(event) {
payNow()
}
PUBLIC:
import {fetch} from 'wix-fetch';
////////////////////////////////////////////////
// A "test key" is used for this example.
// Use a "live key" for a production site.
// Go to stripe.com to get your own key.
// https://stripe.com/docs/keys
const apiKey = "pk_test_"; // (public key)
// The publishable key is just used to identify your account.
// It does not provide permission to perform any function
// except for creating a token, and can therefore be used
// in a public file.
////////////////////////////////////////////////
// This function uses the Stripe API to get a card token.
// A card token is a secure representation of the card
// and can only be used once.
// https://stripe.com/docs/api#create_card_token
export async function createToken(card) {
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;
}
// Builds the fetch body from the array of card details.
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';
////////////////////////////////////////////////
// A "test key" is used for this example.
// Use a "live key" for a production site.
// Go to stripe.com to get your own key.
// https://stripe.com/docs/keys
const apiKey = "sk_test_"; // (secret key)
// The key in use in this file is the private API key.
// The private key is used to perform all actions and
// should be kept confidential and guarded and
// therefore is only to be used in backend files.
////////////////////////////////////////////////
export async function charge(token, payment, userId) {
const cart = payment;
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) {
// transaction successful - get charge ID
const ret = await response.json();
return {"chargeId": ret.id};
}
// transaction failed - return error type
let res = await response.json();
let err = res.error.type;
return {"error": err};
}
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;
}
But the tripe guidelines say to change like this but I don’t know how:
Can anyone show me how to update the code?