Aurelia Stripe checkout

checkout.js

import stripeCheckout from 'stripe-checkout';
export class StripeCheckout {
    private stripeHandler = stripeCheckout.configure({ key: '...', name: '...', zipCode: true });
    popup(email, productDescription, priceInCents, confirmButtonText) {
        return new Promise((resolve, reject) => {
            this.stripeHandler.open({
                description: productDescription,
                amount: priceInCents,
                panelLabel: confirmButtonText,
                token: token => resolve(token),
                closed: () => reject(new Error('Checkout dialog closed.'))
            });
        });
    }
}

config.js

System.config({
    "meta": {
        "https://proxy.zoltu.io/stripe/checkout.js": {
            "format": "global"
        }
    },
    "map": {
        "stripe-checkout": "https://proxy.zoltu.io/stripe/checkout.js"
    }
});

explanation.md

That is more or less the class I created to wrap stripe checkout in a promise. I then dependency inject that into any view-model that I need it and when the user clicks a button (or whatever) I call this.stripeCheckout.popup(...) and take action on the promise.

I did need to add the configuration to my SystemJS config.js:

I had to create a proxy to host checkout.js because Stripe doesn't put the CORS headers on checkout.js. That was the most annoying part. I just spun up a simple ASP.NET WebAPI server in Azure that proxies checkout.js with a CORS header.