Website development

We are Makklays. We help to realize the idea.

Connect paypal to the site


Makklays - Articles image

eye 269

Recently, more and more sites are developing in this direction, you need to sell something and make money on it for existence. Let's see how this can be implemented. Let's say we already have a page with products (product list, description and prices).

Someone might ask, what is Paypal?


Paypal is an international platform for accepting payments from all over the world (over 2 million accounts) in different currencies of the world. Like any international platform, paypal has its own API for developers who want to use paypal on their website (accept, send payments, sell products, organize subscriptions and everything else, money transfers that the paypal API provides).

The paypal API has its own documentation with different API versions in English and I will claim to translate this documentation, which is updated from time to time (and therefore outdated). The disadvantage of Paypal in Ukraine is that it can only be used to buy goods on the Internet, but you cannot cash out money from the sale of goods, in other words, you cannot transfer the money earned from the sale of goods, say, to your credit card. In other countries it is easier with this, such an opportunity exists in almost all countries of the world (Germany, Italy, Spain, Greece, USA, France, Russia, etc.). See the paypal documentation and paypal API for a complete list of countries. There are many payment platforms (e-commerce) similar to paypal on the Internet, they differ only interest, which they take for providing payment services on the Internet (some of them may be a paypal partner).

How do you pay on the Internet in general?


Payment on the Internet takes place, by and large, according to the same set of actions. And the set of these actions is as follows. The user selects a product on the site, clicks on the 'Buy' button on the product page, the product is added In garbage'. On the page of the 'Cart' site, the user clicks on the 'Pay' button and here the most interesting things in online payments on the Internet begin (it does not matter paypal or ligpay or something else). After clicking on the 'Pay' button, the user, usually in online stores, goes to the platform selection page with which he will pay for the goods. Having selected paypal from the list of offered platforms for payment of payments, the user goes to the page of this platform (the paypal website if the user has chosen his platform), where he fills in the required fields for payment and sends the form by clicking on the 'Pay' button. After submitting the form on the site of the payment platform (payment itself), it is redirected back to the site page with information about successful payment for the goods and possibly additional information about the product / product from the site (delivery time of the goods, link to go to the purchased service / product, the period that this product / product is available to the user, etc.) This is how the purchase process or the process of paying for goods on the Internet looks like. Then the user expects the delivery of the goods (VR glasses, tablet, phone) or gains access and uses the purchased product (advice from a psychologist, personal horoscope). Congratulations! You have made a purchase online!

Everything is easier than in a humorous story "What would happen if programmers built houses"

Checkout - add a PayPal button


Sign up at developer.paypal.com and look at Checkout with the addition of a PayPal button to the product page.
How does the button work? Described in steps:
- Add a PayPal button for payment to the product web page.
- The buyer presses the button.
- The button calls the Orders PayPal API to configure the transaction (for advanced programmers, you can configure more detailed processing on the server of your site, but more on that later).
- Button launches PayPal Checkout.
- Buyer confirms payment.
- The button calls the PayPal Orders API to complete the transaction (also for advanced programmers).
- You show proof of purchase to the buyer (message or page about successful purchase).

What do you need to add a button?
We need to add the following code:

 < head >
< !-- Ensures optimal rendering on mobile devices. -- >
< meta name = "viewport" content = "width = device-width, initial-scale = 1" />
< !-- Optimal Internet Explorer compatibility -- >
< meta http-equiv = "X-UA-Compatible" content = "IE = edge" />
< / head >

< script src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID"> / / Обязательно. замените SB_CLIENT_ID на ваш sandbox client ID (песочница) или на live client ID (для продакшен сервера).
< / script>
< div id="paypal-button-container">< / div>
< script>
/ / добавьте ваш client ID и secret
var PAYPAL_CLIENT = 'PAYPAL_LIVE_CLIENT'; // указать ваши PAYPAL_LIVE_CLIENT значения для продакшен.
var PAYPAL_SECRET = 'PAYPAL_LIVE_SECRET'; // указать ваши PAYPAL_LIVE_SECRET значения для продакшен.

/ / Направьте свой сервер на PayPal API
var PAYPAL_ORDER_API = 'https://api.paypal.com/v2/checkout/orders/';

