MoneyCollector
Simple website to accept payments through Stripe. You've gotta get a Stripe account., (*1)
You can see it action at http://pay.longren.org/. If you find this useful, feel free to drop me a few dollars for coffee and beer. :), (*2)
This was inspired by begriffs/lucre, like this but in Ruby., (*3)
If you find any issues or problems please report them using the Issues tracker here at Github., (*4)
Ribbon CSS from Josh Bader and form CSS from Joey., (*5)
Setup
-
Open index.php and pay.php., (*6)
-
In index.php, change the $yourName variable at line 2 to whatever you want it to be., (*7)
-
In Index.php, edit javascript variables publicTestKey and publicLiveKey. You can find those keys in your Stripe settings. These keys are publishable., (*8)
-
In pay.php, set your private live key and your private test key (on line 12 and 13)., (*9)
-
Upload all files to a PHP enabled webserver., (*10)
-
If you uploaded to a folder called pay-me at domain.com, your payment form will be at http://domain.com/pay-me/., (*11)
7a. To go live, open pay.php and replace $privateTestKey with $privateLiveKey inside the Stripe::setApiKey method., (*12)
7b. Open index.php and replace publicTestKey with publicLiveKey inside the Stripe.setPublishableKey javascript function., (*13)
- For SSL, get a free SSL self-signed certificate from tinycert.org and use cloudflare (pro account needed) or Cloudbric.
Customization
If you don't like the background image, it's really easy to change. There's some additional backgrounds in the assets folder, all are png files except the default. To change the background image, find the background you want in the assets folder, and copy the filename. Open style.css and replace default_background.jpg on line 15 with the filename you copied from the assets folder. So, if you're switching to black_lozenge.png, you'd replace default_background.jpg with black_lozenge.png. You'll also want to remove the background-size property, and remove the no-repeat center center fixed piece from line 15, otherwise your new background won't tile like it should., (*14)
So, basically, change this:, (*15)
body {
background:url("/assets/default_background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
to this:, (*16)
body {
background:url("/assets/black_lozenge.png");
}