DEV Community: Arit Developer

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

Arit Developer — Wed, 25 Oct 2023 21:39:00 +0000

Accepting online payments is now a universal must-have, catering to everyone from solo entrepreneurs to massive global corporations.

PayPal’s Standard Checkout allows for seamless integration of PayPal’s Payment Buttons component into your e-commerce app, granting you the power to accept online payments. In this guide, I am going to show how to add Standard Checkout to a simple shopping app, built with HTML and NodeJS.

Guide Overview

Part 1. Prerequisites
Part 2a. Basic Integration — Code Setup
Part 2b. Basic Integration — Checkout Flow
Part 3a. Custom Integration — Code Setup
Part 3b. Custom Integration — Checkout Flow
Part 4. Conclusion
Part 5. Additional PayPal Payment Integrations

Part 1. Prerequisites

To complete this integration, you will need the following information:

API Credentials (Client ID and Secret) for a PayPal REST app: paste these from your Developer Dashboard. Since we are working in a development environment in this demo, ensure that the Sandbox Toggle is on.

The username and password for a Personal Sandbox account: you will need this to complete the checkout process.

Part 2a. 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 files: server.js (for the back-end server), app.js (for the client-side logic) and checkout.html (for the user interface).

Grab these code snippets and paste them into your IDE (Integrated Development Environment). I strongly recommend that you implement the basic integration first, 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) script tag with your Client ID.

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

In the app.js file, note that the "cart" object in the response body is hard-coded with one product’s SKU 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”,
      quantity: “YOUR_PRODUCT_QUANTITY”,
    },
  ],
})

In the server.js file, note that the transaction quantity ("100.00") is hardcoded into the createOrder call.

const createOrder = async (cart) => {
  console.log(
    “shopping cart information passed from the frontend createOrder() callback:”,
    cart,
  );

  const accessToken = await generateAccessToken();
  const url = `${base}/v2/checkout/orders`;
  const payload = {
    intent: "CAPTURE",
    purchase_units: [
      {
        amount: {
          currency_code: "USD",
          value: "100.00",
        },
      },
    ],
  };

... more code ...
}

Part 2b. Basic Integration — Checkout Flow

Start your server; on the command line, run "node server/server.js" or whichever shortcut is defined in your package.json file. You should see the PayPal Buttons component displayed on the front- end.

Click the first PayPal button, which displays the Checkout modal. Note that the URL in the modal shows that we are in a sandbox environment. Sign in using your Personal Sandbox account (if you haven’t already).

You are then presented with the transaction amount (at this point, this should be $100.00) and several payment options.

Complete the transaction with the PayPal Balance option. A confirmation message should appear in your browser; its location depends on where you place the element with the id "result-message" in your application.

<p id=”result-message”></p>

Part 3a. Custom Integration — Code Setup

Now, let’s add our custom e-commerce code!

In the checkout.html file, I added the code for three products being sold at the LiftOff Shop. I styled the code with TailwindCSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PayPal JS SDK Standard Integration Demo</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-6">
    <h1 class="text-center text-4xl font-medium">LiftOff Shop</h1>
    <main class="products flex flex-wrap justify-center">
      <div
        class="product text-center m-3 p-3 border border-slate-400 rounded-md"
      >
        <img src="https://picsum.photos/id/21/200" class="rounded-md" />
        <h2 class="text-xl my-2">Galaxy Shoes</h2>
        <p class="text-green-600 font-medium text-lg mb-2">$100</p>
        <div class="mb-3">
          <label class="text-lg" for="quantity1">Quantity:</label>
          <select class="text-lg" id="quantity1">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </div>
        <button
          class="product-btn py-1 px-3 rounded-md bg-indigo-200 hover:bg-indigo-300"
          data-product-id="hdqgapq9"
          data-quantity-id="quantity1"
        >
          Add to Cart
        </button>
      </div>

      <div
        class="product text-center m-3 p-3 border border-slate-400 rounded-md"
      >
        <img src="https://picsum.photos/id/104/200" class="rounded-md" />
        <h2 class="text-xl my-2">Spaceship Earrings</h2>
        <p class="text-green-600 font-medium text-lg mb-2">$40</p>
        <div class="mb-3">
          <label class="text-lg" for="quantity2">Quantity:</label>
          <select class="text-lg" id="quantity2">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </div>
        <button
          class="product-btn py-1 px-3 rounded-md bg-indigo-200 hover:bg-indigo-300"
          data-product-id="rnfjwsy0"
          data-quantity-id="quantity2"
        >
          Add to Cart
        </button>
      </div>

      <div
        class="product text-center m-3 p-3 border border-slate-400 rounded-md"
      >
        <img src="https://picsum.photos/id/342/200" class="rounded-md" />
        <h2 class="text-xl my-2">Martian Tote</h2>
        <p class="text-green-600 font-medium text-lg mb-2">$75</p>
        <div class="mb-3">
          <label class="text-lg" for="quantity3">Quantity:</label>
          <select class="text-lg" id="quantity3">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </div>
        <button
          class="product-btn py-1 px-3 rounded-md bg-indigo-200 hover:bg-indigo-300"
          data-product-id="zytkddw5"
          data-quantity-id="quantity3"
        >
          Add to Cart
        </button>
      </div>
    </main>

    <p id="result-message" class="mx-auto text-center text-red-600 w-1/2"></p>

    <section class="mt-8 mx-auto flex flex-wrap w-1/2">
      <div class="mb-3 w-1/2 text-center" id="cart">
        <h2 class="text-xl font-medium">Cart</h2>
        <ul id="cart-items"></ul>
        <p>TOTAL $<span id="cart-total">0</span></p>
        <button
          id="clear-cart"
          class="py-1 px-3 mt-3 rounded-md bg-gray-200 hover:bg-gray-300"
        >
          Clear Cart
        </button>
      </div>
      <div class="text-center" id="paypal-button-container"></div>
    </section>

    <script src="https://www.paypal.com/sdk/js?client-id=AYCd0wKOWs9itZ23_2XEZUhZpbZdHT_c1qcMCjqTnb6fxFE7tQBnUQGSPh3_PVQkgoBamFV1KgPUI9B4&currency=USD"></script>
    <script type="module" src="app.js"></script>
  </body>
