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.

https://www.paypal.com/us/webapps/mpp/account-selection

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

https://developer.paypal.com/developer/applications/

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.

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

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.

Testing

We can test the transaction with Paypol.

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

https://developer.paypal.com/developer/applications/

2. Select the Accounts tab on the navigation.

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 (...),

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.

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.

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.

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

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

https://www.sandbox.paypal.com/us/home

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. 

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