Snippet for question number 4

backend.py

...

def create_and_charge_customer():
    token = request.form['token']
    email = request.form['email']
    amount_in_cents = int(10000)

    try:
        charge = stripe.Charge.create(
            amount=amount_in_cents,
            description='example charge',
            currency='aud',
            source=token
        )
...

frontend.html

<form id="checkout-form" action="/create_and_charge_customer" method="post">
  <div class="group">
    <label><span>Name</span>
      <input class="field" name="cardholder-name" placeholder="Jane Doe"/>
    </label>
    <label><span>Email</span>
      <input class="field" name="email" placeholder="test@mailinator.com"/>
    </label>
  </div>
  <div class="group">
    <label><span>Card</span>
      <div class="field" id="card-element"></div>
    </label>
  </div>
  <button type="submit"> <span>Pay $</span><span class="amount">10000</span></button>
</form>

frontend.js

// This snippet is partially derived from https://stripe.com/docs/elements/examples
// It uses Stripe's Elements library - a set of pre-built UI components to deal with
// styling, error handling etc. Most important, it ensures that users cannot attempt
// to make charges with invalid input. 
var stripe = Stripe('MY_TEST_TOKEN');
var elements = stripe.elements();
var $form = $('#checkout-form');
var token;

// Create card HTML DOM element using Elements create() method
var card = elements.create('card', {
    style: {
        base: {
            iconColor: '#666EE8',
            color: '#31325F',
            lineHeight: '40px',
            fontWeight: 300,
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSize: '15px',

            '::placeholder': {
                color: '#CFD7E0',
            },
        },
    }
});

// Display card element on page using Elements mount() method
card.mount('#card-element');

// Callback to be invoked when user submits payment form
// AND when user makes a typing error.
function setOutcome(result) {
    if (result.token) {
        // Use the token to create a charge or a customer
        // https://stripe.com/docs/charges
        return token = result.token.id;

    } else if (result.error) {
        console.log(result.error.message);
    }
}

// Function that listens to live user input and returns errors via setOutcome
// if user makes error (e.g. if user enters an invalid ZIP code).
card.on('change', function(event) {
    setOutcome(event);
});

// Callback that performs AJAX request once a Stripe token has been generated
function makeChargeRequest() {

    // Use jQuery's shorthand AJAX method for POST - https://api.jquery.com/jquery.post/
    // and pass the token generated by Stripe to your server.
    $.post("/create_and_charge_customer", { stripeToken: token }, function(data) {
        alert("Payment success! Stripe created this token: " + token + " and performed a charge on your server");
    });
}

$form.submit(function(e) {

    e.preventDefault();
    var $form = $(this);

    // Get extra customer details from your payment form. jQuery's .val() method
    // returns the text entered by a user in the target input field on frontend.html
    var cardholderName = $form.children("input[name='cardholder-name']").val();
    var cardholderEmail = $form.children("input[name='email']").val();

    var extraDetails = {
        name: cardholderName,
        email: cardholderEmail
    };

    // The most important part!!! On this line, we chain then() methods. Similar to
    // Python, each time we invoke then(), a new Promise is returned and a callback
    // function is executed.
    stripe.createToken(card, extraDetails).then(setOutcome).then(makeChargeRequest);

});