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

1/2

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.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP