Design Mockup – GeissDice from 99designs

Another mockup from 99designs. This layout consist of a few intricate design elements, with the logos changing on mouseover.

This was done after a long time of rest. After I entered, my development process have not progressed far. This particular mockup took abit longer to complete, around 3 to 4 hours for this piece of work, but it turned out to look very good indeed.

Original design:
GeissDice from 99designs

Advertisements

Design Mockup – Etched from 99 designs

Other design from 99designs. This is particularly modern, using a simple color scheme of only a few colors, relying on the subtle changes on the grayscale to distinguish the different sections of the design.

There are many subtle designs in this one, but there are some elements that are fairly hard to extract (the background for the display). There is not much differences in there overall, check out the the completed mockup here.

Original design::
Etched by WebBox

Web.py Application – Paypal Transaction

Visit the Github repository for the full code example

Introduction

Paypal is one of the most prominent online transaction platform. And there is a lot that you can do with paypal. This tutorial will bring you through using the paypal rest API with web.py to create an application that is capable of handling paypal transaction.

In this tutorial, we will be using the paypalrestsdk to access the API which we will be using to create and execute our transactions.

Before starting

Before we start, a little about how the PayPal SDK works. You will first have to create a payment with a unique payment id. The payment will have two main stages, the authorization stage and the execution stage.

In the authorization stage, the user will review the details of the transaction and if they are happy with all the details, they will authorize it, which brings us to the next stage, execution.

In the execution stage, the transaction of the specified payment id will be carried out and only then will the transaction amount be actually transferred between the accounts.

We will be doing all the testing in the sandbox PayPal (don’t need real money), which you will need a Paypal Developer account to access.

Setting up your account

Head to Paypal Developer and create a new REST app, check that you have the client id and the client secret. Then head over to Sandbox Accounts and make sure you have 2 accounts, one for the buyer, one for the seller.

Also, make sure you have the python package installed. To get it up and running, simply run pip install paypalrestsdk

Initialization stage

The good thing about using the python package is that they handle almost everything for you. To initialize your paypal application, you have to give it your client id and client secret. As for the urls, they point to the locations where your application actually handles the execution of the transaction (more on that later).

import paypalrestsdk

PP_CLIENT_ID = '<client id>'
PP_CLIENT_SECRET = '<client secret>'

PP_URL_RETURN = 'http://localhost:8080/pay'
PP_URL_CANCEL = 'http://localhost:8080/'

paypalrestsdk.configure({
    "mode": "sandbox",
    "client_id": PP_CLIENT_ID,
    "client_secret": PP_CLIENT_SECRET
})

For the web application, here is the basic structure of the application. In /create, the application will create the transaction where details such as the transaction amount and details will be used for the payment, and /pay will then be used for the execution of the transaction, which actually transfer the money to your seller account.

import web

urls = [
    '/create', 'PaymentCreate',
    '/pay', 'PaymentExecute'
]
app = web.application(urls, globals())

Creating the payment transaction

First, we will create a function createPayment that handles the API part of the code. The function will create a Payment object with the basic details, including the amount to be transferred and the description of the payment, etc…

For now, the transaction method is set to paypal account, which means that the user must have a paypal account in order to complete the transaction. You can add in the option to complete the transaction via credit cards, but you will have to add in a bit more details (information available at REST API documentation).

def createPayment(amt, description='', currency='SGD'):
    payment = paypalrestsdk.Payment({
        'intent': 'sale',
        'payer': {
            'payment_method': 'paypal'
        },
        'transactions': [{
            'amount': {
                'total': '%.2f'%float(amt),
                'currency': currency
            },
            'description': description
        }],
        'redirect_urls':{
            'return_url':PP_URL_RETURN,
            'cancel_url':PP_URL_CANCEL
        }
    })

    if payment.create():
        href = [str(l.href) for l in payment.links if l.method == 'REDIRECT'][0]
        return str(href)
    else:
        return payment.error

For the web application, this web.py class will take in the values for amt and des, then calling the createPayment function and redirecting the users to the authorization page (which is on the paypal site).

class PaymentCreate:
    def GET(self):
        i = web.input()

        if not i.get('amt') or not i.get('des'):
            return web.badrequest()
        amt = i.amt
        des = i.des

        res = createPayment(amt, des)
        if type(res) == str:
            return web.seeother(res)
        else:
            return web.notfound()

Executing the payment transaction

Assuming that the users have authorized the transaction all you have to do next is to execute the transaction and BAMM, you will have your money.

So for the executePayment function, the payment_id and the payer_id (id of the user) will be required for the execution to take place.

def executePayment(pid, uid):
    payment = paypalrestsdk.Payment.find(pid)

    if payment.execute({"payer_id": uid}):
        return str(payment.id)
    else:
        return payment.error

