Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX STRIPE INTEGRATION - ONLINE PAYMENTS
Starting an eCommerce website? This tutorial will show you how to integrate Stripe Payment APIs into your Wix website using Wix Code. Customers will be able to purchase directly from your online store. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
Design your booking page, include product information (e.g. name, description, price) and a call-to-action button (e.g. Book Now). Your booking page can a dynamic page, repeater or a static webpage.
Create a lightbox for customers to entering their payment information (i.e. credit card details). Add input fields for cardholder's name, card number, CVC code and card expiry date. Next, add a "Pay Now" button. Finally, add text for success and decline messages.
Design your booking page, include product information (e.g. name, description, price) and a call-to-action button (e.g. Book Now). Your booking page can a dynamic page, repeater or a static webpage.
THE ELEMENTS
The Page
Text Elements
-
Product Name ID: #product
-
Description ID: #description
-
Amount ID: #amount
Button Elements
-
Book Now Button: #BookNow
Stripe API Keys
Go to www.stripe.com and retrieve two API keys.
-
Publishable Key
-
Secret Key
The Lightbox
Light Box: Payment
User Inputs
-
Cardholder Name Field: #cardname
-
Card Number Field: #cardnum
-
Expiry Month Field: #month
-
Expiry Year Field: #year
-
Card CVC Field: #cvc
Text Elements
-
Error Message: #errortext
Button Elements
-
Payment Button: #SubmitButton
The Database
Create a database Payments (database1). No fields required.
THE CODE
Page Code
import wixWindow from "wix-window";
$w.onReady(function () {
$w("#BookNow").onClick((event, $w) => {
var amm = $w("#amount").text
var data = {
amount: $w("#amount").text,
itemName: $w("#product").text,
description: $w("#description").text
}
wixWindow.openLightbox("Payment", data)
});
});
Lightbox Code
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("#SubmitButton").onClick((event, $w) => {
payNow();
});
pmtdata = wixWindow.lightbox.getContext();
changeState(pmtdata.amount, pmtdata.description);
$w("#SubmitButton").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("#errortext").show();
$w("#errortext").text = "Sucessful Payment";
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("#errortext").show();
$w("#errortext").text = "Payment Declined";
}
}, 3200);
}
function createCard() {
return {
"name": $w("#cardname").value,
"number": $w("#cardnum").value,
"cvc": $w("#cvc").value,
"exp_year": $w("#year").value,
"exp_month": $w("#month").value
};
}
function changeState(x, y) {
payment = {
"amount": (x * 100),
"currency": "USD",
"description": y
}
}
Public Code
// stripeAPI.js //
import { fetch } from "wix-fetch";
export async function createToken(card) {
const apiKey = "Publishable 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();
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);
}
Back-End Code
// stripeProxy.jsw //
import { fetch } from "wix-fetch";
export async function charge(token, payment) {
const cart = payment;
const apiKey = "Secret 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;
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.