</html>

In the app.js file, I added code that brings the Add-To-Cart, Calculate-Cart-Total and Clear-Cart functionalities. To calculate my cart total, I imported my product information from the products.js file, which serves as my makeshift datastore. I also updated the cart object in the response body to the cartItems array (instead of the hard-coded product from earlier).

import { PRODUCTS } from "./products.js";

const cartItems = [];
let cartTotal = 0;

function addToCart(productId, quantityId) {
  const quantitySelect = document.getElementById(quantityId);
  const selectedQuantity = parseInt(quantitySelect.value, 10);

  if (selectedQuantity > 0) {
    cartItems.push({
      id: productId,
      quantity: selectedQuantity,
    });
    cartTotal = calculateCartTotal(cartItems);
    updateCart(cartItems);
  }
}

function calculateCartTotal(cartItems) {
  let total = 0;
  cartItems.forEach((item) => {
    total += item.quantity * PRODUCTS[item.id].price;
  });

  return total;
}

function updateCart(cartItems) {
  const cartItemsList = document.getElementById("cart-items");
  const cartTotalElement = document.getElementById("cart-total");

  cartItemsList.innerHTML = "";
  cartTotalElement.textContent = cartTotal;

  cartItems.forEach((item) => {
    const li = document.createElement("li");
    li.textContent = `${PRODUCTS[item.id].name}: ${item.quantity}`;
    cartItemsList.appendChild(li);
  });
}

window.paypal
  .Buttons({
    async createOrder() {
      try {
        const response = await fetch("/api/orders", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          // use the "body" param to optionally pass additional order information
          // like product ids and quantities
          body: JSON.stringify({
            cart: cartItems,
          }),
        });

... more code ...

... more code ...
  })
  .render("#paypal-button-container");

// Example function to show a result to the user. Your site's UI library can be used instead.
function resultMessage(message) {
  const container = document.querySelector("#result-message");
  container.innerHTML = message;
}

// Event Listeners
const productBtns = document.querySelectorAll(".product-btn");
productBtns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    const productId = e.target.dataset.productId;
    const quantityId = e.target.dataset.quantityId;
    addToCart(productId, quantityId);
  });
});

// clear cart
document.getElementById("clear-cart").addEventListener("click", () => {
  // clear cart items, without reassigning the array
  cartItems.length = 0;
  cartTotal = 0;
  updateCart(cartItems);
});

In the server.js file, I imported my products from products.js and added a function that calculates the transaction amount using the cart contents. In the createOrder call, I replaced the hardcoded transaction value with the calculated cart value.

import express from "express";
import fetch from "node-fetch";
import "dotenv/config";
import path from "path";
import { PRODUCTS } from "../client/products.js";

... more code ...
... more code ...

function calculateTotalPrice(cart) {
  let totalPrice = 0;
  for (let i = 0; i < cart.length; i++) {
    totalPrice += PRODUCTS[cart[i].id].price * cart[i].quantity;
  }
  return totalPrice.toString();
}

/**
 * Create an order to start the transaction.
 * @see https://developer.paypal.com/docs/api/orders/v2/#orders_create
 */
const createOrder = async (cart) => {
  // use the cart information passed from the front-end to calculate the purchase unit details
  console.log(
    "shopping cart information passed from the frontend createOrder() callback:",
    cart
  );

  const accessToken = await generateAccessToken();
  const url = `${base}/v2/checkout/orders`;
  const payload = {
    intent: "CAPTURE",
    purchase_units: [
      {
        amount: {
          currency_code: "USD",
          value: calculateTotalPrice(cart),
        },
      },
    ],
  };

  ... more code ...
};

... more code ...

Part 3b. Custom Integration — Checkout Flow

Restart the server and add some products to the cart; I chose one of each item, totaling $215.

Click the gold PayPal button to activate Checkout (signing in with your Personal Sandbox account, if necessary). You should see that the transaction amount is the value of your cart.

Go ahead and complete the purchase. You should see a confirmation message in the browser.

Part 4. Conclusion

This demo introduced a straightforward integration of PayPal’s Standard Checkout, using the PayPal Buttons component. You may customize your further, to meet your use cases. Read our Checkout Documentation for examples of these customizations. The PayPal Developer GitHub repository also has several examples of integrations within various code environments, such as React and Angular.

Part 5. Additional PayPal Payment Integrations

Pay Later
Custom Debit/Credit Card fields (Advanced Checkout)

Join the PayPal Developer Community!
Our Developer Community members support each other in integrating PayPal technologies, contributing to open source, expanding knowledge and networks, and improving PayPal’s products and documentation. We’d love to have you join us! 💙

Website

Twitter

GitHub

PayPal Nocode Estimates: Get On The Same Page!

Arit Developer — Thu, 01 Jun 2023 14:01:46 +0000

There is a useful precursor to sending a client an invoice, and that is sending an estimate. Estimates allow you to establish full agreement with your clients regarding expected products and/or services, such that nothing in the subsequent invoice comes as a surprise.

PayPal offers a powerful Estimate Builder to improve your business or organizational flows. The builder is no-code, which makes it straightforward for both technical and non-technical people to use. Plus, once your client accepts your Estimate, you can convert it to an Invoice with ONE click! Quite convenient if you ask me! 😎

In this guide, I show you how to create an Estimate using PayPal, and how to convert your Estimate to an Invoice. If you are interested in no-code Invoicing, check out our guide here.

Guide Overview

Part 1. Access Estimate Builder
Part 2. Build Estimate
-- 2a. Choose Template and Currency
-- 2b. Add or Edit Customer
-- 2c. Add and Customize Items
-- 2d. Edit Your Business Info, Estimate Date and Number
-- 2e. Make Price Adjustments and Enable Tips and Partial Payments
-- 2f. Preview Finished Estimate
Part 3. SEND IT! 🚀

Part 1. Access Estimate Builder

Sign in to your Business PayPal account. If you do not have one, sign up for one; bear in mind that this is different from a Personal PayPal account.

We access the Estimate Builder from the Invoicing section. From the navigation bar, navigate to Invoicing. Your navigation layout may vary; I have reproduced two variations in the images below.

Then click on 'Estimates', followed by the 'Create Estimate' button:

Part 2. Build Estimate

2a. Choose Template and Currency

PayPal offers three ways to present your Estimate's items:

Quantity: list items, their quantity and their per-unit cost. This option is the default.
Amount: list items and their associated cost. This option is suitable when you do not need to specify quantity; for example, a unique painting.
Hours: list items, their duration in hours, and the per-hour rate. This option is perfect for time-based services, such as counseling.

2b. Add or Edit Customer

Add your customer - either create a new one or choose from previously created customers. You may also choose if and where to ship the items, and whether to add additional people to receive the estimate.

2c. Add and Customize Items

Add the items you wish to estimate costs for. You may include a custom message to your customer, terms and conditions, and a reference number. You may also attach any relevant documents to the estimate and add a private note for yourself (your customer will not be able to view this note).

2d. Edit Your Business Info, Estimate Date and Number

You may edit your business information and select which business details to show or hide. You may also select an Estimate Date (which defaults to the current date) and set a custom Estimate Number (which, by default, automatically increments from your last estimate).

2e. Make Price Adjustments and Enable Tips and Partial Payments

You may adjust your Estimate total by adding discounts, fees, surcharges, etc. You can also turn on Tipping and Partial Payments.

2f. Preview Finished Estimate

When you're done building your Estimate, you can preview what it looks like from your customer's perspective. Click the Eye Icon at the top corner of the Estimate Builder. When your customer views their Estimate, they will have the option to either request changes or accept the Estimate.

Part 3. SEND IT! 🚀

All looks good? Then SEND your Estimate - click the Send button. There are some actions available prior to sending the Estimate:

Share the Estimate link
Save Estimate as a draft
Save Estimate as a template

After sending, the next view shows you the activity on your estimate. You can add further memos to yourself.

When your customer accepts the Estimate, the Estimate status will be updated. Then you can convert it to an Invoice in one click and send back to your customer for payment.

Join the PayPal Developer Community

Our Developer Community members support each other in integrating PayPal technologies, contributing to open source, expanding knowledge and networks, and improving PayPal's products and documentation. We'd love to have you join us! 💙

Website: https://developer.paypal.com

Twitter: @paypaldev

GitHub: @paypal

PayPal Has Updated Its Webhook Verification Endpoint

Arit Developer — Thu, 01 Jun 2023 13:48:48 +0000

TL;DR;

PayPal requires that all the webhook notification messages it sends be verified by the webhook listener receiving these messages.
This requirement enhances security by ensuring that your webhook listener is receiving authentic PayPal webhook messages.
PayPal has updated its endpoint for verifying PayPal webhook notification messages, and its old webhook verification method is now deprecated. The updated endpoint simplifies the process of verifying PayPal webhook messages, which improves the developer experience.
The update also incorporates a lot more of our REST APIs (such as the Orders API). You may learn more about the update rationale here.

A webhook is an automated HTTP request sent from an application when triggered by an event. This request carries a message (called a payload) to a unique destination URL (called a webhook listener), and the receiving application can take further actions based on the payload content. Webhooks allow applications to communicate seamlessly with each other and enable speed in processing and service delivery.

PayPal’s REST APIs use webhooks to notify your application that an event has occurred; for example, a new order has been placed, or a payment has been processed. You can create a webhook associated with an event in your PayPal Developer Portal account. PayPal webhooks support an extensive list of event types.

An unscrupulous player could spoof a webhook notification message and attempt to make the message appear as it originated from PayPal. Therefore, to ensure security, PayPal requires that applications verify all webhook notifications received from PayPal.

To verify the PayPal webhook message, your application sends a POST request to PayPal’s verify-webhook-signature endpoint with a payload containing several required parameters:

auth_algo extracted from the PAYPAL-AUTH-ALGO value in the webhook response header.
cert_url extracted from the PAYPAL-CERT-URL value in the webhook response header.
transmission_id extracted from the PAYPAL-TRANSMISSION-ID value in the webhook response header.
transmission_sig extracted from the PAYPAL-TRANSMISSION-SIG value in the webhook response header.
transmission_time extracted from the PAYPAL-TRANSMISSION-TIME value in the webhook response header.
webhook_id The ID of the webhook as configured in your PayPal Developer Portal account.
webhook_event This is the webhook notification response received from PayPal, which you are now verifying.

Here is a sample webhook verification payload:



{ 
"auth_algo": "SHA256withRSA", 
"cert_url": "cert_url", 
"transmission_id": "69cd13f0-d67a-11e5-baa3-778b53f4ae55", 
"transmission_sig": 
"lmI95Jx3Y9nhR5SJWlHVIWpg4AgFk7n9bCHSRxbrd8A9zrhdu2rMyFrmz+Zjh3s3boXB07VXCXUZy/UFzUlnGJn0wDugt7FlSvdKeIJenLRemUxYCPVoEZzg9VFNqOa48gMkvF+XTpxBeUx/kWy6B5cp7GkT2+pOowfRK7OaynuxUoKW3JcMWw272VKjLTtTAShncla7tGF+55rxyt2KNZIIqxNMJ48RDZheGU5w1npu9dZHnPgTXB9iomeVRoD8O/jhRpnKsGrDschyNdkeh81BJJMH4Ctc6lnCCquoP/GzCzz33MMsNdid7vL/NIWaCsekQpW26FpWPi/tfj8nLA==", 
"transmission_time": "2016-02-18T20:01:35Z", 
"webhook_id": "1JE4291016473214C", 
"webhook_event": {
   "id": "8PT597110X687430LKGECATA",
   "create_time": "2013-06-25T21:41:28Z",
   "resource_type": "authorization",
   "event_type": "PAYMENT.AUTHORIZATION.CREATED",
   "summary": "A payment authorization was created",
   "resource": {
      "id": "2DC87612EK520411B",
      "create_time": "2013-06-25T21:39:15Z",
      "update_time": "2013-06-25T21:39:17Z",
      "state": "authorized",
      "amount": {
         "total": "7.47",
         "currency": "USD",
         "details": {
            "subtotal": "7.47"
         }
      },
      "parent_payment": "PAY-36246664YD343335CKHFA4AY",
      "valid_until": "2013-07-24T21:39:15Z",
      "links": [
         {
            "href": "https://api-m.paypal.com/v1/payments/authorization/2DC87612EK520411B",
            "rel": "self",
            "method": "GET"
         },
         {
            "href": "https://api-m.paypal.com/v1/payments/authorization/2DC87612EK520411B/capture",
            "rel": "capture",
            "method": "POST"
         },
         {
            "href": "https://api-m.paypal.com/v1/payments/authorization/2DC87612EK520411B/void",
            "rel": "void",
            "method": "POST"
         },
         {
            "href": "https://api-m.paypal.com/v1/payments/payment/PAY-36246664YD343335CKHFA4AY",
            "rel": "parent_payment",
            "method": "GET"
         }
      ]
   }
}
}

Here is a sample POST request verifying a PayPal webhook notification, sent from a NodeJS application:



var fetch = require('node-fetch'); 
fetch('https://api-m.sandbox.paypal.com/v1/notifications/verify-webhook-signature', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ECvJ_yBNz_UfMmCvWEbT_2ZWXdzbFFQZ-1Y5K2NGgeHn' 
    },
    body: JSON.stringify({ "transmission_id": "69cd13f0-d67a-11e5-baa3-778b53f4ae55", "transmission_time": "2016-02-18T20:01:35Z", "cert_url": "cert_url", "auth_algo": "SHA256withRSA", "transmission_sig": "lmI95Jx3Y9nhR5SJWlHVIWpg4AgFk7n9bCHSRxbrd8A9zrhdu2rMyFrmz+Zjh3s3boXB07VXCXUZy/UFzUlnGJn0wDugt7FlSvdKeIJenLRemUxYCPVoEZzg9VFNqOa48gMkvF+XTpxBeUx/kWy6B5cp7GkT2+pOowfRK7OaynuxUoKW3JcMWw272VKjLTtTAShncla7tGF+55rxyt2KNZIIqxNMJ48RDZheGU5w1npu9dZHnPgTXB9iomeVRoD8O/jhRpnKsGrDschyNdkeh81BJJMH4Ctc6lnCCquoP/GzCzz33MMsNdid7vL/NIWaCsekQpW26FpWPi/tfj8nLA==", "webhook_id": "1JE4291016473214C", "webhook_event": { "id": "8PT597110X687430LKGECATA", "create_time": "2013-06-25T21:41:28Z", "resource_type": "authorization", "event_type": "PAYMENT.AUTHORIZATION.CREATED", "summary": "A payment authorization was created", "resource": { "id": "2DC87612EK520411B", "create_time": "2013-06-25T21:39:15Z", "update_time": "2013-06-25T21:39:17Z", "state": "authorized", "amount": { "total": "7.47", "currency": "USD", "details": { "subtotal": "7.47" } }, "parent_payment": "PAY-36246664YD343335CKHFA4AY", "valid_until": "2013-07-24T21:39:15Z", "links": [ { "href": "https://api-m.paypal.com/v1/payments/authorization/2DC87612EK520411B", "rel": "self", "method": "GET" }, { "href": "https://api-m.paypal.com/v1/payments/authorization/2DC87612EK520411B/capture", "rel": "capture", "method": "POST" }, { "href": "https://api-m.paypal.com/v1/payments/authorization/2DC87612EK520411B/void", "rel": "void", "method": "POST" }, { "href": "https://api-m.paypal.com/v1/payments/payment/PAY-36246664YD343335CKHFA4AY", "rel": "parent_payment", "method": "GET" } ] } } })
});

When your webhook verification request is successful, PayPal responds with the following payload (and an HTTP status of 200):



{
  "verification_status": "SUCCESS" 
}

PayPal has a webhook simulator with which you can quickly test your webhook listener. Grab the URL of your webhook listener, or grab a mock listener URL from services like https://webhook.site. In the webhook simulator, enter this URL in the Webhooks URL field, select the Event Type for which you want a notification message, then click Send Test:

Your webhook listener should receive a mock payload from PayPal that resembles the examples provided earlier in this post.

PayPal takes the security of our products very seriously; with this update to our webhook verification endpoint, we continue to provide seamless payment integrations, coupled with mission-critical quality security standards.

Join the PayPal Developer Community

Our Developer Community members support each other in integrating PayPal technologies, contributing to open source, expanding knowledge and networks, and improving PayPal's products and documentation. We'd love to have you join us! 💙

Website: https://developer.paypal.com

Twitter: @paypaldev

GitHub: @paypal

PayPal No-code Invoicing to Simplify Your Life! 😮‍💨

Arit Developer — Wed, 25 Jan 2023 17:50:25 +0000

Every developer I know (ok, most developers 😅) seeks ways to accomplish tasks more efficiently. The rise of no- and low-code tooling is empowering both coders and non-coders alike to achieve business and operational goals that deliver just as much value, without requiring as much code. 🎉

One such area is Invoicing. Invoice management is a crucial part of any enterprise, and no-code invoicing tools allow people to quickly configure their invoicing system, manage open invoices and payments seamlessly, and save precious time to invest in other revenue-generating pursuits.

In this guide, I show you how to incorporate PayPal's No-node Invoicing system into your business or organizational workflow. In a few minutes, you'll be sending your first invoice!

Guide Overview

Part 1. Access Invoice Builder
Part 2. Edit Business Information
Part 3. Build Invoice
-- Part 3b. Edit Invoice Parameters
-- Part 3c. Add Price Adjustments
-- Part 3d. Enable Partial Payments and Tips
-- Part 3e. Preview Finished Invoice
Part 4. SEND IT! 🚀

Part 1. Access Invoice Builder

Sign in to your Business PayPal account. If you do not have one, sign up for one; bear in mind that this is different from a Personal PayPal account.

From the navigation bar, navigate to Invoicing. Your navigation layout may vary; I have reproduced two variations in the images below.

Part 2. Edit Business Information

Edit your business information so that it displays correctly on your invoices. Click the Gear Icon towards the right, then select Business Information.

In the panel that opens, you may add your business logo and choose which business details display in invoices.

Part 3. Build Invoice

Click the Create Invoice button. Next, type in the products or services for which you are creating an invoice. PayPal offers good flexibility in how you define and customize these items: in terms of amounts, quantity, or hours.

You may leave an optional note for your customer, to communicate some details that are not captured in the Item List.

You may also attach images or PDF documents to your invoice, and leave yourself a memo. This memo is hidden from your customer; they will not have access to it.

Part 3b. Edit Invoice Parameters

Next, to the right of the Invoice Builder, you may specify an Invoice Number, the Invoice Date (defaults to the current date), and the Due Date.

Part 3c. Add Price Adjustments

You can also add some price adjustments that affect the final Invoice amount, such as discounts, fees, surcharges, etc.

Part 3d. Enable Partial Payments and Tips

I think this is a cool feature: you can allow your customers to make partial payments toward their invoice! 🥳 You can even specify the minimum amount that a partial payment can be. You can also accept tips.

Part 3e. Preview Finished Invoice

When you're done building your Invoice, you can preview what it looks like from your customer's perspective. Click the Eye Icon at the top corner of the Invoice Builder.

If you anticipate reusing the structure of the invoice you've built, you can save it as a Template; find this option among others in the dropdown menu next to the Eye Icon.

Part 4. SEND IT! 🚀

All looks good? Then SEND your Invoice - click the Send button. After sending, the next view shows you the activity on your invoice. You can add further memos to yourself.

There are also some post-invoice actions available to you:

Remind your customer about their invoice (click the Remind button at the top-right corner)
Edit your Invoice using the Pencil Icon
Access other actions from the 3-dot Dropdown, such as Record Payment (if your customer pays you outside of PayPal) or Download Invoice PDF

Join the PayPal Developer Community

Our Developer Community members support each other in integrating PayPal technologies, contributing to open source, expanding knowledge and networks, and improving PayPal's products and documentation. We'd love to have you join us! 💙

Website: https://developer.paypal.com

Twitter: @paypaldev

GitHub: @paypal

Cover Photo by Jill Wellington

Start Selling Subscriptions From Your Website FAST!

Arit Developer — Mon, 24 Oct 2022 15:03:13 +0000

In this guide, I will show you how to get subscriptions to your products and services up and running fast! PayPal provides a straightforward way to sell subscriptions. You shall configure your subscription plan within PayPal's sandbox environment, so that you can thoroughly test your subscription flow without any financial risk.

Once your sandbox subscription setup is working properly, you need only to duplicate the steps we took from within your PayPal Business account.

Guide Overview

Part 1. Get Sandbox Credentials
Part 2. Create Subscription Product & Plan
Part 3. Generate and Embed Subscription Buttons
Part 4. Test Your Subscription Flow
Part 5. Collect Live PayPal Subscriptions

Part 1. Get Sandbox Credentials

Sign into your PayPal Developer account. If you do not have one yet, sign up for a Business PayPal account, then navigate to the PayPal Developer site.

From the Developer Dashboard, you will grab the credentials for your sandbox accounts.

PayPal has automatically created 2 sandbox accounts for you: one called Business and the other Personal. The Business sandbox represents the Merchant (seller) perspective, while the Personal sandbox account represents the buyer's perspective.

For this guide, I shall refer to the Business sandbox account as the Merchant sandbox account, to avoid clashing terms with the Business-type PayPal account that grants Developer Dashboard access.

Click on the three dots to the right of each sandbox account type, then choose View/Edit account.

Copy the email and password for both sandbox accounts to a safe place for use later. Then sign out of your PayPal Developer account.

Part 2. Create Subscription Product & Plan

Next, you shall create both a Subscription product and plan. The product is the item/service you are selling, while the plan governs the details of your customers' subscription to your product.

Sign into PayPal's Sandbox using your Merchant sandbox account. Navigate to Pay & Get Paid => Accept Payments => Subscriptions. Select Subscription plans, then click the button Create Plan.

If you already have a subscription product, select it; else, click on Create a subscription product. For this guide, fill out just the required fields: Product name & Product type. The Product ID is filled automatically (unless you desire a specific product ID). Then choose your newly-created product on the next page:

Next, you build your Subscription Plan. For the purposes of this guide, I recommend the following features:

Fixed Pricing
Unlimited billing cycles
Billing every 1 month
1 missed billing cycle before subscription paused
Auto billing of outstanding payments

Part 3. Generate and Embed Subscription Buttons

After configuring your subscription plan, click Turn Plan On. PayPal then generates your Subscription buttons! 🎉 Configure your buttons to your preferred design, then click Copy Code. This is the code you will paste in your application. A sample of this code is below:

<div id="paypal-button-container-P-1M286691T85502507MNG3SQA"></div>