paypal.Buttons({
createOrder: function(data, actions) {
/ / Эта функция настраивает детали транзакции, включая сумму и детали товаров.
return actions.order.create({
purchase_units: [{
description: "Some description",
amount: {
currency_code: "USD",
value: '300.00'
},
items: [{
name: "Product 1",
description: "Description of product",
sku: "gol-1253",
unit_amount: {
currency_code: "USD",
value: "100.00"
},
quantity: "1"
}, {
name: "Product 2",
description: "Description for Product 2 ba-bla-bla",
sku: "loh-5321",
unit_amount: {
currency_code: "USD",
value: "40.00"
},
quantity: "5"
}
],
}]
});
},
onApprove: function(data, actions) {
/ / This function captures the funds from the transaction.
return actions.order.capture().then(function(details) {
/ / This function shows a transaction success message to your buyer.
alert('Transaction completed by ' + details.payer.name.given_name);
});
}
}).render('#paypal-button-container');
< / script>


The commented out javascript code is an example of how you can organize the addition of multiple products.

If you use and test only in a sandbox, then you should remove the lines:

/ / add your client ID and secret
var PAYPAL_CLIENT = 'PAYPAL_LIVE_CLIENT'; / / указать ваши PAYPAL_LIVE_CLIENT значения для продакшен.
var PAYPAL_SECRET = 'PAYPAL_LIVE_SECRET'; / / указать ваши PAYPAL_LIVE_SECRET значения для продакшен.
/ / Направьте свой сервер на PayPal API
var PAYPAL_ORDER_API = 'https://api.paypal.com/v2/checkout/orders/';

That's all you need to add a PayPal payment button (form) on the site.
Congratulations! You are done adding PayPal payment to your site.

For design and general interest, you can look at the interactive design of buttons on the page provided by PayPal:
https://www.paypal.com/buttons/smart

We studied how to connect payment using the paypal button. If this is not enough for you and you want to understand, for example, how invoicing PayPal works, then move on.

Invoicing PayPal - Billing PayPal


So, as a merchant, you can use the PayPal Billing API to create an invoice and email the invoice to the buyer.

Let's go back to our product listing page and try to figure out the paypal and PayPal API documentation. To do this, register on the paypal website when registering, select the 'corporate' account; it is also sometimes called 'business' (since we will provide goods and services for sale), and not 'personal' (which is chosen only for purchases on the Internet on international sites) ... We check the entered data, which after us will be checked by PayPal in a few months or weeks, and if the specified data are not correct, the account may be blocked, you also need to remember this when registering.

After registration, we have the opportunity to read the paypal API documentation, and most importantly, you acquire your personal ID (token) that Paypal provides to you in order to know that you are you. The ID token provided to you is unique. In short, the Paypal API documentation describes a set of fields that are passed from your site to the paypal site and back (from the paypal site to your site) during the payment process, as well as several rules and the ability to use 3D secure to secure online payments. For yes, we forgot about hackers! That don't disappear anywhere. Every year, many sites suffer from the actions of hackers who steal money on the Internet. If you are a programmer, remember this when developing any of your code, do not forget to protect your code from malicious actions and test the code for the safety of its use on the Internet.

After registering on the paypal website as a developer, go to the developer account at developer.paypal.com and out of the 6 services presented to us, we will be interested in only one Invoicing so far. It is Invoicing that is needed for us, as a seller, to make an invoice and issue it to the buyer for payment. And Invoicing API paypal will help us with this.
How it works? In the following steps:
1. The seller makes an invoice
2. Sends a link to the invoice in an email to the buyer
3. The buyer clicks on the invoice in the email
4. Buyer pays securely by credit card, debit card, PayPal or PayPal Credit.

Consider a simple interaction with version 2 (PayPal v2) (version came into force in April 2019) to make and send an invoice by email, consider the minimum steps required for this:

1. Before we start making invoices, we need to set up a working environment, set up a sandbox for testing our work with the REST PayPal API and, of course, get a token - our unique identifier in the REST PayPal API. To do this, we registered on the paypal website with a 'corporate' account and made a test APP and test accounts in the sandbox. Now that we have a token, let's move on.

2. We make an invoice. That is, we send a JSON request to the url of the sandbox with our data describing the order of the goods and the email address (recipient of payment) verified during registration. We send the request from the token to the url https://api.sandbox.paypal.com/v2/invoicing/ (sandbox)
An example of a JSON request sent:


