Skip to main content

Comparing the UX of three payment processors and theirs NodeJS SDK (Paypal vs Braintree vs Stripe)


This Blogpost compares the payment experience from three popular payment processors: PayPal, Braintree, and Stripe. This comparison is from the developer’s point of view. This is NOT to compare the prices and services. We will only concern the payment experience and coding effort. We will do:
  1. Backend codes in NodeJS-Express.
  2. Frontend codes in Pug, jQuery, Bootstrap 4.
  3. Whole payment process flow and its appearance.
  4. Compare the three SDKs and evaluate security.
Please note that all payment processes are in Sandbox (development) platform.

The source codes are host in this Github repo

Project setup

First of all, you’ll need NodeJS. The version is:
node -v && npm -v
v6.10.3
5.4.2
Enter your payment access keys (PayPal, Braintree & Stripe) into the .env file. The content is:
PAYPAL_MODE='[sandbox|production]'
PAYPAL_CLIENT_ID='[Your PayPal Client Id]'
PAYPAL_CLIENT_SECRET='[Your PayPal Client Secret]'
BT_ENVIRONMENT='[Sandbox|Production]'
BT_MERCHANT_ID='[Your Braintree Merchant ID]'
BT_PUBLIC_KEY='[Your Braintree public key]'
BT_PRIVATE_KEY='[Your Braintree private key]'
STRIPE_PUBLISH_KEY='[Your Stripe pubishable key]'
STRIPE_SECRET_KEY='[Your Stripe secret key]'
Download the source codes Zip file from Github repo in your PC. Unzip it then install the project:
$ npm install
Start the server:
$ npm start
Browse the project home page http://localhost:3000. You’ll see the home page:
Let’s get started on the payment experience…

1. PayPal Payment Experience

Paypal is the longest history in the online money transfer platform. It was founded in 1999 and firstly released Paypal NodeJS SDK in 2013.

Below are the screenshots of the PayPal payment experience:

Whole Payment Processes

Screen 1: Input amount webpage. This webpage serves from our server.
Screen 2: Login as PayPal user. This webpage has been redirected to PayPal.
Screen 3: Review the transaction. This webpage is still handling in PayPal.

Screen 4: Payment success. The webpage redirects back to our server.

Frontend Codes View

In source code file /views/paypal/home.pug (in Pug syntax). The content is:
form(action="/paypal/submit" method="POST")
    .form-group
        label(for="amount") Amount to pay in USD (1 - 9, default 1)
        input(id="amount" class="form-control col-4" type="number" name="amount" value="1" min="1" max="9")
    .form-group
        label(for="description") Payment description
        input#description.form-control(type="text" name="description" maxlength="100" placeholder="Optional")
    button(class="btn btn-primary btn-lg" type="submit") Pay with PayPal

Backend Codes View

In file /routes/paypal.js:

Returned data from payment gateway

Below is the PayPal result JSON (grab from console outputs):
{ id: 'PAY-3XL45412FD778433ELHKIGDA',
  intent: 'sale',
  state: 'created',
  payer: { payment_method: 'paypal' },
  transactions: 
   [ { amount: [Object],
       description: 'This is the payment description',
       item_list: [Object],
       related_resources: [] } ],
  create_time: '2017-10-04T06:43:24Z',
  links: 
   [ { href: 'https://api.sandbox.paypal.com/v1/payments/payment/PAY-3XL45412FD778433ELHKIGDA',
       rel: 'self',
       method: 'GET' },
     { href: 'https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=EC-4FB14017EE4066414',
       rel: 'approval_url',
       method: 'REDIRECT' },
     { href: 'https://api.sandbox.paypal.com/v1/payments/payment/PAY-3XL45412FD778433ELHKIGDA/execute',
       rel: 'execute',
       method: 'POST' } ],
  httpStatusCode: 201 }