<script src="https://www.paypal.com/sdk/js?client-id=AQW7aBOHsXSUZx9awY6GCwAlfDlbSvHnOwcSqLl99ZBD4CCsDaht0EAPdhYKkd3fo_Zdk8zYMFnCz7_x&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
<script>
  paypal.Buttons({
      style: {
          shape: 'rect',
          color: 'gold',
          layout: 'vertical',
          label: 'subscribe'
      },
      createSubscription: function(data, actions) {
        return actions.subscription.create({
          plan_id: 'P-1M286691T85502507MNG3SQA'
        });
      },
      onApprove: function(data, actions) {
        alert(data.subscriptionID);
      }
  }).render('#paypal-button-container-P-1M286691T85502507MNG3SQA');
</script>

There are 2 <script> tags. The first <script> tag details the PayPal Software Developer Kit (SDK) that you are using, and contains your client-id, which the button generator inserted automatically for you:

<script src="https://www.paypal.com/sdk/js?client-id=AQW7aBOHsXSUZx9awY6GCwAlfDlbSvHnOwcSqLl99ZBD4CCsDaht0EAPdhYKkd3fo_Zdk8zYMFnCz7_x&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>

The second <script> tag confers the buttons' functionality, and also renders your Subscribe buttons at the <div> with an id that starts paypal-button-container...:

<div id="paypal-button-container-P-1M286691T85502507MNG3SQA"></div>

Move this <div> to where you wish your buttons to be displayed. Just ensure that this location is on the SAME page as the two <script> tags.

Within the onApprove value in the 2nd <script> tag, you may configure the action to occur after your customers subscribe. For example, you may want to update your UI with a confirmation message. The default onApprove behavior displays an alert containing the ID of the newly-activated subscription.

onApprove: function(data, actions) {
   alert(data.subscriptionID);
}

Part 4. Test Your Subscription Flow

Now for the fun part! 💃🏽 Click on the PayPal Subscribe button within your app. A window should popup allowing you to pay with a PayPal account. Sign in with your Personal sandbox account:

You should see details of your pending subscription purchase, with options to choose either your sandbox bank account, or sandbox credit card, for payment:

Complete the checkout flow. If you left the default behavior for onApprove in place, you should see an alert popup.

To verify that your sandbox subscription purchase was successful, sign into your Personal sandbox Account in an incognito tab, using your Personal sandbox credentials. You should see that your sandbox account was debited by the cost of your subscription. Over in your Merchant sandbox account, you should also see that your balance has increased by the same amount! 🥳

Part 5. Collect Live PayPal Subscriptions

To configure a PayPal Subscription Plan that accepts live payments, simply repeat the steps above using your PayPal Business account. Sign into https://paypal.com (notice there is no sandbox subdomain), navigate to Pay & Get Paid => Accept Payments => Subscriptions and continue the steps as above.

Bear in mind that to test your live Subscription configuration, you would need an actual PayPal account (not the sandbox kind) and/or an actual credit/debit card. Also, the purchase will be real. I strongly recommend using your sandbox accounts to do all the testing and adjustments you wish, before going live with your subscription.

Have fun! And get that money! 😉

Join the PayPal Developer Community

Our Developer Community members support each other in integrating PayPal technologies, contributing to open source, expanding knowledge and networks, and improving PayPal's products and documentation. We'd love to have you join us! 💙

Website: https://developer.paypal.com

Twitter: @paypaldev

Github: @paypal

Feature update: Rich Content Embeds

Arit Developer — Wed, 16 Feb 2022 21:56:51 +0000

Hello DEV Community!

I'm excited to announce a significant improvement in how we embed rich content (such as Tweets and Youtube videos) in Forem posts and comments.🎉

Now, you need just the embed keyword and the complete URL of the resource:

{% embed https://... %}

Prior to this change, we embedded rich content by using keywords specific to the type of embed being created. For example, to embed a GitHub repository, we would use the github keyword and the slug to the repository:

{% github forem/forem %}

With our new approach, all you need is the complete URL to the repository:

{% embed https://github.com/forem/forem %}

Our Editor's Guide contains a list of supported content types. Note that embeds that were created using the former approach will still work for now. Eventually, the former approach will be deprecated.

Do jump in and try this new rich-content embed approach out! Please report any bugs you may encounter - thanks!

Originally published on Forem.dev.

Getting My Groove Back, and Surviving Dysfunctional Startups

Arit Developer — Sun, 28 Nov 2021 23:39:42 +0000

Hello there! 👋🏾

Y'all are spoiling me with your support; I received several encouraging responses to my last newsletter. I’m grateful! 🧡

Ok! Jump in below, and enjoy! 😉

PS My Calendly is open again for anyone needing tech career counsel.

To enjoy content like this in your inbox, subscribe to the Arit Developer newsletter HERE.

How Arit Got Her Groove Back 💃🏽

I just completed my first project after quitting a huge one (click here if you missed that!). This recent project was more than a mental breather; it was my opportunity to return to feeling like a capable coder who can implement a feature or task from start-to-finish, at a high quality standard. With this new project, I aimed to apply all the competencies I had gained from the last project, and I was also looking forward to learning something new. ✨

In a nutshell, this project called for the refactor of Forem‘s Sidebar. Currently, he sidebar displays up to 5 navigation links, with a More... button underneath; if there are more than 5 navigation links, clicking this More... button reveals the remaining links. The refactor called for two distinct sections within the sidebar, and all navigation links divvied up between these 2 sections. The More... button was to be deprecated.

My first step was to implement those project aspects that wouldn’t affect the user-experience on the front-end:

add a section column to the navigation_links table
set a default section value
backfill the section column for existing links
ensure that changes to a link’s section persisted to the database
write/update relevant tests

My next step was to implement the user-facing aspects:

update the sidebar to display the 2 sections with their links
update the admin portal (where links are managed) to display the 2 sections as well
write/update relevant tests

During review of my second pull request, my teammate Suzanne left several useful suggestions for enhancing my code’s accessibility. I welcomed her contributions because I do want to improve my accessibility skills.

With this project done, and with my groove back and humming along nicely, I’m ready to tackle another large project: refactoring all Save Confirmation functionality in our app. This should be good! 😅

Functioning Well At A Dysfunctional Startup

Some time ago, an early-career developer (let’s call them Carey) scheduled a 1:1 chat with me to discuss difficulties they were having at their first (remote) tech job. I looked forward to our talk because I wanted to do all I could to encourage them, and give them practical tools to navigate their situation.

Carey shared that they worked at an early-stage startup, completely bootstrapped with no short-term plans for venture fund-raising. When they got the job, Carey could hardly contain their excitement! Before their start date, Carey prepared their household, created a schedule and set up their home office, all the while oscillating between anticipation, exhilaration and nervousness.

Fast-forward to the present, and Carey almost regrets taking the job. The first issue they experienced was the total lack of project management among the developers. Carey was almost in tears as they recounted to me how their code had been overwritten several times by other engineers, only to be asked by the team lead to redo the work. What’s worse, the developers over-writing Carey’s code never acknowledged their actions or expressed any remorse over Carey having to re-code their work.

Another issue Carey faces is a company culture that revolves entirely around those employees who were all friends before the startup was established. Workers outside of this friendship-circle (Carey included) often feel marginalized or ignored, and there are virtually no regularly-held rapport-building activities. Compounding the situation is the fact that many of the company’s decisions appear to benefit this friendship-circle the most, before other team members are considered. For Carey, this atmosphere extends to their relationship with their manager, who apparently lacks the power to sponsor or advocate for Carey to any meaningful degree, and often replies to Carey’s requests with: I’ll check with and get back to you.

I was happy to be Carey’s sounding board because I believe that, especially in the tech industry, feeling safe enough to vent and emote authentically is vital to career health and progress. I asked Carey what their immediate career goals were; they replied that they’d like to get a solid 9-12 months of work experience before hunting for a new job. So I shared the following counsel for the rest of their time at the company:

Document Work and Communication: as long as the issue of over-written work continued (without explanation or accountability), I advised Carey to keep records of their work, as proof of their output. I also advised them to follow all verbal communication up with an email summarizing the convo’s key points, as a way of documenting decisions and agreements.

Maintain Boundaries: I encouraged Carey not to feel obligated to work overtime or outside of work hours, in order to protect the rest of their life and mental health. I advised them to block off hours in their work calendar to show when they were unavailable.

Keep Network Warm: even though they were not actively job-hunting, I advised Carey to start warming up their professional contacts; an example of such is to email/text/tweet your contact about whether their company is hiring.

Protect Sense of Professional Worth: in a work environment like Carey’s, it is so easy to start feeling incompetent, especially as a first-time developer. I advised Carey to stay involved with other coding communities (like healthy opensource projects) where they could feel better supported, and contribute meaningfully.

You may wonder why I did not advise Carey to “fight” the issues they were experiencing. Simply put: I don’t think it is their problem. Carey, as a first-time developer, is at the point of their career where they need to focus on their technical growth and opportunities that provide for this. Period. In my humble opinion, becoming distracted with the clearly chronic problems that this company manifests would be a mistake for Carey.

Carey’s experience is a cautionary tale about how transitioning to a coding career is not always pleasant. What do you think about their experience and my counsel on how to deal? I would love to hear your thoughts - please comment below!

Photo Credit: Unknown; please comment owner below and I will credit appropriately

Quitting At Work, and Normalizing Burnout Conversations

Arit Developer — Wed, 24 Nov 2021 23:52:25 +0000

Well, well! This piece reads like a bit of a downer doesn’t it? 😅

Still, I wanted to share some not-so-glamorous sides of the developer experience (mine included). I believe that being able to feel, accept, process and channel negative experiences, is a vital skill. I hope you enjoy. 🤎

PS My Calendly is open again for anyone needing tech career guidance. 🎉

To enjoy content like this in your inbox, subscribe to the Arit Developer newsletter HERE.

I Quit A Work Project... And I Felt like Sh*t

Several months ago, I took on a large project at work. In summary, my task was to:

Migrate the data within ~25 columns from one table, and split them between 2 new tables. There were over 650,000 discrete records that would be affected.
Update all related business logic within dozens of files in the backend, so that they read from the 2 new tables, no longer the old.
Update all related tests.

Huge task. But I was excited; I had several team members available to help if I got stuck, so I believed I would just advance systematically through each part of the project.

Things Get Messy

I was wrong. Even though I divided the work into parts and sections that made sense implementation-wise, I ended up with an enormous pull-request that had over 100 commits, 77 changed files and 60+ comments.

So many parts of the app were broken. So I put my head down and fixed each break, only to have other parts break in turn. I kept going, but by this time, I was not enjoying the process anymore. I ran out of bandwidth for my other responsibilities (like reviewing my teammates’ work, or fulfilling opensource duty). This one project consumed me.

The teammates designated to help me were indeed helpful. However, because they weren’t working with me on the project, catching them up with my recent changes became tedious, and they had to do significant amounts of context-switching each time.

My Breaking Point

Eventually I fixed all the broken code. Then came the task of fixing the tests. In hindsight, leaving the tests until the end of implementation was my biggest mistake, because I had lost track of the sources of the breaks in each test. One day, as dozens of tests kept failing despite my best efforts to remedy them, I reached my breaking point, called my manager and said:

I’m done. I have nothing left.

My supportive manager agreed to pass the project onto a more senior developer for completion. I remained engaged by reviewing their work, which allowed me to understand what still needed to be done. When the pull request was finally merged, I was palpably relieved.

Then the fallout began. I was physically tired; experiencing aches and spasms in my shoulders and back. I was mentally tired; for the first time since I wrote my first line of Ruby, I woke up NOT looking forward to coding.

I felt like such a failure.

Why couldn’t I just keep pushing through to the end?

Why did I grow so tired? Why did I miss all these small mistakes?

Will I ever become a senior developer?

Rest & Recovery

Speaking with my manager and mentors helped me start processing what really happened, not just how I felt about what happened:

Arit, you took that project 90% of the way - that is a victory!

What you needed was more dedicated support, which was on leadership, not on you.

This one project is NOT an indicator of your ability; the scope was huge, the finish-line kept extending and you were exhausted.

Now a week or two out from the experience, I’m feeling better.

I’ve taken smaller-scoped tasks with clearly-defined technical implementation steps. I’m working … no, breezing through them now, applying the competencies I gained from my last project.

I’m remembering that, yes, I can code and I love coding.

Eventually I will achieve the technical proficiency & staying power necessary for complex, multi-month projects.

One line at a time, yeah? 🥰

Breaking Burnout Down

My mentor Vaidehi Joshi wrote a thought-provoking thread about burnout in a professional setting. Here is her thread’s first tweet:

// Detect dark theme var iframe = document.getElementById('tweet-1414652532014522373-39'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1414652532014522373&theme=dark" }

After the project I wrote about above, taking some time off was presented as a way to help recover from my fatigue.

However, I didn’t feel like that was a fitting solution, because my fatigue was not merely related to work-volume. Rather, it resulted from feeling increasingly inadequate as I worked to fix code-breaks that kept popping up like whack-a-moles.

A better solution for me was to choose work that restored my sense of competence and self-efficacy. Once I did, my vigor and interest returned. But if I wasn’t clear on the source of my fatigue, I probably wouldn’t have been able to identify a suitable solution.

Particularly in the tech industry, I think we need to further normalize conversations around burnout.

We should empower each other to express feelings of burnout, and support identifying, naming & addressing the true sources of our burnout. We also need to permanently retire beliefs that equate burnout with not being fit for the job.

Thank you, Vaidehi, for your thought-leadership! 🤎

Photo Credit: Liza Summer on Pexels

The Joy Of Empowering Others

Arit Developer — Tue, 02 Nov 2021 23:59:22 +0000

I’ve had the privilege of speaking at a few events this year. I linked a couple of them below.

I don’t think I can ever tire of encouraging those who wish to break into software development! Several people who’ve listened to these talks have reached out, sharing how they related to my journey, and the resulting motivation they received. When it comes to tech: the more, the merrier !

🎙 ThunderNerds - Empowering Women In Tech

🎙 CodeNewbie - Breaking Into Tech As A Mother

// Detect dark theme var iframe = document.getElementById('tweet-1407043780813938693-531'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1407043780813938693&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1403064905771614208-953'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1403064905771614208&theme=dark" }

It's A Wrap!

Whew! We wrapped Cycle 2 of my nonprofit Our Time For Tech up at the end of May. I am so proud of our 7 fellows and their accomplishments!

Our CodeCollab fellows completed the MVP of their ShiftWork app, and demoed it for the tech community (password: XJE*PnA9).

Our BetterPrep fellows landed their first-ever dev jobs 🎉 or built skills and fortitude to better weather their job searches.

I’m currently retro-ing the Cycle 2 experience and using what I learn to plan for 2022. If you know anyone that may be interested in what we offer, invite them to join the Arit Developer newsletter so they can stay updated on future programs.

To enjoy content like this in your inbox, subscribe to the Arit Developer newsletter HERE.

Announcing Demo Day! 🎉

Arit Developer — Wed, 05 May 2021 17:18:02 +0000

For almost 12 weeks, as part of our CodeCollab track, early-career developers Timi (@timilehin08), Gabrielle (@gabrielleeaston), Sara (@saradotlog) and Cam (@dordsichord) have been building The Shiftwork App from scratch.

The process has been exciting. 🥳

It has also been challenging. 😭

Above all, this project has expanded the team's technical, communication and collaborations skills like never before.

On March 27th, the team shall present The Shiftwork App at Our Time For Tech's first-ever Demo Day!

And YOU are invited!

Grab a free ticket here and please show up to support our hard-working fellows! 🙏🏾

At the virtual event, the team will summarize the app's features, share on what they learned and how they grew, and entertain questions from the audience.

We hope you will join us! 🧡

Empowering female developers!

Arit Developer — Thu, 04 Feb 2021 02:06:42 +0000

Hello Dev Community!

I'd like to introduce Our Time For Tech, my nonprofit tech-empowerment initiative founded to help women-in-Tech level up professionally.

Right now, we support female aspiring, career-changing or early-career developers. We offer two 12-week programs:

CodeCollab: Real-world experience building web applications as part of a team, with a senior engineer guiding the process
BetterPrep: Accountability, mock interviewing, live-coding practice and structured support while job-hunting

Applications are now open for Cycle 2 (which starts in March).

The cost is a one-time $250 enrollment fee. We have limited scholarships for applicants who can demonstrate financial need.

Please inbox me or DM me on Twitter if you have questions. I hope to see you in Cycle 2. And share with your networks, thanks! 🙏

Introducing Our Time For Tech on Dev.To

Arit Developer — Thu, 31 Dec 2020 01:23:16 +0000

Hello! 👋🏾

I'd like to introduce the Our Time For Tech organization on Dev.To.

At Our Time For Tech, we empower the careers of women-in-Tech. We have 2 tracks: CodeCollab and Better Prep. Read more about these tracks on our website.

On Dev.To, our fellows shall be sharing what they're learning during their time with us. I'm excited to witness their breakthroughs, share their frustrations and celebrate their commitment to advancing their Tech careers! 🧡

So keep watching this space! And, hey, if you think Our Time For Tech can help you, please join our mailing list, so we can alert you when applications for Cycle 2 open! 🎉