{
"detail": {
"invoice_number": "#12345",
"reference": "deal-ref",
"currency_code": "USD",
"note": "Thank you for your business.",
"term": "No refunds after 30 days.",
"memo": "This is a long contract",
"payment_term": {
"term_type": "NET_10"
}
},
"invoicer": {
"name": {
"given_name": "David",
"surname": "Larusso"
},
"address": {
"address_line_1": "1234 First Street",
"admin_area_2": "Anytown",
"admin_area_1": "CA",
"postal_code": "98765",
"country_code": "US"
},
"phones": [{
"country_code": "001",
"national_number": "4085551234",
"phone_type": "MOBILE"
}],
"website": "www.test.com",
"tax_id": "ABcNkWSfb5ICTt73nD3QON1fnnpgNKBy- Jb5SeuGj185MNNw6g",
"logo_url": "https://example.com/logo.png",
"additional_notes": "2-4"
},
"primary_recipients": [{
"billing_info": {
"name": {
"given_name": "Stephanie",
"surname": "Meyers"
},
"address": {
"address_line_1": "1234 Main Street",
"admin_area_2": "Anytown",
"admin_area_1": "CA",
"postal_code": "98765",
"country_code": "US"
},
"email_address": "bill-me@example.com",
"phones": [{
"country_code": "001",
"national_number": "4884551234",
"phone_type": "HOME"
}],
"additional_info_value": "add-info"
},
"shipping_info": {
"name": {
"given_name": "Stephanie",
"surname": "Meyers"
},
"address": {
"address_line_1": "1234 Main Street",
"admin_area_2": "Anytown",
"admin_area_1": "CA",
"postal_code": "98765",
"country_code": "US"
}
}
}],
"items": [{
"name": "Yoga Mat",
"description": "Elastic mat to practice yoga.",
"quantity": "1",
"unit_amount": {
"currency_code": "USD",
"value": "50.00"
},
"tax": {
"name": "Sales Tax",
"percent": "7.25"
},
"discount": {
"percent": "5"
},
"unit_of_measure": "QUANTITY"
}, {
"name": "Yoga t-shirt",
"quantity": "1",
"unit_amount": {
"currency_code": "USD",
"value": "10.00"
},
"tax": {
"name": "Sales Tax",
"percent": "7.25"
},
"discount": {
"amount": {
"currency_code": "USD",
"value": "5.00"
}
},
"unit_of_measure": "QUANTITY"
}],
"configuration": {
"partial_payment": {
"allow_partial_payment": true,
"minimum_amount_due": {
"currency_code": "USD",
"value": "20.00"
}
},
"allow_tip": true,
"tax_calculated_after_discount": true,
"tax_inclusive": false
},
"amount": {
"breakdown": {
"custom": {
"label": "Packing Charges",
"amount": {
"currency_code": "USD",
"value": "10.00"
}
},
"shipping": {
"amount": {
"currency_code": "USD",
"value": "10.00"
},
"tax": {
"name": "Sales Tax",
"percent": "7.25"
}
},
"discount": {
"invoice_discount": {
"percent": "5"
}
}
}
}
}

A successful request will return HTTP 201 Created status and JSON with invoice details.
Sample JSON response:

{
"id": "INV2-PXSC-LFZ3-FDAX-HR3E",
"status": "DRAFT",
"detail": {
"reference": "deal-ref",
"currency_code": "USD",
"note": "Thank you for your business.",
"memo": "This is a long contract",
"additional_data": "2-4",
"category_code": "SHIPPABLE",
"invoice_number": "#12345",
"invoice_date": "2020-01-28",
"payment_term": {
"term_type": "NET_10",
"due_date": "2020-02-07"
},
"viewed_by_recipient": false,
"metadata": {
"create_time": "2020-01-28T20:54:48Z",
"last_update_time": "2020-01-28T20:54:48Z",
"created_by_flow": "REGULAR_SINGLE",
"recipient_view_url": "https://www.sandbox.paypal.com/invoice/p/#PXSCLFZ3FDAXHR3E",
"invoicer_view_url": "https://www.sandbox.paypal.com/invoice/details/INV2-PXSC-LFZ3-FDAX-HR3E"
},
"archived": false
},
"invoicer": {
"name": {
"given_name": "David",
"surname": "Larusso",
"full_name": "David Larusso"
},
"address": {
"address_line_1": "1234 First Street",
"admin_area_2": "Anytown",
"admin_area_1": "CA",
"postal_code": "98765",
"country_code": "US"
},
"phones": [{
"country_code": "001",
"national_number": "4085551234",
"phone_type": "MOBILE"
}],
"website": "www.test.com",
"tax_id": "ABcNkWSfb5ICTt73nD3QON1fnnpgNKBy- Jb5SeuGj185MNNw6g",
"additional_notes": "2-4",
"logo_url": "https://example.com/logo.png"
},
"primary_recipients": [{
"billing_info": {
"name": {
"given_name": "Stephanie",
"surname": "Meyers",
"full_name": "Stephanie Meyers"
},
"address": {
"address_line_1": "1234 Main Street",
"admin_area_2": "Anytown",
"admin_area_1": "CA",
"postal_code": "98765",
"country_code": "US"
},
"email_address": "bill-me@example.com"
},
"shipping_info": {
"name": {
"given_name": "Stephanie",
"surname": "Meyers",
"full_name": "Stephanie Meyers"
},
"address": {
"address_line_1": "1234 Main Street",
"admin_area_2": "Anytown",
"admin_area_1": "CA",
"postal_code": "98765",
"country_code": "US"
}
}
}],
"items": [{
"id": "ITEM-97V00660JE381301E",
"name": "Yoga Mat",
"description": "Elastic mat to practice yoga.",
"quantity": "1",
"unit_amount": {
"currency_code": "USD",
"value": "50.00"
},
"tax": {
"id": "TAX-7FC79953CG799523R",
"name": "Sales Tax",
"percent": "7.25",
"amount": {
"currency_code": "USD",
"value": "3.27"
}
},
"discount": {
"percent": "5",
"amount": {
"currency_code": "USD",
"value": "-2.50"
}
},
"unit_of_measure": "QUANTITY"
}, {
"id": "ITEM-9NY92987V15309140",
"name": "Yoga t-shirt",
"quantity": "1",
"unit_amount": {
"currency_code": "USD",
"value": "10.00"
},
"tax": {
"id": "TAX-7FC79953CG799523R",
"name": "Sales Tax",
"percent": "7.25",
"amount": {
"currency_code": "USD",
"value": "0.34"
}
},
"discount": {
"amount": {
"currency_code": "USD",
"value": "-5.00"
}
},
"unit_of_measure": "QUANTITY"
}],
"configuration": {
"tax_calculated_after_discount": true,
"tax_inclusive": false,
"allow_tip": true,
"partial_payment": {
"allow_partial_payment": true,
"minimum_amount_due": {
"currency_code": "USD",
"value": "20.00"
}
},
"template_id": "TEMP-2DD658352B363453P"
},
"amount": {
"breakdown": {
"item_total": {
"currency_code": "USD",
"value": "60.00"
},
"discount": {
"invoice_discount": {
"percent": "5",
"amount": {
"currency_code": "USD",
"value": "-2.63"
}
},
"item_discount": {
"currency_code": "USD",
"value": "-7.50"
}
},
"tax_total": {
"currency_code": "USD",
"value": "4.34"
},
"shipping": {
"amount": {
"currency_code": "USD",
"value": "10.00"
},
"tax": {
"id": "TAX-128425447T036552L",
"name": "Sales Tax",
"percent": "7.25",
"amount": {
"currency_code": "USD",
"value": "0.73"
}
}
},
"custom": {
"label": "Packing Charges",
"amount": {
"currency_code": "USD",
"value": "10.00"
}
}
},
"currency_code": "USD",
"value": "74.21"
},
"due_amount": {
"currency_code": "USD",
"value": "74.21"
},
"links": [{
"href": "https://api.sandbox.paypal.com/v2/invoicing/invoices/INV2-PXSC-LFZ3-FDAX-HR3E",
"rel": "self",
"method": "GET"
}, {
"href": "https://api.sandbox.paypal.com/v2/invoicing/invoices/INV2-PXSC-LFZ3-FDAX-HR3E/send",
"rel": "send",
"method": "POST"
}, {
"href": "https://api.sandbox.paypal.com/v2/invoicing/invoices/INV2-PXSC-LFZ3-FDAX-HR3E",
"rel": "replace",
"method": "PUT"
}, {
"href": "https://api.sandbox.paypal.com/v2/invoicing/invoices/INV2-PXSC-LFZ3-FDAX-HR3E",
"rel": "delete",
"method": "DELETE"
}, {
"href": "https://api.sandbox.paypal.com/v2/invoicing/invoices/INV2-PXSC-LFZ3-FDAX-HR3E/payments",
"rel": "record-payment",
"method": "POST"
}]
}

3. Sending an invoice
After you send the invoice to your buyer, the invoice is transferred to accounts payable and the following happens:
- You and your client will be notified by email.
- The account status is updated to SENT.
- The customer sees an invoice with an online payment button.

An example of a request that sends an invoice to the buyer (don't forget about the token):

curl -v -X POST \
https://api.sandbox.paypal.com/v2/invoicing/invoices/INV2-Z56S-5LLA-Q52L-CPZ5/send \
-H "Content-Type: application/json" \
-H "Authorization: Bearer Access-Token"

A successful request will return HTTP 200 OK status code without JSON in response.

To switch to the production (live) version, use the production live urls, respectively, replace https://api.sandbox.paypal.com/v2/ with https: //api.paypal.com/v2/...
That's all. We've covered an easy way to send an invoice for PayPal payment (invoicing).
Congratulations! You know how to set up and send PayPal invoices to customers.

To be continued..