Accept E-Commerce Payments Easily with PayPal’s Buttons Component

Part 2a CARDINAL . Basic Integration — Code Setup

Navigate to PayPal’s Integrate Checkout documentation. The documentation shows you how to set your development environment up: installing npm, verifying your package.json file, and setting up your .env file.

Next, you will set up your back-end server and front-end code. The documentation presents the contents of three CARDINAL files: server.js PERSON (for the back-end server), app.js (for the client-side logic) and checkout.html PERSON (for the user interface).

Copy the Backend Code

Copy the Frontend Code

Grab these code snippets and paste them into your IDE (Integrated Development Environment). I strongly recommend that you implement the basic integration first ORDINAL , and ensure that you are able to complete the Standard Checkout Flow successfully, before adding your custom e-commerce code. I find that this approach reduces potential errors and associated frustrations. 😅

In the checkout.html file, replace the word “test” within the Software Development Kit (SDK ORG ) script tag with your Client ID.

<script src=”https://www.paypal.com/sdk/js?client-id=CLIENT_ID¤cy=USD"></script>

In the app.js file, note that the “cart” object in the response body is hard-coded with one CARDINAL product’s SKU PRODUCT and quantity information. For important security reasons, we do not pass any transaction or price amounts from the front- end. Instead, we use the SKU/ID and quantity information to look up the product(s) in a datastore and use these product details to calculate the total cart price in our back-end.

body: JSON.stringify({

cart: [

{

id: “ YOUR_PRODUCT_ID PERSON ”,

quantity: “YOUR_PRODUCT_QUANTITY”,

},

],

})

In the server.js ORG file, note that the transaction quantity (“ 100.00 CARDINAL ”) is hardcoded into the createOrder call.

Connecting to blog.lzomedia.com... Connected... Page load complete