Twitter LogoFacebook Logo
Credit Card Transaction with Paypal API
Learn how to implement a credit card transaction system in less than 15 minutes.
By: King Wai Mark

In this tutorial, we will be going through how to add a Credit Card Transaction feature to your web application using Paypal and the Paypal buttons API in Typescript. In order for this to work, you will need to sign up an business account on Paypal.

Once you have you account created, you have to go to the Paypal developer website and login to access your sandbox accounts.

You can go to the developer site here:

1. Put this script tag into your index.html page.


2. Go to your sandbox page, locate the MY Apps & Credentials section, switch to sandbox mode and click on the Default Application that was created.

Image from

3. You should then be redirected to another page that will display the client id. Copy it.

Image from

4. Go back to the script tags that you added to the index.html page and add the client id to the src where you see the equal sign (=).


5. Next, install the CreditCardPayments library from NPM.

npm i creditcardpayments

The CreditCardPayments library let us render the Paypal buttons to our page with some simple code.

6. Create an div element and give it an id. This div element will act as out container so that we can create our buttons.

<div id="payments"></div>

7. In your Typescript code, import the render function from the CreditCardPayments library.

import render } from 'creditcardpayments/creditCardPayments';

8. Call the render function. You should call this function when all the elements is initialize. In Angular, it would be the ngAfterContentInit() function.

The render function takes in an JSON object. In the example, the minimal properties that needs to be present is the id, currency, and value

id - the id pointing to an HTML element. Need to include the # (hash symbol) to represent id.

currency - the currency to use. By default, it uses the United States Dollar.

value - the value of the purchase.

onApprove - an optional parameter and function that gets executed when the transaction is completed and successful.

And that is it. You are done and ready to go. Now that is left is to test it. Before that, this is what you should see on your screen.

Image from


We can test the transaction with Paypol.

1. Log in to your account on the Paypal developer website to get access to sanbox accounts.

2. Select the Accounts tab on the navigation.

Image from

3. Scroll down until you find Sandbox Accounts and you should see 2 default accounts that were made with the email prefixed with "sb-"

4. View the PERSONAL account information by clicking on the 3 dots (...),

Image from

5. Click on the Funding tab at the top and look for the section for Credit Card. In that section, you would see an test credit card that you can use to test our transactions. Write down those information.

Image from

Once we have a usable credit card, we can test it.

6. Click on the Debit or Credit Card button and fill in the information that it ask for.

Image from

After we enter the correct information, the payment should go through. To check this, we have to log in to our BUSINESS sandbox account at the Paypal sandbox website. We can locate the BUSINESS account the same way we got our PERSONAL account.

7. Click on View/Edit Account option from the drop down menu of the BUSINESS account.

Image from

8. Write down the Email ID and the System Generated Password.

9. Go to the Paypal sandbox website and log in with those credentials. 

You should now see your Paypal balance. Initially, Paypal gives you $5.000 fake dollars and if you have been following this tutorial, we should be getting an additional $97-$98 dollars because in our code, we made an $100.00 purchase. We are getting a little less than $100.00 dollars because Paypal takes fees per transaction. 

Image from

To keep ourselves on track, so far we went through:

1. How to put the transaction buttons on our site.
2. How to get our sandbox account information.
3. How to get the test Credit Card information
4. How to log in to our Sandbox accounts to view our balance.

The next step is to go live with our transaction. Right now all payments are going to the Sandbox account but in reality, we want it to go to our real account.  In the next section, we will go through how to go live.

Sign In