Payment experience and coding summary:

  • Total 4 webpages interacted.
  • Total 59 lines of source codes (frontend + backend).
  • The results are encoded. No sensitive data can be seen (i.e. card #, password…).
  • PayPal webpages cannot be customized to our style (color, font-size, image…)
  • Must be paid by a PayPal member (although it accepts credit card. But it will force to create a PayPal member).
  • My comment: Slow, more codes, just a few customizable items.
  • Score: 2/5

2. Braintree Payment Experience

Braintree was founded in 2007 and has been acquired by PayPal in 2013. Braintree is a one-stop shop for business needs to receive payment.

Below are the screenshots of Braintree payment experience.

Whole Payment Processes

Screen 1a: Input amount webpage. This webpage serves from our server.

*Screen 1b: Input credit card. This is the same webpage as above.

*Screen 2: Payment success. The webpage redirects to our payment success webpage. No need to go to Braintree server.

Frontend Codes View

In source code file /views/braintree/home.pug (in Pug syntax):

Backend Codes View

In file /routes/braintree.js:

Returned data from payment gateway

Below is the Braintree result JSON (grab from console outputs):
{ transaction: 
   Transaction {
     id: '05r7vqbw',
     status: 'submitted_for_settlement',
     type: 'sale',
     currencyIsoCode: 'USD',
     amount: '1.00',
     merchantAccountId: 'advancedlogicsystemlab',
     subMerchantAccountId: null,
     masterMerchantAccountId: null,
     orderId: null,
     createdAt: '2017-10-04T07:40:53Z',
     updatedAt: '2017-10-04T07:40:53Z',
     customer: ...
     billing: ...
     ...
     creditCard: 
      CreditCard {
        token: null,
        bin: '411111',
        last4: '1111',
        cardType: 'Visa',
        expirationMonth: '01',
        expirationYear: '2029',
        customerLocation: 'US',
        cardholderName: null,
        imageUrl: 'https://assets.braintreegateway.com/payment_method_logo/visa.png?environment=sandbox',
        prepaid: 'Unknown',
        healthcare: 'Unknown',
        debit: 'Unknown',
        durbinRegulated: 'Unknown',
        commercial: 'Unknown',
        payroll: 'Unknown',
        issuingBank: 'Unknown',
        countryOfIssuance: 'Unknown',
        productId: 'Unknown',
        uniqueNumberIdentifier: null,
        venmoSdk: false,
        maskedNumber: '411111******1111',
        expirationDate: '01/2029' },
     statusHistory: [ [Object], [Object] ],
     planId: null,
     subscriptionId: null,
     subscription: { billingPeriodEndDate: null, billingPeriodStartDate: null },
...
  success: true }

Payment Experience and Coding Summary

  1. Total 2 webpages interacted.
  2. Total 119 lines of source codes (frontend + backend).
  3. The credit card number is masked. No sensitive data (e.g. expiry date, CVC…)
  4. Communicates with Braintree at server-side.
  5. No redirect to Braintree server. The whole webpages can be customized (except credit card input element)
  6. Can be paid by credit card directly (or PayPal member).
  7. My comment: Faster, smooth, highly customizable frontend but much more frontend codes.
  8. Score: 4/5

3. Stripe Payment Experience

Stripe was founded in 2010. Stripe not only supports credit card payment but also bitcoin and Alipay. Stripe was ranked no. 4 on Forbes magazine Cloud 100 in 2016.

Below are the screenshots of Stripe payment experience.

Whole Payment Processes

Unlike other processors, Stripe offers three different integration levels. Different level has different payment experience.

Screen 1a: Minimal Checkout (Simple checkout)

Screen 1b: Custom Checkout

Screen 1c: Inline element

*Screen 2: Payment success. All webpages do not redirect to Stripe

Frontend Codes View

Different integration level has different code lines. Source codes of 1a (minimal checkout) cover in file /views/stripe/home.pug (in Pug syntax):
form(action="/stripe/charge" method="POST")
    //- Stripe ref: https://stripe.com/docs/checkout
    p <i>Below button is generated by Stripe</i>
    script(src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=accessKey data-email="go@simonho.net" data-image="https://www.simonho.net/MyImg150x150.jpg" data-name="simonho288" data-description="Test Payment 1" data-amount=amount data-label="Pay with Card Now" data-locale="en-US")

Source codes for 1b (custom checkout) cover in file /views/stripe/home.pug:

Source codes for 1c (inline element) cover in file /views/stripe/home.pug:

Backend Codes View

In file /routes/stripe.js:

Returned data from the payment gateway

Below is the Stripe result JSON (grab from console outputs):
charge { id: 'ch_1B99OXAgSkpNTk4VheTM41y2',
  object: 'charge',
  amount: 100,
  amount_refunded: 0,
  application: null,
  application_fee: null,
  balance_transaction: 'txn_1B99OYAgSkpNTk4VOaMF6dWa',
  captured: true,
  created: 1507110145,
  currency: 'usd',
  customer: null,
  description: 'Stripe experiment testing charge',
...
  source: 
   { id: 'card_1B99OWAgSkpNTk4V73FxHfrd',
     object: 'card',
     brand: 'Visa',
     country: 'US',
     customer: null,
     cvc_check: 'pass',
     dynamic_last4: null,
     exp_month: 1,
     exp_year: 2029,
     fingerprint: 'J9zORsE3yTZpw06p',
     funding: 'credit',
     last4: '4242',
     metadata: {},
     name: null,
     tokenization_method: null },
...
  transfer_group: null }

Payment Experience and Coding Summary

  • Total 2 webpages interacted.
  • Line of codes: Three level are: 1a = 22 lines, 1b = 43 lines, 1c = 93 lines respectively.
  • In returned data, the credit card number has only the last 4 digits. The expiry date does contain in the result but CVC does not.
  • Communicates with Stripe at the client-side & server-side.
  • No redirect to Stripe server. The webpages can be customized for all 3 integration levels. More flexible than others.
  • Can be paid by credit card directly. No registered member requires.
  • My comments: Faster, smooth, choice of integration level has different experience, highly customizable frontend, fewer codes.
  • Score: 5/5

Conclusion

As a developer, I will choose Stripe for my next project. The most attractive is the choice of integration. Inline element integration can fully be embedded into the card input form. From the consumer point of view, the card entries seem to be same as my webpage. It allows me to do 100% UX design.

Source codes of the project hosting in this Github repo


Labels:
Location: Vancouver, BC, Canada

Comments

Post a Comment

Popular posts from this blog

Create An Online Store Theme Used By MyCMS

MyCMS is an open-source Content Management System to generate static online shop website. You can use my hosting to input your products, or you can download the source codes and host it in your own server (running NodeJS). Please refer to my Github repo for the detailed installation instructions. This blog is a step-by-step tutorial that shows you how to create an online-shop theme. In this tutorial, it’s using my hosting to input the shop details and products. If you’re hosting the MyCMS by yourself, just change the domain name to yours will do. Introducing MyCMS Before making the theme, you’ll need to use MyCMS to configure the demo shop and input two demo products. MyCMS generates a static website via a theme. The generated static website is NO server program required. You can put the website files (HTML/CSS/JS) to any CDN, hosting. Shop Configuration You must prepare below settings Before using MyCMS: Setting Description Example Store name Your store name will be displayed in t...
1 comment
Read more

How I make a web-components based dynamic Javascript page at the top of Google Search

Introduction Everybody wants their website shown at the first position of Google search. SEO (Search Engine Optimization) is a big topic. I just helped my client's website shows the database records at the top search rankings (at least several Chinese generic keywords). See the three example questions all are listed at top ranking: Website background: My client's website  popa.qa  is a traditional Chinese Q&A site that lets members ask and answer questions. All answers and questions are storing in the database server. Step 1: Create The Project This blog illustrates the problems and the steps to fix that with project source codes. Below is the description of the basic project: NodeJS backend (server.js) Develop an API ( /get-database-records ) to simulate getting database records Web-components frontend (index.html) An example component IndexPage  make use of  LitElement to render database records To start the server type: npm start Then I check the webpag...
1 comment
Read more

Build A Simple Sales System using Google Drive

Google Drive is a free-to-use cloud service with a 15 GB limit storage. 15 GB is large enough to store documents, and "program" too. Yes, it's correct. We can program Google Drive. This blog is a step-by-step tutorial to show you how to build a simple P.O.S. system on Google Drive. Create a Google Sheets to define the products 1. Login to Google Drive using your Gmail account and create a Google Sheets: 2. Input the products in the Google Sheets Create a Google Forms for sale input 1. Create a new Google Form 2. Edit the form and the first field Note that leave the option field unchanged. We'll assign it programmatically in below 3. Add a quantity field 4.  Add a last field for the price input How to copy data from Google Sheets to Google Forms? We need to add a script to do that. Google developed Google App Script (GAS) for us to achieve that. Now go back to the Google Sheet we just created above. Then enter to the script editor You'll see the below screen. Then ...
Post a Comment
Read more