backend.py

"""
Routes and views for the flask app.
"""

from datetime import datetime
from flask import render_template, jsonify
from FlaskWebProject1 import app
from flask import request
import stripe


stripe_keys = {
    "secret_key": os.environ["STRIPE_SECRET_KEY"],
    "publishable_key": os.environ["STRIPE_PUBLISHABLE_KEY"]
}


@app.route("/config")
def get_publishable_key():
    stripe_config = {"pubKey": stripe_keys["publishable_key"]}
    return jsonify(stripe_config)

def render_response(kind, message):
    return '["{0}","{1}"]'.format(kind, message)

@app.route('/')
def index():
    return render_template('frontend.html', **{'pk': stripe_keys["publishable_key"]})


@app.route('/create_and_charge_customer', methods=['POST'])
def create_and_charge_customer():
    token = request.form['token']
    email = request.form['email']
    amount_in_dollars = float(request.form['amount'])
    amount_in_cents = int(amount_in_dollars * 100)

    try:
        stripe.api_key = stripe_keys["secret_key"]
        
        customer = stripe.Customer.create(email=email, source=token)
        customer_id = customer['id']
        charge = stripe.Charge.create(amount=amount_in_cents,
            customer=customer_id,
            currency='aud')
    except stripe.error.StripeError as e:
        #body = e.json_body
        return render_response("error", e)
    except Exception as e:
        return render_response("error", "backend error")

    return render_response("success", "You made a successful payment!")

frontend.js

jQuery(function ($) {
        $.get("/config", function (data) {
            Stripe.setPublishableKey(data.pubKey);
        });

        $('#checkout-form').submit(function (e) {
            var $form = $(this);
            try {
                Stripe.card.createToken($form, stripeResponseHandler);
            } catch (err) {
                console.log(err);
            }
            e.preventDefault();
        });
    });

    function stripeResponseHandler(status, response) {
        var $form = $('#checkout-form');
        if (response.error) {

            // ADDED THESE CONSOLE LOGS TO HELP WITH DEBUGGING!
            var error = response.error.message;
            var code = response.error.code;

            var disp_error = "Error: =>" + error + "<br/> Error Code =>" + code;
            console.log(disp_error);
            $form.find('.payment-errors').text(disp_error);
        } else {
            var token = response.id;
            $.ajax({
                method: "POST",
                url: "/create_and_charge_customer",
                dataType: "json",
                data: { token: token, email: "test@mailinator.com", amount: 100 }
            })
                .done(function (data) {
                    $form.find('.payment-errors').text(data[1]);
                });
        }
    };