Giter Club home page Giter Club logo

renato79 / braintree-drop-in-ui-nodejs Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 2.28 MB

In this repository, I wanted to show you how easy it would be to integrate BrainTree payment platform in your Node.js app or webpage. The documentation is very easy to follow, what you will find in this app is only the payment section and the chance to pay with a sandbox test account (please see pictures below). You can add this example to your app or webpage, follow the documentation to learn how to create your SandBox (test) account.

Home Page: https://braintree-drop-in-ui-nodejs.herokuapp.com/

JavaScript 58.42% CSS 7.40% Handlebars 34.18%
braintree braintree-payment-gateway braintree-dropin braintree-sdk braintree-payment ecommerce-payment-solution payment payment-integration braintree-integration braintree-nodejs

braintree-drop-in-ui-nodejs's Introduction

PayPal BrainTree Payment Node.js Drop-in UI

View the live project here.

Official documentation.

PayPal BrainTree Drop-in UI is a ready-made payment UI that offers the quickest way to integrate and start securely accepting payments with Braintree. In this repository, I wanted to show you how easy it would be to integrate this popular payment platform in your Node.js app or webpage. The documentation is very easy to follow, what you will find in this app is only the payment section and the chance to pay with a sandbox test account (please see pictures below). You can add this example to your app or webpage, follow the documentation to learn how to create your SandBox (test) account.

If you would like an example in Python instead, please check my repository that integrates BrainTree with Python here.

Technologies Used

Features included in this project/webapp:

  • Braintree JavaScript SDK

  • Choose to pay by Credit Card or by PayPal

  • Enter a new test transaction (Process a Sandbox payment)

  • Success confirmation page

Languages Used

Frameworks and Libraries

You will need to use your own Merchant ID, Public Key, Private Key to interact with your Sandbox BrainTree account. Go to Sandbox, click on Settings at the top right (the gear icon), click on API, your account's details are right there. Replace these details in routes/checkout.js

How to complete a test transaction in this webapp

  • Testing Credit Cards - Documentation: You can choose any credit card listed on the Testing webpage. Be aware that each test amount listed on the webpage will trigger the associated authorization response. Just choose a successful transaction by credit card to test the app.
  • PayPal Payment - Documentation: Follow the link on the left. If you choose to pay through PayPal, since you are testing, you would need to use personal test account name created with your developer account, that would be something like: [email protected].

How to Fork and Clone

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

  1. Log in to GitHub and locate the GitHub Repository
  2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
  3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

  1. Log in to GitHub and locate the GitHub Repository
  2. Under the repository name, click "Clone or download".
  3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
  4. Open Git Bash
  5. Change the current working directory to the location where you want the cloned directory to be made.
  6. Type git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/Renato79/braintree-drop-in-ui-nodejs
  1. Press Enter. Your local clone will be created.
$ git clone https://github.com/Renato79/braintree-drop-in-ui-nodejs
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.