Some of you may have notice the variable, PP_URL_RETURN in the initialization stage. This link points to the server’s payment execution handler (the web.py class that handles the execution), which in this case, is /pay

In this web.py class, the payment is executed using the executePayment function using the values paymentId and PayerID (all part of PayPal’s SDK redirect request).

class PaymentExecute:
    def GET(self):
        i = web.input()
        if not i.get('paymentId') or not i.get('PayerID'):
            return web.badrequest()
        id_payment = i.get('paymentId')
        id_payer = i.get('PayerID')

        res = executePayment(id_payment, id_payer)
        if type(res) is str:
            return { 'success': True }
        else:
            return { 'error': res }

How to tell that it worked

Head to SandBox PayPal, and login with your buyer account(-buyer@.com). Under the recent activity section, view the details of the transaction to ensure that the correct amount is transferred, and that the corresponding description you have entered is returned.

Things to note:

  • There are alot more details you can add to your application, visit the Paypal REST API to review all the possible details that can be included.
  • Official documentation for the python package
  • When using it for real, switch the mode in the initialization stage to live

Visit the Github repository for the full code examples.

Feel free to email me if you have any questions.

Web.py Application – FB Authentication

EDIT: There are some updates to the FB documentation, it doesn’t affect the login process a lot, but I decided to rehash this tutorial anyway. Updated tutorial

Access to Github Repository

Introduction

Facebook authentication is one of the easiest way of authenticating your user without them having to create a full-fledged user profile system. Here is a quick tutorial of how to integrate facebook login with your web.py application.

Here is the basic setup of the application:

import web
import json
import time
import urllib
import urlparse

FB_APP_SECRET = ''
FB_APP_ID = ''

urls = [
'/', 'Index',
'/li', 'Login',
'/lo', 'Logout'
]
app = web.application(urls, globals())

def getURL():
return web.ctx.home + web.ctx.fullpath

Logging In

The login stage of the application requires two main stages: the authentication stage and the retrieval of the access token.

In the authentication stage, the user is redirected to http://www.facebook.com/dialog/oauth where they will accept all the permissions that the application will require. What is returned will be the code which will be used to retrieve the access token for that particular session.

In the second stage, the user is redirected to https://graph.facebook.com/oauth/access_token for the access token. The result is read using the parse_qs function from urlparse, where the access token is extracted.

The last stage of the login will be extracting the user information for storage in the cookies. Using the access token, the user’s profile information is retrieved from https://graph.facebook.com/me, where the user id and the user name is stored for display.

class Login:
def GET(self):
i = web.input(code = None)
args = dict(client_id=FB_APP_ID, redirect_uri=getURL())

### Authentication stage
if not i.code:
web.seeother('http://www.facebook.com/dialog/oauth?' + urllib.urlencode(args))
return

### Access token stage
args['code'] = i.code
args['client_secret'] = FB_APP_SECRET
req = 'https://graph.facebook.com/oauth/access_token?' + urllib.urlencode(args)
res = urlparse.parse_qs(urllib.urlopen(req).read())
tkn = res['access_token'][-1]

### Retrieving profile information
req = 'https://graph.facebook.com/me?' + urllib.urlencode(dict(access_token=tkn))
res = json.load(urllib.urlopen(req))

t = time.time() + 7*86400
web.setcookie('fb_uid', res['id'], t)
web.setcookie('fb_uname', res['name'], t)

web.seeother('/')

Logging Out

Since we are using cookies to store the session details, logging out will just require us to reset the cookies.

class Logout:
def GET(self):
web.setcookie('fb_uid', '', time.time() - 86400)
web.setcookie('fb_uname', '', time.time() - 86400)
web.seeother('/')

Displaying the information

After the user have logged in, some of the user information will be stored in the cookies. We will make use of this by displaying the user’s name and profile picture if he is logged in. We do so by checking the state of the cookie variables fb_uid and fb_uname, if they exist, they will be printed out, else, a login link will be displayed instead.

class Index:
def GET(self):
html = "<a href="/li">FB Login</a>"

uid = web.cookies().get('fb_uid')
uname = web.cookies().get('fb_uname')

if uid and uname:
html = "<img src="https://graph.facebook.com/"+uid+"/picture" alt="" />
<h4>"+uname+"</h4>
<a href="/lo">Logout</a>"

return '''
<h1>Hi!!!</h1>
'''+html+'''


'''

Conclusion

There you have it, your own web.py application with facebook authentication.

Things to note

  • To integrate a more general form of OAuth system, take a look at the python-oauth2 package
  • Never reveal your app secret and id, you never know who is looking
  • Original inspiration

Access to Github Repository