<![CDATA[ payments - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ payments - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ Eleventy Mon, 25 May 2026 05:06:39 +0000 60 <![CDATA[ How to Integrate PayPal into Your HTML, CSS, and JS Product Pages ]]> https://www.freecodecamp.org/news/integrate-paypal-into-html-css-js-product-pages/ 66d460f73dce891ac3a9681c Wed, 25 Jan 2023 17:35:10 +0000 By Shane Duggan

Imagine if you had an amazing product landing page, with customers lined up to make a purchase. But your manual JavaScript payment processing with server-side scripts, Authorize.net, or 2Checkout failed you.

Frustrated by being unable to make the purchase, your customer leaves to go to your competitors.

I imagine that would be a terrible feeling. Surely, there is a better way to do this with modern, widely accepted payment gateways. By the end of this tutorial, I will make sure that you won’t find yourself in that situation.

When it comes to accepting payments online, PayPal is one of the most widely-used and trusted options available. There are many new software startups appearing every day that use PayPal to handle their transactions and clients’ payments.

Integrating PayPal into your own HTML/CSS/JS product pages can greatly improve the user experience and streamline the checkout process for your customers.

PayPal also has great developer documentation that makes this integration all the more user-friendly.

In this tutorial, we will take a look at the steps involved in integrating PayPal into your product pages. You'll learn how to set up your PayPal for integration and implement the code into your HTML/CSS/JS pages. Then we'll look at how you can use your newfound knowledge going forward.

How Can You Use This Tutorial?

Now, let me use an example to give you a better idea of how you can use this tutorial. (Fictitious story alert)

Recently, I decided to start a new online startup. After deliberating through countless ideas for software startups, I decided to start an online eBook store.

As my very first product, I published an eBook that covered 10 years of my life experience in programming. Excitedly, I created a product landing page with all my knowledge of HTML, CSS, and JavaScript.

Introducing MyProgrammingBook, a glorious $0.99 programming guide that contains everything you need to know, including how to get all of your searching algorithms to O(1) (not really…). Here is what it looks like:

Image My first eBook's product landing page

I created this product landing page within an hour using some simple vanilla HTML and CSS. Here are the files I used:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>MyProgrammingBook</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="product-container">
      <div class="product-image-container">
        <img src="myprogrammingbook.jpg" alt="MyProgrammingBook">
      </div>
      <div class="product-info-container">
        <h1>MyProgrammingBook</h1>
        <p class="price">$0.99</p>
        <p class="product-description">
          Want to make all of your code run at O(1) speed? Then let me introduce MyProgrammingBook! Written by the world's leading expert on algorithmic optimization (me), this book will teach you everything you need to know to make your code lightning fast. Plus, it comes with a free unicorn* to help you implement all the techniques you learn. Don't miss out on this once-in-a-lifetime opportunity!
        </p>
        <p>*Terms and Conditions Apply</p>
      </div>
      <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <label for="address">Address:</label>
        <input type="text" id="address" name="address" required>
        <div class="card-info">
          <label for="card-number">Card Number:</label>
          <input type="text" id="card-number" name="card-number" required>
        </div>
        <div class="card-info">
          <label for="expiry-date">Expiry Date:</label>
          <input type="text" id="expiry-date" name="expiry-date" required>
          <label for="cvv">CVV:</label>
          <input type="text" id="cvv" name="cvv" required>
        </div>
        <input type="button" value="Buy Now" onclick="submitForm()">
</form>
    </div>
    <script src="script.js"></script>
  </body>
</html>

style.css

* {
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

.product-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-wrap: wrap;
}

.product-image-container {
  width: 30%;
}

.product-info-container {
  width: 70%;
  padding-left: 20px;
}

img {
  width: 100%;
  height: auto;
}

form {
  display: flex;
  flex-wrap: wrap;
}

label, input[type="text"] {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
}

label {
  width: 30%;
  padding-right: 10px;
}
input[type="text"] {
  width: 70%;
}

input[type="button"] {
  background-color: #ff5722;
  color: #fff;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  width: 100%;
}

input[type="text"][name="card-number"], input[type="text"][name="expiry-date"], input[type="text"][name="cvv"] {
  width: 30%;
}


h1 {
  margin-top: 0;
}

.price {
  color: #ff5722;
  font-size: 1.5em;
  font-weight: bold;
}

script.js

With my outdated knowledge, I accept payment through a form to collect their payment details before manually processing it with a payment provider. A sample JavaScript file might look like this:

// Get references to the form elements
const form = document.getElementById("payment-form");
const cardNumber = document.getElementById("card-number");
const expiryDate = document.getElementById("expiry-date");
const cvv = document.getElementById("cvv");
const submitButton = document.getElementById("submit-button");

// Handle form submission
form.addEventListener("submit", (event) => {
  event.preventDefault();

  // Disable the submit button to prevent multiple submissions
  submitButton.disabled = true;

  // Create an object to hold the form data
  const formData = {
    cardNumber: cardNumber.value,
    expiryDate: expiryDate.value,
    cvv: cvv.value,
  };

  // Perform client-side validation on the form data
  if (!validateFormData(formData)) {
    // If the data is invalid, re-enable the submit button and return
    submitButton.disabled = false;
    return;
  }

  // Send the form data to the server
  // The following is just an example and should not be used in a real-world scenario
  // as it lacks security measures and proper payment gateway integration
  fetch("/charge", {
    method: "POST",
    body: JSON.stringify(formData),
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((response) => response.json())
    .then((data) => {
      // Handle the server response
      if (data.success) {
        // Payment was successful
        alert("Payment successful!");
      } else {
        // Payment failed
        alert("Payment failed. Please try again.");
        submitButton.disabled = false;
      }
    })
    .catch((error) => {
      console.error(error);
      alert("An error occurred. Please try again.");
      submitButton.disabled = false;
    });
});

function validateFormData(data) {
  // Example validation checks
  if (!data.cardNumber || data.cardNumber.length !== 16) {
    alert("Please enter a valid card number.");
    return false;
  }
  if (!data.expiryDate || data.expiryDate.length !== 5) {
    alert("Please enter a valid expiry date in the format MM/YY.");
    return false;
  }
  if (!data.cvv || data.cvv.length !== 3) {
    alert("Please enter a valid CVV.");
    return false;
  }
  return true;
}

However, this old-school way of taking a payment creates several problems:

  • Security: Without proper security measures, sensitive information such as credit card numbers and personal information can be vulnerable to hacking and fraud.
  • Compliance: A business may face penalties and legal issues without compliance with regulations such as PCI-DSS.
  • Scalability: Processing payments using only HTML, CSS, and JavaScript may not be able to handle a high volume of transactions, especially during peak periods.
  • Maintenance: Maintaining and updating a custom payment system can be time-consuming and costly.
  • Limited features: Collecting payments using only HTML, CSS, and JavaScript may lack features such as recurring payments, subscriptions, refunds, and fraud detection.
  • Lack of integration with other tools: Vanilla HTML, CSS, and JavaScript do not have built-in integrations with other tools like accounting software, inventory management software, and shipping providers.

So a much simpler way, not to mention more seamless and functional, would be to abstract away all of the payment handlings to a third party. Especially so as customers will more often than not be more familiar with using these third-party payment gateways already.

Even if you are not selling a product, this can be great for websites that are selling some kind of freelance service or consultation, a trend we have been seeing in recent times. Allowing the customer to checkout with a familiar third-party payment gateway directly from your website will add greatly to the user experience of your service.

It’s a win-win for you and the customer. You program less and they receive more. So let’s dive in to find out how we can implement this into your own websites.

How to Integrate PayPal into Your Product Pages

Now that we know what we want to achieve, let’s get into action. I have broken down the process into 6 easy-to-follow steps. They are:

  1. Access PayPal’s developer tools to get your APIs.
  2. Set up a PayPal sandbox environment.
  3. Create and customize your PayPal button.
  4. Integrate your button into your current files.
  5. Test the integration using the PayPal sandbox environment.
  6. Go live and start accepting real payments.

We’ve got a lot to cover, so let’s dive right in and get started!

How to Access PayPal’s Developer Tools to Get Your APIs

Step 1 for integrating PayPal into your HTML/CSS/JS product pages is creating a PayPal account. This step is crucial as it will give you access to PayPal's developer tools and APIs, which are necessary for integrating PayPal into your product pages.

If you already have one, just hop straight to the PayPal developer tools.

To create a PayPal account, you'll need to visit the PayPal website and follow the on-screen instructions to sign up. You'll be asked to provide some personal and financial information, such as your name, email address, and credit card details.

Once you've completed the sign-up process, you'll be able to log in to your PayPal account and access the developer tools and APIs needed for integration. It's important to use a valid email address as you will receive important information and updates from PayPal.

Then, you can find the developer tools at the top right of your PayPal dashboard.

Image Developer tab at the top right of your PayPal dashboard

How to Set Up a PayPal Sandbox Environment

The next step is to create a PayPal sandbox environment.

What is that, you might ask?

Well, a sandbox environment is a testing environment that mimics the live PayPal environment. It allows you to test your integration before going live, which is a great feature from PayPal to ensure that everything is working as expected.

To set up a PayPal sandbox environment, you'll need to log in to your PayPal account and navigate to the developer dashboard. From there, you can create a new sandbox account by following the on-screen instructions.

Once the sandbox account is created, you'll be able to use it to test your integration by making test payments. You can use the sandbox account in parallel with your live account.

Image Check your URL to contain "sandbox"

It's important to test your integration thoroughly and ensure that everything is working as expected before going live.

How to Create and Customize Your PayPal Button

This step involves creating the button that will be placed on your product page, allowing customers to initiate the payment process.

One way to create a PayPal button is by using the PayPal Button Creation Tool, which provides a user-friendly interface for customizing your button. You can choose from 3 different checkout styles, available on PayPal’s website.

Image Types of smart buttons offered by PayPal

Navigate to business tools > PayPal Buttons > Get Started > Smart Buttons. This will bring you to the button customization interface. Adjust the stylings to your liking, then simply click on “Copy Code”.

Image PayPal's smart button customization interface

Here is an example of the code for a PayPal Smart Button. Then, we must update our previous files to remove the form input and insert the following code instead. We will be covering that in the next step. Before that, this is the snippet of what you get from PayPal’s Smart Buttons:

<div id="smart-button-container">
    <div style="text-align: center;">
        <div id="paypal-button-container"></div>
    </div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>
<script>
    function initPayPalButton() {
        paypal.Buttons({
            style: {
                shape: 'rect',
                color: 'gold',
                layout: 'vertical',
                label: 'paypal',
            },

            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [{"amount":{"currency_code": "USD", "value": 0.99}}]
                });
            },

            onApprove: function(data, actions) {
                return actions.order.capture().then(function(orderData) {

                    // Full available details
                    console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

                    // Show a success message within this page, for example:
                    const element = document.getElementById('paypal-button-container');
                    element.innerHTML = '';
                    element.innerHTML = '<h3>Thank you for your payment!</h3>';

                    // Or go to another URL:  actions.redirect('thank_you.html');

                });
            },

            onError: function(err) {
                console.log(err);
            }
        }).render('#paypal-button-container');
    }
    initPayPalButton();
</script>

Do note that you will have different fields for your own needs, so do customize your own button and reference the code for that, not from my tutorial.

There are also different button styles to choose from, so feel free to play around to find something that suits your style.

Now that we’re ready, let’s integrate this code into our current files.

How to Integrate Your Button into Your Current Files

With our button code fresh out of the box, let’s integrate this into our current files. Very simply, we just need to replace the HTML fields that we are not going to use, namely the form and replace it with the button we created.

To remain consistent with the programming style we used for the example, I am going to abstract away the JavaScript to the script.js file. That should give us the following files:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>MyProgrammingBook</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="product-container">
      <div class="product-image-container">
        <img src="myprogrammingbook.jpg" alt="MyProgrammingBook">
      </div>
      <div class="product-info-container">
        <h1>MyProgrammingBook</h1>
        <p class="price">$0.99</p>
        <p class="product-description">
          Want to make all of your code run at O(1) speed? Then let me introduce MyProgrammingBook! Written by the world's leading expert on algorithmic optimization (me), this book will teach you everything you need to know to make your code lightning fast. Plus, it comes with a free unicorn* to help you implement all the techniques you learn. Don't miss out on this once-in-a-lifetime opportunity!
        </p>
        <p>*Terms and Conditions Apply</p>
        <div id="smart-button-container">
          <div style="text-align: center;">
            <div id="paypal-button-container"></div>
          </div>
        </div>
        <script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>
        <script type="text/javascript" src="script.js"></script>
      </div>
    </div>
  </body>
</html>

style.css

* {
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

.product-container {
  max-width: 600px;
  height: 500px;
  overflow: hidden;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-wrap: wrap;
}

.product-image-container {
  width: 30%;
}

.product-info-container {
  width: 70%;
  padding-left: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

img {
  width: 100%;
  height: auto;
}

.product-info-container form {
  width: 100%;
  margin-top: 20px;
  align-self: flex-end;
}

h1 {
  margin-top: 0;
}

.price {
  color: #ff5722;
  font-size: 1.5em;
  font-weight: bold;
}

script.js

function initPayPalButton() {
  paypal.Buttons({
    style: {
      shape: 'rect',
      color: 'gold',
      layout: 'vertical',
      label: 'paypal',

    },

    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{"amount":{"currency_code":"USD","value":0.99}}]
      });
    },

    onApprove: function(data, actions) {
      return actions.order.capture().then(function(orderData) {

        // Full available details
        console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

        // Show a success message within this page, for example:
        const element = document.getElementById('paypal-button-container');
        element.innerHTML = '';
        element.innerHTML = '<h3>Thank you for your payment!</h3>';

        // Or go to another URL:  actions.redirect('thank_you.html');

      });
    },

    onError: function(err) {
      console.log(err);
    }
  }).render('#paypal-button-container');
}
initPayPalButton();

These files are going to give us the following slick product landing page:

Image My new landing page with PayPal's smart buttons

How to Test the Integration Using the PayPal Sandbox Environment

Before going live with your PayPal integration on your product page, it is important to test the integration to ensure that it is working correctly and to identify any issues.

One way to do this is by using the PayPal Sandbox environment that we discussed earlier.

To use the PayPal Sandbox with the account you created earlier, you will be given a set of Sandbox test accounts (buyer and seller) that you can use to test your integration.

With these Sandbox accounts set up, you will need to ensure your PayPal button code on your product page points to the Sandbox environment.

You can do this by checking that the URL in the PayPal button code redirects you to "https://www.sandbox.paypal.com" instead of "https://www.paypal.com".

Image Check your URL to contain "sandbox"

With your PayPal button code working, you can now test the integration by visiting your product page and clicking on the PayPal button. You will be taken to the PayPal Sandbox checkout page where you can enter your Sandbox test account credentials and simulate a purchase.

Once you've completed a test transaction, you can log in to your Sandbox account to view the transaction details and confirm that it was processed correctly.

How to Go Live and Start Accepting Real Payments

After successfully testing your PayPal integration in the Sandbox environment, you are now ready to go live and start accepting real payments on your product page.

Going live involves a few simple steps to ensure that your integration is set up correctly and ready to process real payments.

The first step is to update your PayPal button code on your product page to point to the live PayPal environment. Conversely to earlier, ensure that the URL in the PayPal button code redirects you to "https://www.paypal.com" instead of "https://www.sandbox.paypal.com".

Next, you will need to update your PayPal account settings to ensure that your account is set up to process live payments. This typically involves confirming your email address and phone number, as well as adding a valid payment method such as a bank card.

It is also important to ensure that your product page is fully functional and that any necessary information such as product details, prices, and shipping costs are accurate.

Finally, you should notify your customers that you are now accepting payments via PayPal, and provide them with clear instructions on how to complete a purchase.

With all these steps complete, you can now start accepting real payments via PayPal on your product page!

Where To Go From Here?

Now that you’re all up to speed with getting PayPal integrations up and running on your own websites, why would this be useful to you? Are there no easier ways to integrate payments into your website? Let me give you some context.

Personally, I thought that no-code tools were becoming the norm in recent times, thinking that I probably wouldn’t need to be coding any web pages in vanilla HTML, CSS, and JavaScript soon. But with the new wave of online startups, such as AI tools and data analytics software, revolving around making API requests from a simple user interface, I think the 3 big languages might make a bit of a comeback.

Wanting to start one of my own (so the story earlier wasn’t entirely fictitious…), I found myself coming back to the good old vanilla web development languages to get the job done. And they did so faster than no-code tools – like this simple sentence-length checker I programmed in under an hour.

So I wouldn’t forget about learning how to integrate features, such as this, into standard HTML, CSS, and JavaScript pages. Sometimes, when it comes to wanting to create a simple product or service page that gets the job done, you might want to rely on old ways with new integrations as your solution.

Wrapping Up and Conclusion

Let me give you a quick recap:

If you're looking to get a simple SaaS company going, then vanilla HTML, CSS, and JavaScript might be your best friends. When it comes to integrating PayPal into your product pages, it is important to remember a few key points to ensure a smooth and successful integration.

  • Firstly, it is essential to have a PayPal account and to be familiar with the PayPal Developer documentation.
  • Secondly, ensure that your HTML and CSS files are well structured and designed to match your product page.
  • Lastly, use the PayPal Sandbox environment for testing to ensure everything is spick and span before going live with real payments.

As a reminder, it is important to keep in mind that collecting payments through a form on your website is not a secure way of accepting payments, and it is recommended to use a payment gateway such as PayPal to ensure the security of your customer's sensitive information.

With these points in mind, you can now confidently set up PayPal on your product pages and start accepting payments securely and easily. I hope you enjoyed this tutorial, and if you did, don't hesitate to get in contact. Wishing you the best of luck selling your products to the masses!

]]> <![CDATA[ How to Use the Payment Request API in JavaScript ]]> https://www.freecodecamp.org/news/payment-request-api-javascript/ 66d45d98052ad259f07e4a5b Mon, 24 Oct 2022 22:40:51 +0000 By Atta ✨

The Payment Request API provides a cross-browser standard that lets you collect payments, addresses, and contact information from your customers. You can then use this info to process their order.

It also facilitates the exchange of this information between the browser and the website. The fundamental idea behind this is to improve the user's online shopping experience by making it easy for users to store payment and contact information in the browser.

Payment Request API Browser Support

The Payment Request API is still in active development and is only supported by the last few versions of modern browsers.

Before you start making a payment request, you should feature detect to ensure that the API is supported by the browser:

if (window.PaymentRequest) {
  // Yes, we can use the API
} else {
  // No, fallback to the checkout page
  window.location.href = '/checkout'
}

Note that you can only use the Payment Request API on sites serving over https.

Now let's see how this helpful API works.

How to Create the PaymentRequest Object

A payment request is always started by creating a new object of PaymentRequest - using the PaymentRequest() constructor. The constructor takes two mandatory parameters and one optional parameter:

  • paymentMethods defines which forms of payment are accepted. For example, you may only accept Visa and MasterCard credit cards.
  • paymentDetails contains the total payment amount due, taxes, shipping cost, display items, and so on.
  • options is an optional argument used to request additional details from the user, such as name, email, phone, and so on.

Next we'll create a new payment request with only the required parameters.

How to use the paymentMethods parameter

const paymentMethods = [
  {
    supportedMethods: ['basic-card']
  }
]

const paymentDetails = {
  total: {
    label: 'Total Amount',
    amount: {
      currency: 'USD',
      value: 8.49
    }
  }
}

const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails)

Notice the supportedMethods parameter in the paymentMethods object. When it is set to basic-card, both debit and credit cards of all networks will be accepted.

But you can limit the supported networks and types of cards. For example, with the following only Visa, MasterCard, and Discover credit cards are accepted:

const paymentMethods = [
  {
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard', 'discover'],
      supportedTypes: ['credit']
    }
  }
]
// ...

How to use the paymentDetails object

The second parameter passed to the PaymentRequest constructor is the payment details object. It contains the total of the order and an optional array of display items. The total parameter must include a label parameter and an amount parameter with currency and value.

You can also add additional display items to provide a high-level breakdown of the total:

const paymentDetails = {
  total: {
    label: 'Total Amount',
    amount: {
      currency: 'USD',
      value: 8.49
    }
  },
  displayItems: [
    {
      label: '15% Discount',
      amount: {
        currency: 'USD',
        value: -1.49
      }
    },
    {
      label: 'Tax',
      amount: {
        currency: 'USD',
        value: 0.79
      }
    }
  ]
}

The displayItems parameter is not meant to display a long list of items. Since space is limited for the browser's payment UI on mobile devices, you should use this parameter to display only top-level fields such as subtotal, discount, tax, shipping cost, and so on.

Keep in mind that the PaymentRequest API does not perform any calculations. So your web application is responsible for providing the pre-calculated total amount.

How to use the options argument to request additional details

You can use the third optional parameter to request additional information from the user, such as name, email address, and phone number:

// ...
const options = {
  requestPayerName: true,
  requestPayerPhone: true,
  requestPayerEmail: true
}

const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails, options)

By default, all of these values are false, but adding any of them to the options object with a value true will result in an extra step in the payment UI. If the user has already stored these details in the browser, they will be pre-populated.

How to Display the Payment UI

After creating a PaymentRequest object, you must call the show() method to display the payment request UI to the user.

The show() method returns a promise that resolves with a PaymentResponse object if the user has successfully filled in the details. If there is an error or the user closes the UI, the promise rejects.

// ...
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails, options)

paymentRequest
  .show()
  .then(paymentResponse => {
    // close the payment UI
    paymentResponse.complete().then(() => {
      // TODO: call REST API to process the payment at the backend server
      // with the data from `paymentResponse`.
    })
  })
  .catch(err => {
    // user closed the UI or the API threw an error
    console.log('Error:', err)
  })

With the above code, the browser will show the payment UI to the user. Once the user has filled in the details and clicked on the 'Pay' button, you will receive a PaymentResponse object in the show() promise.

The payment request UI is closed immediately when you call the PaymentResponse.complete() method. This method returns a new promise so that you can call the backend server with the information collected and process the payment.

Payment Request UI

If you want to call the backend server to process the payment while the payment UI is showing a spinner, you can delay the call to complete().

Let's create a mock function for payment processing with the backend server. It takes paymentResponse as a parameter and returns a promise after 1.5 seconds that resolves to a JSON object:

const processPaymentWithServer = paymentResponse => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ status: true })
    }, 1500)
  })
}

//...
paymentRequest
  .show()
  .then(paymentResponse => {
    processPaymentWithServer(paymentResponse).then(data => {
      if (data.status) {
        paymentResponse.complete('success')
      } else {
        paymentResponse.complete('fail')
      }
    })
  })
  .catch(err => {
    console.log('Error:', err)
  })

In the example above, the browser payment UI will show a processing screen until the promise returned by the processPaymentWithServer() method is settled. We also used 'success' and 'fail' strings to tell the browser about the transaction outcome. The browser will show an error message to the user if you call complete('fail').

How to Cancel a Payment Request

If you want to cancel the payment request due to no activity or any other reason, you can use the PaymentRequest.abort() method. It immediately closes the payment request UI and rejects the show() promise.

// ...
setTimeout(() => {
  paymentRequest
    .abort()
    .then(() => {
      // aborted payment request
      console.log('Payment request aborted due to no activity.')
    })
    .catch(err => {
      // error while aborting
      console.log('abort() Error: ', err)
    })
}, 5000)

Conclusion

That's the end of a quick introduction to the JavaScript Payment Request API. It provides a browser-based method to collect customer payment and contact information that can be sent to the backend server to process the payment.

The aim is to reduce the number of steps in completing an online payment. It makes the whole checkout process smoother by remembering the user's preferred way of paying for goods and services.

If you want to learn more about the Payment Request API, here is a good resource that discusses the main concepts and usage of the API.

Thank you for reading!

If you want to learn more about JavaScript, you may want to check out my personal blog, where I have published over 235 tutorials on JavaScript objects, arrays, strings, Web APIs, and more.

I am also the founder of AcquireBase. You can follow me on Twitter to receive updates when I publish new tutorials or share side projects.

]]> <![CDATA[ How to Accept Payments with React and Stripe ]]> https://www.freecodecamp.org/news/react-stripe-payments/ 66d037e964be048ac359a330 Fri, 16 Sep 2022 18:55:26 +0000 Payments are an essential part of any online business. But the process of setting up those payments can be incredibly complex at times.

To accept payments, developers were traditionally required to set up code both on the client and server. This was in addition to learning complex third-party APIs which required parsing through large amounts of documentation.

Fortunately tools like Stripe Checkout make handling purchases on the web and mobile devices easier than ever before.

In this tutorial, you'll take a look at how to set up Stripe Checkout to accept credit card, Apple Pay, and Google Pay payments in our React apps.

What is Stripe Checkout?

Image Example Stripe Checkout page

Stripe Checkout is an all-in-one tool that not only streamlines and simplifies the process of checking out for us as developers. It also gives us a user interface for our customers to use that's optimized for performance and usability.

When using Stripe checkout over alternative options such as Stripe Elements, the benefit is that you have to write far less code to achieve the same end result. Additionally, you get features such as automatic translations for global users in their language.

You also get the ability to customize this user interface without having to write a single React component.

Stripe Checkout is Hosted on Stripe

Be aware that Stripe Checkout is hosted on Stripe's servers and it involves taking the user to checkout.stripe.com. This, however, shouldn't be viewed as a downside.

Because trust is such an important part of the checkout process, it's often a large benefit to know that Stripe is handling the payment. As a result, customers can be far more secure and confident in the payment process.

In short, it's a wise decision to use a pre-made solution such as Stripe Checkout, considering it will not only mean less work for you, but will also create higher trust in your product.

How to Setup Stripe Checkout

  1. Go to stripe.com and create a free account.
  2. You will be navigated to your dashboard at dashboard.stripe.com

In the top right corner of your dashboard, make sure to turn "Test Mode" on.

Image Make sure you are in test mode

  1. Create a new product in Stripe.

The fastest way to get there is to search for "Create Product" in the search and click on the "Create a Product" result.

Image Go to "Create a Product"

  1. Add your product information, including its name, description and image.

Image Provide your product information

  1. On the same page, add your price information for that product.

In this example, we will choose a recurring (monthly) pricing model. Be aware that you can select a one-time payment for your products as well.

Image Select your pricing details

  1. Save your new product and get your price id

After your product has been created, if you go down to the pricing section, you will see an id beginning with price_ next to your price. You will need to this create a checkout session with Stripe.

Image Grab the created price id for your product

  1. Get your publishable key.

The last step is to get the publishable (test) key from Stripe. We also need this for creating a checkout session with Stripe.

This time, we can search for "api key" and choose the first result.

Image Search for "api key"

On the API keys page (once again, in test mode), you will grab the publishable key that begins with pk_test

Image Grab the publishable key, under "token"

How to Add Stripe Checkout to React

Now that we have everything we need to setup Stripe Checkout with React, namely the price id and the publishable key, we can create our React app.

For this tutorial, I will be using Next.js, which is a React framework. You can create your own Next.js app instantly using StackBlitz by going to next.new.

We'll begin by creating a button to check out on our homepage (pages/index.js). When a user clicks on this button, Stripe will redirect our user to the checkout page.

// pages/index.js

export default function Home() {
  return <button>Checkout</button>;
}

To communicate with Stripe, we need to install the following package with NPM or Yarn:

npm install @stripe/stripe-js

Once installed, we will create a new folder and file within it: lib/getStripe.js in the root of our project.

In this file, we will handle loading Stripe only once. To do so, we pass Stripe our publishable key.

import { loadStripe } from '@stripe/stripe-js';

let stripePromise;
const getStripe = () => {
  if (!stripePromise) {
    stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
  }
  return stripePromise;
};

export default getStripe;

Here, we are loading the publishable key from a .env file. Make sure to create that in the root of your project with the following two values, for your publishable key and price key:

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY='pk_test_my_key'

NEXT_PUBLIC_STRIPE_PRICE_ID='price_my_id'

Once you have added your environment variables, we'll head back to the home page and create a function called handleCheckout.

It will first call getStripe which we need to await because this function returns a promise. Make sure to import our getStripe function from the lib folder.

import getStripe from '../lib/getStripe';

export default function Home() {
  async function handleCheckout() {
    const stripe = await getStripe();
    const { error } = await stripe.redirectToCheckout({
      lineItems: [
        {
          price: process.env.NEXT_PUBLIC_STRIPE_PRICE_ID,
          quantity: 1,
        },
      ],
      mode: 'subscription',
      successUrl: `http://localhost:3000/success`,
      cancelUrl: `http://localhost:3000/cancel`,
      customerEmail: 'customer@email.com',
    });
    console.warn(error.message);
  }

  return <button onClick={handleCheckout}>Checkout</button>;
}

Then we will call stripe.redirectToCheckout, which is also a function we need to await.

To this function will pass an object which includes four main properties:

  1. lineItems: an array of objects including the products and quantity of those products in our order.
  2. mode: whether our transaction is recurring or one-time
  3. successUrl: the page the user will be navigated to upon successful purchase (feel free to set this up on your own)
  4. cancelUrl: the page the user will be navigated to upon successful purchase (again, easy to setup)

There are many more properties that you can pass to this object, such as passing in the customerEmail to pre-populate the user's email input.

How to Test Stripe Checkout

Once we hit our checkout button, we should be directed to a complete page which in test mode will allow us to provide a test credit card number to verify the checkout process (repeat the number 4242 repeating for all fields).

If our user cancels and attempts to go back, they will be taken to the cancelUrl we specified. Otherwise, if they successfully complete this process, they will be taken to the successUrl.

Once you are ready to go live and accept your customers' money, all you need to do is swap out your test publishable key with a non-test one.

Hopefully that gave you a good understanding of how to get started with Stripe Checkout and how to more easily accept payments in your React apps!

You can find the final code for this example here: https://stackblitz.com/edit/nextjs-4ts4y4?file=pages%2Findex.js

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to join the React Bootcamp Click to get started

]]> <![CDATA[ How to Set Up a Payment Gateway in Next.js and React with Razorpay and TailwindCSS ]]> https://www.freecodecamp.org/news/integrate-a-payment-gateway-in-next-js-and-react-with-razorpay-and-tailwindcss/ 66d4601fa326133d12440a33 Tue, 21 Dec 2021 18:16:10 +0000 By Manu Arora

If you have an e-commerce application, a payment gateway lets you process payments on your website on the fly.

With all the modern payment gateway solutions available these days, there are many ways you can integrate payments and charge your users for your product or services.

In this tutorial, we are going to build a landing page that lets the end user purchase products from a web application. The page looks like this:

Image

Live Demo: Integrate Payments Source Code: Integrate Payments Source Code

Some of the popular payment gateways that are available are:

Today, we are going to learn how to integrate Razorpay with a Next.js (React) application and understand how the flow actually works.

Tech Stack

For our Stack, we are going to use the following technologies:

  • Next.js - A framework for React that gives access to serverless functions and React architecture.
  • TailwindCSS - A utility-based CSS framework for easy styling
  • Razorpay - A payment gateway system that lets users access payments.
  • Vercel - For hosting our Next.js application (if not already hosted)
  • Tailwind Master Kit - For easily accessible Tailwind Components

Project Setup

If you already have a project, then you can directly skip to the integration part of the article. If not, let's get started by creating a Git repository and hosting our project on Vercel.

How to Set Up a Next.js Repository and Website

First, head over to Vercel and create a hobby account for yourself. (If you're going to use it for a commercial project, make sure you buy their plan. Hobby accounts are just for testing and creating playgrounds.)

Once the account is created, click on New Project Screenshot-2021-12-21-at-11.56.47-AM

Then, select Next.js from the available options and create a Git Repository on the platform itself. Screenshot-2021-12-21-at-11.57.31-AM

Your site will be deployed within seconds and you will get a URL for the live website.

How to Set Up TailwindCSS

Now since the website is setup, you can directly go to GitHub, clone the repository, to run it in your local environment. For that, follow these simple steps:

  • Go to GitHub and find your newly created repository
  • Click on the code section and copy the repository URL.
  • Open your terminal on the desktop and write git clone <repo_name>. This will clone the repository in your local environment so that you can start working.
  • Once the repository is cloned/copied in your local environment, open the project in your favourite code editor (VSCode is the best in my opinion).
  • In the terminal, open the location of the application and write npm install. This will install all the related node modules.
  • You can start the local development server by writing npm run dev.

Now the project is up and running in your local environment. To access your website locally, open localhost:3000 in your browser and you will be able to see the boilerplate website already there for you.

Setting up tailwind is very simple. Their documentation makes it even simpler. Check out their docs for reference and more on TailwindCSS as a framework.

To setup Tailwind on your local environment, follow the below steps:

  • npm install -D tailwindcss postcss autoprefixer - This will install TailwindCSS along with other important dependencies for compiling and running your Tailwind code.
  • npx tailwindcss init -p - This will initialize a tailwind.config.js file that is just an object which can be manipulated according to the user's needs.
  • In the tailwind.config.js file, paste the below code which basically tells Tailwind to compile the code present in the /pages and /components directories.
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  • Open the globals.css file present in the /styles directory and paste the following code. These code snippets import all the Tailwind related setup code:
    @tailwind base;
@tailwind components;
@tailwind utilities;
  • Restart your website by quitting the terminal and writing npm run dev on the terminal. Now you're ready to harness the power of TailwindCSS.

Now that Tailwind and our website are setup, let's jump right into developing the page and integrating payments.

Landing Page Development

The landing page that we are going to use is directly taken from the Tailwind Master Kit that lets you access components built with TailwindCSS.

Image

Let's break down the code and understand it better.

Navbar.js

import React from "react";
export const Navbar = () => {
  return (
    <div className="flex flex-row items-center  justify-between px-20 py-10">
      <div className="flex flex-row items-center">
        <h1 className="font-bold italic text-2xl text-white mr-10">Payments</h1>
        <ul className="flex flex-row space-x-10">
          <li>
            <a
              href="#"
              className="text-gray-400 text-sm tracking-wide font-light"
            >
              Pricing
            </a>
          </li>
          <li>
            <a
              href="#"
              className="text-gray-400 text-sm tracking-wide font-light"
            >
              Product
            </a>
          </li>
          <li>
            <a
              href="#"
              className="text-gray-400 text-sm tracking-wide font-light"
            >
              Team
            </a>
          </li>
          <li>
            <a
              href="#"
              className="text-gray-400 text-sm tracking-wide font-light"
            >
              Sales
            </a>
          </li>
        </ul>
      </div>
      <div className="flex flex-row space-x-10 items-center">
        <a href="#" className="text-gray-400 text-sm tracking-wide font-light">
          Sales
        </a>
        <button className="bg-[#272A30] text-gray-300 px-8 text-sm py-2 rounded-md shadow-xl drop-shadow-2xl">
          Sign in
        </button>
      </div>
    </div>
  );
};

Building the Navbar is simple. It's a Flexbox container with links and unordered list items aligned in a row.

The button, however, is interesting. It used the new TailwindCSS drop shadow class which drops a background shadow. (We can also use colored shadows in TailwindCSS 3.0+ versions - pretty cool.)

Hero.js

const Hero = ({ onClick }) => {
  return (
    <div className="relative z-10 flex flex-col md:flex-row mt-10 items-center  max-w-6xl justify-evenly mx-auto">
      <div className="md:w-1/3 mb-20 md:mb-0 mx-10">
        <h1 className=" text-white font-bold text-5xl mb-10">
          Integrate{" "}
          <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
            payments
          </span>{" "}
          in less than 10 minutes.
        </h1>
        <p className="text-sm text-gray-300 font-light tracking-wide w-[300px] mb-10">
          Learn how to integrate a Payment Gateway with your Next.js and React
          application.
        </p>
        <div className="bg-gradient-to-r from-[#3e4044] to-[#1D2328] p-[1px] rounded-md mb-4">
          <button
            onClick={onClick}
            className="bg-gradient-to-r from-[#2E3137] to-[#1D2328] rounded-md w-full py-4 shadow-xl drop-shadow-2xl text-gray-300 font-bold"
          >
            Purchase Now!
          </button>
        </div>
        <div className="bg-gradient-to-r from-[#3e4044] to-[#1D2328] p-[1px] rounded-md">
          <button className="bg-gradient-to-r from-[#1D2328] to-[#1D2328] rounded-md w-full py-4 shadow-sm drop-shadow-sm text-gray-400 font-light">
            Read Blog
          </button>
        </div>
      </div>
      {/* <div className="w-2/3 bg-white flex-shrink-0  relative"> */}
      <img
        className="w-full md:w-[36rem] h-full"
        alt="stripe payment from undraw"
        src="/payments.svg"
      />
      {/* </div> */}
    </div>
  );
};

The hero section contains our Purchase Now button which will initialise the payments for us (we'll look at the implementation in the next section).

The layout contains two sections: the Left section contains all the text and the Right Section contains a large image (taken from Undraw, a free and open source illustrations website).

The onClick action on the button is important since it is responsible for triggering the action that will initialise the payments. The onClick is nothing but a callback that calls the function which is passed down as a prop to the component.

That's pretty much it for the UI part. Let's jump into the payments section and understand how to setup a developer account on Razorpay and use their SDK to make payments on our website.

How to Set Up a Razorpay Account and Retrieve API Keys

Image

For integrating payments (that is, receiving payments on our website), we need to have two things:

  1. A Razorpay account
  2. A set of API Keys that lets us access their services.

Let's create an account and retrieve the API keys.

  • Head over to Razorpay and sign up for an account
  • After signing up you can access the Dashboard where you will find all the necessary details that are required for integrating payments. Screenshot-2021-12-21-at-12.28.44-PM
  • For now, we will be in Test mode so that we can test our payments before we actually go live.
  • In the left panel, scroll down to Settings - There you will find the API keys section along with the configurations you can make to your payments UI. Screenshot-2021-12-21-at-12.30.10-PM
  • Since you will be doing it for the first time, click on Generate API Keys and the download will automatically start. The downloaded file contains Razorpay API Key and Razorpay API Secret.

Now you're all set with the API keys and setting up the platform. Let's jump directly into how to actually trigger the Razorpay API and make payments.

How to Integrate Payments with Razorpay

For our payments to be integrated, we need a button click that actually initializes the Razorpay checkout module. For this, we already have a button Purchase Now the calls a function onClick that is nothing but a callback. Let's see the actual implementation and understand the code behind it.

To initialise a payment, we need to add Razorpay's checkout script into our code. In React, we can simply do it using the document.body.appendChild(script) code.

initializeRazorpay()

const initializeRazorpay = () => {
    return new Promise((resolve) => {
      const script = document.createElement("script");
      script.src = "https://checkout.razorpay.com/v1/checkout.js";

      script.onload = () => {
        resolve(true);
      };
      script.onerror = () => {
        resolve(false);
      };

      document.body.appendChild(script);
    });
  };

Now, we are using a promise to achieve this task. We do this because later on, we are going to use the initializeRazorpay() in such a way that every time Purchase Now is clicked, the payments are initialised. We simply have to await this function to create and append a script into the DOM.

Let's look at the main function which is responsible for creating and initializing payments on the page.

makePayment() function

const makePayment = async () => {
    const res = await initializeRazorpay();

    if (!res) {
      alert("Razorpay SDK Failed to load");
      return;
    }

    // Make API call to the serverless API
    const data = await fetch("/api/razorpay", { method: "POST" }).then((t) =>
      t.json()
    );
    console.log(data);
    var options = {
      key: process.env.RAZORPAY_KEY, // Enter the Key ID generated from the Dashboard
      name: "Manu Arora Pvt Ltd",
      currency: data.currency,
      amount: data.amount,
      order_id: data.id,
      description: "Thankyou for your test donation",
      image: "https://manuarora.in/logo.png",
      handler: function (response) {
        // Validate payment at server - using webhooks is a better idea.
        alert(response.razorpay_payment_id);
        alert(response.razorpay_order_id);
        alert(response.razorpay_signature);
      },
      prefill: {
        name: "Manu Arora",
        email: "manuarorawork@gmail.com",
        contact: "9999999999",
      },
    };

    const paymentObject = new window.Razorpay(options);
    paymentObject.open();
  };

The makePayment() method is responsible for initialising and opening the Razorpay popup.

The makePayment() function does the following operations:

  1. Initializes the Razorpay Checkout script and appends it to the body. This was handled by the initializeRazorpay method as we saw earlier.
  2. Makes a call to the /api/razorpay.js serverless function. (This we will talk about in a minute).

  3. Creates an Object which has 4 important keys:

    1. currency - The currency in which we want the transaction to happen
    2. amount - The amount in which the transaction has to happen. Note that it has to be the smallest denomination. Example if you're from the USA, then the amount will be in cents.
    3. order_id - This will be generated from the serverless API which we are going to talk about in a minute.
    4. handler - When the payments are successful, this callback function is called.

  4. Finally, a paymentObject is created with the options passed down as the parameters to the window.Razorpay method. This is available to us because of the checkout script that we looked at before.

We looked at the above makePayment() method and saw a line of code which is:

const data = await fetch("/api/razorpay", { method: "POST" }).then((t) =>
      t.json()
    );

But what does it mean?

Next.js allows us to access serverless functions with the help of apis that are available to us in the api folder within Next.js.

The serverless APIs are nothing but Lambda Functions that act as a back-end for our JAMStack applications. Here, we can write our back-end related code easily without having to create a separate back-end.

Here, we need serverless because the order_id that we saw in the makePayments() code is unique and has to be generated at the backend. Not only this but the amount and currency also comes from the backend. This is to ensure that no one can manipulate the amount and the currency and the portal is secure for payments.

Let's have a look at the serverless API code and understand it better.

/api/razorpay.js

const Razorpay = require("razorpay");
const shortid = require("shortid");

export default async function handler(req, res) {
  if (req.method === "POST") {
    // Initialize razorpay object
    const razorpay = new Razorpay({
      key_id: process.env.RAZORPAY_KEY,
      key_secret: process.env.RAZORPAY_SECRET,
    });

    // Create an order -> generate the OrderID -> Send it to the Front-end
    const payment_capture = 1;
    const amount = 499;
    const currency = "INR";
    const options = {
      amount: (amount * 100).toString(),
      currency,
      receipt: shortid.generate(),
      payment_capture,
    };

    try {
      const response = await razorpay.orders.create(options);
      res.status(200).json({
        id: response.id,
        currency: response.currency,
        amount: response.amount,
      });
    } catch (err) {
      console.log(err);
      res.status(400).json(err);
    }
  } else {
    // Handle any other HTTP method
  }
}

This of razorpay.js as your route which leads to /api/razorpay. Every file you create in the API folder becomes a serverless route. Just like we create APIs in the back-end, we create files here in the APIs folder which becomes a route for us.

For example: let's say you create a file in the /api folder named posts.js. So the route will become /api/posts which can return anything you want depending upon the use case.

For our case, we need to make a POST request to our back-end that will create an order_id for us along with amount and currency that can be returned to the front-end for making payments.

Let's understand the flow for this API.

  1. First we need to install the razorpay module along with shortid for generating short unique ids. To do that, head over to your terminal and write npm install razorpay and npm install shortid
  2. Now, to access a POST request, we check the request object and access the method by using the below snippet:
export default async function handler(req, res) {
  if (req.method === "POST") {
    // Initialize razorpay object
    const razorpay = new Razorpay({
      key_id: process.env.RAZORPAY_KEY,
      key_secret: process.env.RAZORPAY_SECRET,
    });

    // rest of the code...
}

  1. Here, request.method checks for the method. If the method is POST we go ahead and initialize the Razorpay object.

  2. The Razorpay object takes in 2 parameters: key_id and key_secret. Remember when we downloaded the keys from Razorpay dashboard? Let's put them to use.

  3. Open/create the .env file in your folder structure's root and paste the following code:

RAZORPAY_KEY=YOUR_KEY_HERE
RAZORPAY_SECRET=YOUR_SECRET_HERE

Here, you can plug in your API key and secret and you will be good to go.

Note: Make sure you restart your development server – otherwise the changes won't be reflected.

Once the razorpay object is setup, it takes in three important options: receipt, amount and currency.

const payment_capture = 1;
    const amount = 499;
    const currency = "INR";
const options = {
      amount: (amount * 100).toString(),
      currency,
      receipt: shortid.generate(),
    };

Note that amount and currency are being declared in our back-end so that there's no way for attackers to tamper with it.

Once the options are setup, we can create orders with Razorpay's _razorpay_._orders_.create(options) method.

try {
      const response = await razorpay.orders.create(options);
      res.status(200).json({
        id: response.id,
        currency: response.currency,
        amount: response.amount,
      });
    } catch (err) {
      console.log(err);
      res.status(400).json(err);
    }

Here, we simply await the create() method provided by Razorpay. When the create method is successful, we get an id which is nothing but the order_id that we need to supply to the front-end in order to generate unique payments.

Once everything is successful, we send a 200 response with id, currency and amount fields. This is all what is required by the front-end to process payments.

How to Make Payments with Razorpay

Image

Once everything is integrated and is in place, we can start using Razorpay's charging methods – there are various options available. With this, you can start charging for your services and products by simply accepting payments on your website.

The whole popup is customisable and can be edited directly from Razorpay's dashboard portal.

Since you're in Test mode, to start using their services in production, you need to complete their Identification process by submitting your proof documents and simply toggle between test mode and live mode.

That's all you need to do from the coding side to make the transition from test to live.

Environment Variables

To make sure that our changes are reflected in our live production website, we need to add the same environment variables that we added in the code on the Vercel platform as well.

For that:

  1. Head over to Vercel and open your project
  2. Click on settings
  3. Click on environment variables.
  4. You will get 2 input fields - Name and Value.
  5. First, enter RAZORPAY_KEY and add the API key
  6. Second, enter RAZORPAY_SECRET and add the secret value
  7. Redeploy the website and you will be able to make payments in the live environment as well.

Live Demo and Source Code

The entire source code for the application can be found here.

The live demo of the website is here.

Conclusion

Integrating payments is easy, thanks to Razorpay's excellent documentation that is easy to understand.

I enjoyed coding this website and integrating payments. You can also see a snippet of the code at my website: Manu Arora's Code Snippets

If you liked this blog, try implementing it in your own website so you can reach out to your end-users and make payments an easy task for yourself.

If you'd like to give any feedback, reach out to me at my Twitter handle or visit my Website

Also thanks to Tailwind Master Kit for the beautiful Landing Page UI.

Happy Coding. :)

]]> <![CDATA[ How to Set Up Serverless Online Payments with Netlify and Stripe ]]> https://www.freecodecamp.org/news/serverless-online-payments/ 66d45d9ccc7f04d2549a3728 Wed, 17 Nov 2021 20:54:10 +0000 By Alain Perkaz

One of the first steps many young startups take is setting up a static web page, perhaps with an email newsletter, to help them build an audience.

As the weeks go by and the MVP is getting further along, the subject of how to handle payments will eventually emerge.

From one-time payments to SaaS subscriptions, supporting online payments can be daunting and time-consuming. This post will introduce you to an easy way to process online payments with Stripe, without any extra infrastructure other than a static web page.

You don't need a custom backend to store the payment information, or cron jobs to send invoices, and there's no need to track customers in a separate database. This is perfect if you are a single-founder or early-stage startup that wants to validate the idea without creating a custom solution.

Sounds good? Let's dive in! 🤿

High-level overview of the project

For the sake of this article, we'll define an early-stage startup use case, where this kind of serverless online payment setup will bring the most value (low cost and fast to implement).

Let's imagine our startup idea is to self-publish a book. As the book is being finalized, we would like to open the lifetime access to the book as a pre-sale.

We will need a way to process payments for lifetime access to the book. For this, we'll need a payment processor and perhaps a way to run some logic away from the client (for example, leveraging the payment processor's API).

Payment processor

There are plenty of payment processors available, each with different terms, support for payment methods, and public APIs. For our serverless online payment processor, we'll use Stripe. I chose to use Stripe for two reasons:

First, Stripe is an industry-leading payment processor with an excellent API. Their API is extensively documented, and they offer integration SDKs for many languages (JS included). Setting it up is entirely free, and you only pay a small commission per processed transaction.

Second, Stripe offers Stripe Checkout, a free product specifically built to boost conversions and support various payment options. It's dead-simple to integrate and comes with a great UI.

What about the server?

To be clear, Stripe requires some server-side code to generate a session once a user inputs their payment data. The session is available to the developer to perform payment-related operations (without exposing the sensitive payment details).

Before you get really upset with me, let me clarify that we won't need to set up a dedicated server 😅. It may seem a bit contradictory, but Stripe requires that some of the interaction code is in a server-like environment (serverless computing to the rescue!).

Luckily for us, this is 2021, and there are quite a few options to execute on-demand server-side code. Most cloud providers offer this functionality (AWS lambdas, Google Cloud cloud functions, Azure functions…you name it).

Since our startup already has a web page, we'll use Netlify functions. It will allow us to run the server-side code with almost no extra configuration, and it plays nicely with the existing web page statics.

The paradigm of combining static web assets with on-demand serverless functions is part of the JAM Stack (we'll leave that for another post). Keep reading for the detailed instruction on how to set up serverless payments.

Image High-level schema of the solution

Step-by-step project setup

Great, now that you have a clear picture of the problem space and the tools we'll use to build our solution, let's build it. 🛠

The complete code example is available at https://github.com/aperkaz/serverless-payments.

How to set up Netlify

First, create a Netlify account (if you don't have one already). The free tier is enough for moderate usage, so no need to worry about that.

Netlify provides CI/CD for automated deployments of our webpage and serverless functions by connecting to a Git repo in Github / Gitlab / Bitbucket. So, let's create a repo in one of those providers with your website assets.

Next, install the Netlify CLI. It will ask you some questions and request access to your Netlify and Git repo provider (GitHub in my case).

Image Installing the CLI with npm install netlify-cli -g

At this point, we can push to the repository’s main / master branch, and Netlify will automatically deploy. You can run netlify open in the console to open Netlify’s admin panel, and visit the deployed URL.

Image

Excellent, with the auto-deploy ready, now let's set up Stripe. 💸

How to set up Stripe

Create an account in Stripe, validate the email, and sign in. Then, generate a set of API keys (Secret key and Publishable key).

You have to be careful with those keys and never commit the Secret key in the code. Since we will need it in our server-side code, we'll keep it as an environment variable.

# Create a new env variable in Netlify
netlify env:set STRIPE_SECRET "sk_****"

# We can access it on our server-side JS code by:
process.env.STRIPE_SECRET

For the sake of this tutorial, we will use the example API keys, but feel free to use your own. If you use your keys, you will need to add products and prices (documentation).

How to add the serverless functions

Hang on tight – we are almost there! We only need the server-side code to create Stripe Checkout sessions and complete our demo.

First, to make our function accessible from https://serverless-payments.netlify.app/api/stripe, we need to add some configurations. Let's start by creating the netlify.toml file, on the root of our repo.

[build]
  command = "# no build command"
  functions = "netlify/functions"
  publish = "."

[[redirects]]
  from = '/api/*'
  to = '/.netlify/functions/:splat'
  status = 200

Then, we can add the session creator function. It’s explained here.

// netlify/function/stripe.js

const stripe = require("stripe")(process.env.STRIPE_SECRET);

exports.handler = async (event, context) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    line_items: [
      {
        price_data: {
          currency: "usd",
          product_data: {
            name: "T-shirt",
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: "payment",
    success_url: "https://serverless-payments.netlify.app/success",
    cancel_url: "https://serverless-payments.netlify.app/cancel",
  });
  return {
    statusCode: 200,
    body: JSON.stringify({
      id: session.id,
    }),
  };
};

Now we can call the serverless functions from our JS body with fetch("/api/stripe"). It will scale depending on the load and you only paid for the invocations. Then it will be deployed on every push to main. Sweet! 🍬

For the sake of brevity, I skipped the remaining code in the HTML files that handles the Stripe Checkout callbacks. The code is available here.

The complete example is available at https://serverless-payments.netlify.app . You can test a successful payment flow by using 4242 4242 4242 4242 as a credit card number.

Image Stripe Checkout in all its glory, accessible from [our page](https://serverless-payments.netlify.app" rel="noreferrer nofollow noopener)

Conclusion

Online payments are critical to many online businesses but are often implemented in a rush or are over-engineered. The solution presented above applies to single-page applications, so you may not need a fully-fledged server for handling payments just yet. 🙂

I hope this article helps shed some light on adding payment processing to your existing web pages easily. Sell your product quickly and make customers happy!

]]> <![CDATA[ P2P Definition ]]> https://www.freecodecamp.org/news/p2p-definition/ 66c35c73c7095d76345eaff4 Tue, 06 Apr 2021 09:03:00 +0000 P2P, or peer-to-peer, is a general term that describes a network or form of communication where two devices communicate directly.

Usually when you visit a website, your browser sends a request to a server. The server then sends you back all the files (HTML, CSS, images, and so on) for your browser to render the website.

But if the server has a problem, you wouldn't be able to get all those files, and can't visit the site.

In a peer-to-peer network, a bunch of computers connect to each other and all act as small servers. If one computer in a peer-to-peer network goes offline, the other computers can fill in for it.

Several years ago, Spotify was one of the largest peer-to-peer networks. Back then, they leveraged P2P networking as a way to provide their service using their customer's bandwith. Now Spotify uses central servers that they control.

P2P can also be applied to other things like payments. In this context, it means that the payment gets sent directly to the other person. But the payment might still pass through a company's central servers, unlike a P2P network.

For example, if you send $20 to your friend with a P2P payments app like Venmo, they will receive the money instantly. Your friend can then transfer the money from Venmo to their bank account, or send it to someone else.

But if you use a traditional money wiring service, you will need your friend's bank information to send the money directly to their account. Also, the transfer might have fees, and take several days.

]]> <![CDATA[ What is NFC? Near Field Communication Uses, Chips, Tags, and Readers Explained ]]> https://www.freecodecamp.org/news/what-is-nfc-near-field-communication-uses-chips-tags-and-readers-explained/ 66ac883f33a54a9b1a44793a Tue, 03 Nov 2020 18:00:12 +0000 NFC is everywhere these days. You've probably seen it in your phone settings, or heard about it online.

While the use of NFC for things like contactless payments was growing steadily, it exploded early this year due to the Coronavirus pandemic.

In this article we'll go over what NFC is, what it's used for, some creative ways to use NFC, and more.

What is NFC and how does it work?

NFC stands for near-field communication. It is a standard for devices to communicate with each other wirelessly from a very close distance.

NFC is a subset of another technology called RFID, so let's dig a bit into that before circling back to NFC.

What is RFID?

Radio-frequency identification, or RFID, is a generic term for technologies that use radio waves from a reader to track specific tags. These tags all include an antenna and a tiny chip, and can come in many shapes and sizes.

Highway toll payment devices and those plastic things on clothes and other expensive items in stores are some common examples of RFID tags.

Image A diagram of an RFID tag. NFC tags look very similar – Source

If you've ever seen those big devices on either side of a store entrance, those are just big RFID readers. They're constantly transmitting radio waves and listening for a response.

So what happens if you try to leave a store and there's still a tag on the item you bought?

Most RFID tags are unpowered, so when the antenna in the tag picks up radio waves from the reader, it generates a small amount of electricity. That electricity activates the chip inside the tag, and it sends a signal with the information stored on the chip back to the reader.

In this case, when the reader receives a signal back from the tag on your item, it sounds an alarm.

NFC is a newer, high-frequency version of RFID, and also involves both tags and readers.

NFC's higher frequency means that, while it can transfer data much faster than RFID, it only works from a distance of about 4 cm/1.6 in or less. Meanwhile, RFID works from a distance of up to 12 m/40 ft.

What is NFC used for?

There are a lot of use cases for NFC, but here are some of the most common you'll see.

Contactless payments

These days, the most common thing that NFC is used for is contactless payment. Many newer credit and debit cards include an NFC tag, so you can just hold your card just above a payment terminal rather than swipe or insert it.

Contactless payment enabled credit and debit cards have a symbol on them similar to these:

Image _Most contactless payment cards will have a similar symbol on the front or back – Source_

Most modern phones include an NFC chip, which can act as both an NFC reader/writer and tag.

This chip, paired with a mobile payment app like Google Pay, Apple Pay, and Samsung Pay, means that you might not even need to take your wallet out anymore.

Instead, your phone can act as a virtual NFC tag for your credit or debit card, even if said card doesn't have an actual NFC tag inside it.

Whether you use your contactless card or a mobile payment app, every payment you make involves tokenization for extra security.

Tokenization is when your card's information is used to generate a random, temporary token for each transaction. Then, your card or mobile payment app can send that temporary token safely, rather than transmit your actual card number, name, and other sensitive information.

However you choose to pay, using a contactless payment card, a mobile payment app, or inserting your card's chip are all much safer than the old method of swiping.

Interacting with products

Traditionally RFID is used for tracking inventory in warehouses and stores. But once a product leaves the store, its RFID tag is disabled.

A lot of products now include NFC tags for additional interaction after you leave the store. Nintendo's Amiibo figures are probably the most common recent example of this:

Image If this isn't the cutest NFC tag, I don't know what is – Source

When you scan an Amiibo figure with your Nintendo console, you can get special characters, items, or other additional content, depending on the game and figure you use.

Your Nintendo console can also write information back to the NFC tag in your figure, again, depending on the game and figure.

Other companies like Nike have been including NFC tags in things like sports jerseys and sneakers. This allows you to get personalized content based on the product you scan (recent scores for a team, stats for a specific player, and so on), or even check that a product is genuine.

Data transfer

Unlike RFID, which is typically one-way communication between a reader and a tag, NFC allows for two-way communication.

Some phones are able to use NFC to transfer data like contacts or photos between two devices if you touch them together.

Creative uses for NFC

One of the coolest things you can do with NFC is buy a pack of tags online and program them to do different things with your phone.

For example, if you're tired of always giving your WiFi password out to guests, you could program an NFC tag to automatically connect to your network. Then, all your guests need to do is make sure NFC is enabled and hold their phones near the tag.

You could also program NFC tags to control different smart devices around your house. You could have a tag that toggles a smart lamp on or off, or one that sets the thermostat.

The commands triggered by the NFC tags can also be personalized to specific devices. For example, if you like the room a bit cooler than your partner, when you scan the thermostat tag it can lower the temperature. But when your partner scans it, it could raise the temperature to their preferred setting.

There are a lot of other interesting ways to use NFC tags to make your life just a little bit easier. Check out this video for more ideas and to see how to program your own NFC tags in both iOS and Android:

In summary

Though you might not have heard much about NFC until earlier this year (I certainly hadn't), it will likely become the standard we pay for things.

And considering all the cool stuff you can do with a phone and a pack of NFC tags, it's surprising that NFC isn't more widely adopted.

If you end up programming your own NFC tags, let me know what you did and how you did it over on Twitter.

]]> <![CDATA[ How to build a shopping cart with Vue and Dinero.js ]]> https://www.freecodecamp.org/news/how-to-build-a-shopping-cart-with-vue-and-dinero-js-22a7dc4c5352/ 66c34fe24f1fc448a3679047 Wed, 09 May 2018 17:50:54 +0000 By Sarah Dayan

My friend Cory and I chat almost every day, so you can bet he knows about everything going on in my life. But as we were talking the other day, I realized he had no idea how Dinero.js, my latest project, actually works. Like, what you can do with it.

I paused and realized it may actually not be that obvious. It’s easier, whatever your skill level is, to understand what a smooth scrolling plugin does than what a money library has to offer.

“Do you see in JavaScript how you can use a Date constructor to store a date and format it later? Or you use Moment.js to create moment objects and how it’s better than storing dates as strings or any other type?

Well, Dinero.js is like Moment, but for money. There’s no native way to handle money, and if you try to do it with Number types, you’re going to run into issues. That’s what Dinero.js helps you avoid. It secures your monetary values in objects and allows you to do whatever you need with them.”

I was happy with my explanation, as Cory started “a-ha”-ing. But I realized one thing had been missing from the beginning. Something that would speak volumes and help anyone understand the benefits of Dinero.js: a real-world example.

In this tutorial, we’ll build a shopping cart. We’ll use Vue.js to build the component, then integrate Dinero.js to handle all the money stuff.

TL;DR: this post goes in-depth in the how and why. It’s designed to help you grasp the core concepts of Dinero.js. If you want to understand the whole thought process, read on. Otherwise you can look at the final code on CodeSandbox.

This post assumes you have basic knowledge of Vue.js. If not, first check my tutorial “Build Your First Vue.js Component.” It will equip you with everything you need to go further.

Getting started

For this project, we’ll use vue-cli and the webpack-simple Vue.js template. If you don’t have vue-cli installed globally on your machine, fire up your terminal and type the following:

npm install -g vue-cli

Then:

vue init webpack-simple path/to/my-project

You can keep the default options for all questions. When it’s done, navigate to the new directory, install dependencies, and run the project:

cd path/to/my-project npm install npm run dev

Webpack will start serving your project on port 8080 (if available) and open it in your browser.

Setting up the HTML/CSS

I won’t get into page structure and styling in this tutorial, so I invite you to copy/paste the code. Open the App.vue file, and paste the following snippets.

This goes between the <template> tags:

<div id="app">  <div class="cart">    <h1 class="title">Order</h1>    <ul class="items">      <li class="item">        <div class="item-preview">          <img src="" alt="" class="item-thumbnail">          <div>            <h2 class="item-title"></h2>            <p class="item-description"></p>          </div>        </div>        <div>          <input type="text" class="item-quantity">          <span class="item-price"></span>        </div>      </li>    </ul>    <h3 class="cart-line">      Subtotal <span class="cart-price"></span>    </h3>    <h3 class="cart-line">      Shipping <span class="cart-price"></span>    </h3>    <h3 class="cart-line">      Total <span class="cart-price cart-total"></span>    </h3>  </div></div>

Ant this between the <style> tags:

body {  margin: 0;  background: #fdca40;  padding: 30px;}

.title {  display: flex;  justify-content: space-between;  align-items: center;  margin: 0;  text-transform: uppercase;  font-size: 110%;  font-weight: normal;}

.items {  margin: 0;  padding: 0;  list-style: none;}

.cart {  background: #fff;  font-family: 'Helvetica Neue', Arial, sans-serif;  font-size: 16px;  color: #333a45;  border-radius: 3px;  padding: 30px;}.cart-line {  display: flex;  justify-content: space-between;  align-items: center;  margin: 20px 0 0 0;  font-size: inherit;  font-weight: normal;  color: rgba(51, 58, 69, 0.8);}.cart-price {  color: #333a45;}.cart-total {  font-size: 130%;}

.item {  display: flex;  justify-content: space-between;  align-items: center;  padding: 15px 0;  border-bottom: 2px solid rgba(51, 58, 69, 0.1);}.item-preview {  display: flex;  align-items: center;}.item-thumbnail {  margin-right: 20px;  border-radius: 3px;}.item-title {  margin: 0 0 10px 0;  font-size: inherit;}.item-description {  margin: 0;  color: rgba(51, 58, 69, 0.6);}.item-quantity {  max-width: 30px;  padding: 8px 12px;  font-size: inherit;  color: rgba(51, 58, 69, 0.8);  border: 2px solid rgba(51, 58, 69, 0.1);  border-radius: 3px;  text-align: center;}.item-price {  margin-left: 20px;}

Adding data

When you’re dealing with products, you usually retrieve raw data from a database or an API. We can get close by representing it in a separate JSON file, then importing it asynchronously as if we were querying an API.

Let’s create a products.json file in assets/ and add the following:

{  "items": [    {      "title": "Item 1",      "description": "A wonderful product",      "thumbnail": "https://fakeimg.pl/80x80",      "quantity": 1,      "price": 20    },    {      "title": "Item 2",      "description": "A wonderful product",      "thumbnail": "https://fakeimg.pl/80x80",      "quantity": 1,      "price": 15    },    {      "title": "Item 3",      "description": "A wonderful product",      "thumbnail": "https://fakeimg.pl/80x80",      "quantity": 2,      "price": 10    }  ],  "shippingPrice": 20}

This is pretty similar to what we would get from a real API: data as a collection, with titles and text as strings, and quantity and prices as numbers.

We can go back to App.vue and set empty values in data. This will allow the template to initialize while the actual data is being fetched.

data() {  return {    data: {      items: [],      shippingPrice: 0    }  }}

Finally, we can fetch data from products.json with an asynchronous request, and update the data property when it’s ready:

export default {  ...  created() {    fetch('./src/assets/products.json')      .then(response => response.json())      .then(json => (this.data = json))  }}

Now let’s populate our template with this data:

<ul class="items">  <li :key="item.id" v-for="item in data.items" class="item">    <div class="item-preview">      <img :src="item.thumbnail" :alt="item.title" class="item-thumbnail">      <div>        <h2 class="item-title">{{ item.title }}</h2>        <p class="item-description">{{ item.description }}</p>      </div>    </div>    <div>      <input type="text" class="item-quantity" v-model="item.quantity">      <span class="item-price">{{ item.price }}</span>    </div>  </li></ul>...<h3 class="cart-line">  Shipping  <span class="cart-price">{{ data.shippingPrice }}</span></h3>...

You should see all the items in your cart. Now let’s add some computed properties to calculate the subtotal and total:

export default {  ...  computed: {    getSubtotal() {      return this.data.items.reduce(        (a, b) => a + b.price * b.quantity,        0      )    },    getTotal() {      return (        this.getSubtotal + this.data.shippingPrice      )    }  }}

And add them to our template:

<h3 class="cart-line">  Subtotal  <span class="cart-price">{{ getSubtotal }}</span></h3>...<h3 class="cart-line">  Total  <span class="cart-price cart-total">{{ getTotal }}</span></h3>

There we go! Try changing quantities around — you should see the subtotal and total amounts change accordingly.

Now we have a few issues here. First, we’re only showing amounts, not currencies. Sure, we could hard code them in the template right next to the reactive amounts. But what if we want to make a multi-lingual website? Not all languages format money the same way.

What if we want to show all amounts with two decimal places, for better alignment? You could try and keep all initial amounts as floats by using the toFixed method, but then you’d be working with String types which are a lot harder and less performant when it comes to doing math. Also, that would mean changing data for purely presentational purposes, which never is a good idea. What if you need the same data for other purposes and it requires a different format?

Finally, the current solution is relying on floating point math, which is a bad idea when it comes to handling money. Try and change a few amounts:

{  "items": [    {      ...      "price": 20.01    },    {      ...      "price": 15.03    },    ...  ]}

Now, look at how broken your shopping cart is ? This isn’t some buggy JavaScript behavior, but a limitation of how we can represent our decimal numbering system with binary machines. If you do math with floats, you’ll sooner or later encounter those inaccuracies.

The good news is, we don’t have to use floats to store money. That’s exactly where Dinero.js comes into play.

Dinero.js, a wrapper for money

Dinero.js is to money what Moment.js is to dates. It’s a library that lets you create monetary value objects, manipulate them, ask them questions, and format them. It relies on Martin Fowler’s money pattern and helps you solve all common problems caused by floats, primarily by storing amounts in minor currency unit, as integers.

Open up your terminal and install Dinero.js:

npm install dinero.js --save

Then import it into App.vue:

import Dinero from 'dinero.js'

export default {  ...}

You can now create Dinero objects ?

// returns a Dinero object with an amount of $50Dinero({ amount: 500, currency: 'USD' })

// returns $4,000.00Dinero({ amount: 500 })  .add(Dinero({ amount: 500 }))  .multiply(4)  .toFormat()

Let’s create a factory method to turn our price properties into Dinero objects on demand. We have floats with up to two decimal places. This means if we want to turn them into their equivalents in minor currency units (in our case, dollars), we need to multiply them by 10 to the power of 2.

We pass the factor as an argument with a default value, so we can use the method with currencies that have different exponents.

export default {  ...  methods: {    toPrice(amount, factor = Math.pow(10, 2)) {      return Dinero({ amount: amount * factor })    }  }}

Dollars are the default currency, so we don’t need to specify it.

Because we’re doing floating point math during the conversion, some calculations may end up as slightly inaccurate floats. That’s easy to fix by rounding the result to the closest integer.

toPrice(amount, factor = Math.pow(10, 2)) {  return Dinero({ amount: Math.round(amount * factor) })}

Now we can use toPrice in our computed properties:

export default {  ...  computed: {    getShippingPrice() {      return this.toPrice(this.data.shippingPrice)    },    getSubtotal() {      return this.data.items.reduce(        (a, b) =>          a.add(            this.toPrice(b.price).multiply(b.quantity)          ),        Dinero()      )    },    getTotal() {      return this.getSubtotal.add(this.getShippingPrice)    }  }}

And in our template:

<ul class="items">  <li :key="item.id" v-for="item in data.items" class="item">    <div class="item-preview">      <img :src="item.thumbnail" :alt="item.title" class="item-thumbnail">      <div>        <h2 class="item-title">{{ item.title }}</h2>        <p class="item-description">{{ item.description }}</p>      </div>    </div>    <div>      <input type="text" class="item-quantity" v-model="item.quantity">      <span class="item-price">{{ toPrice(item.price) }}</span>    </div>  </li></ul><h3 class="cart-line">  Subtotal  <span class="cart-price">{{ getSubtotal }}</span></h3><h3 class="cart-line">  Shipping  <span class="cart-price">{{ getShippingPrice }}</span></h3><h3 class="cart-line">  Total  <span class="cart-price cart-total">{{ getTotal }}</span></h3>

If you look at your shopping cart, you’ll see {} in place of prices. That’s because we’re trying to display an object. Instead, we need to format them so they can display prices with the right syntax, alongside their currency symbol.

We can achieve that with Dinero’s [toFormat](https://sarahdayan.github.io/dinero.js/module-Dinero.html#~toFormat) method.

<ul class="items">  <li :key="item.id" v-for="item in data.items" class="item">    ...    <div>      ...      <span class="item-price">        {{ toPrice(item.price).toFormat() }}      </span>    </div>  </li></ul><h3 class="cart-line">  Subtotal  <span class="cart-price">    {{ getSubtotal.toFormat() }}  </span></h3><h3 class="cart-line">  Shipping  <span class="cart-price">    {{ getShippingPrice.toFormat() }}  </span></h3><h3 class="cart-line">  Total  <span class="cart-price cart-total">    {{ getTotal.toFormat() }}  </span></h3>

Look in your browser: you now have a well-formatted, fully functional shopping cart ?

Going further

Now that you have a good grasp of the basics of Dinero.js, time to raise the bar a little.

Presentation

Let’s change shippingPrice to 0 in the JSON file. Your cart should now display “Shipping: $0.00”, which is accurate but not user-friendly. Wouldn’t it be nicer for it to say “Free”?

Fortunately, Dinero.js has a plenty of handy methods to ask questions to your instances. In our case, the [isZero](https://sarahdayan.github.io/dinero.js/module-Dinero.html#~isZero) method is exactly what we need.

In the template, you can display text instead of a formatted Dinero object whenever it represents zero:

<h3 class="cart-line">  Shipping  <span class="cart-price">    {{      getShippingPrice.isZero() ?      'Free' :      getShippingPrice.setLocale(getLocale).toFormat()    }}  </span></h3>

Of course, you can generalize this behavior by wrapping it in a method. It would take a Dinero object as an argument and return a String. This way, you could show “Free” whenever you try to display a zero amount.

Locale switching

Imagine you’re making an e-commerce website. You want to accommodate your international audience, so you translate content and add a language switcher. Yet, there’s one detail that may slip your attention: money formatting also changes depending on the language. For example, €10.00 in American English translates to 10,00 € in French.

Dinero.js supports international formatting via the I18n API. This lets you display amounts with localized formatting.

Dinero.js is immutable, so we can’t rely on changing [Dinero.globalLocale](https://sarahdayan.github.io/dinero.js/global.html#Globals) to reformat all existing instances. Instead, we need to use the [setLocale](https://sarahdayan.github.io/dinero.js/module-Dinero.html#~setLocale) method.

First, we add a new property language in data and set it to a default value. For locales, you need to use a BCP 47 language tag such as en-US.

data() {  return {    data: {      ...    },    language: 'en-US'  }}

Now we can use setLocale directly on Dinero objects. When language changes, the formatting will change as well.

export default {  ...  methods: {    toPrice(amount, factor = Math.pow(10, 2)) {      return Dinero({ amount: Math.round(amount * factor) })        .setLocale(this.language)    }  },  computed: {    ...    getSubtotal() {      return this.data.items.reduce(        (a, b) =>          a.add(            this.toPrice(b.price).multiply(b.quantity)          ),        Dinero().setLocale(this.language)      )    },    ...  }}

All we need is to add setLocale in toPrice and getSubtotal, the only places where we’re creating Dinero objects.

Now we can add our language switcher:

// HTML<h1 class="title">  Order  <span>    <span class="language" @click="language = 'en-US'">English</span>    <span class="language" @click="language = 'fr-FR'">French</span>  </span></h1>

// CSS.language {  margin: 0 2px;  font-size: 60%;  color: rgba(#333a45, 0.6);  text-decoration: underline;  cursor: pointer;}

When you click on the switcher, it will reassign language, which will change how the objects are formatted. Because the library is immutable, this will return new objects instead of changing existing ones. It means if you create a Dinero object and decide to display it somewhere, then reference it somewhere else and apply a setLocale on it, your initial instance won’t be affected. No pesky side effects!

All tax included

It’s common to see a tax line on shopping carts. You can add one with Dinero.js, using the [percentage](https://sarahdayan.github.io/dinero.js/module-Dinero.html#~percentage) method.

First, let’s add a vatRate property in the JSON file:

{  ...  "vatRate": 20}

And an initial value in data:

data() {  return {    data: {      ...      vatRate: 0    }  }}

Now we can use this value to calculate the total of our cart with tax. First, we need to create a getTaxAmount computed property. We can then add it to getTotal as well.

export default {  ...  computed: {    getTaxAmount() {      return this.getSubtotal.percentage(this.data.vatRate)    },    getTotal() {      return this.getSubtotal        .add(this.getTaxAmount)        .add(this.getShippingPrice)    }  }}

The shopping cart now shows the total with tax. We can also add a line to show what the tax amount is:

<h3 class="cart-line">  VAT ({{ data.vatRate }}%)  <span class="cart-price">{{ getTaxAmount.toFormat() }}</span></h3>

And we’re done! We’ve explored several concepts of Dinero.js, but that’s only scratching the surface of what it has to offer. You can read through the documentation and check out the project on GitHub. Star it, fork it, send me feedback, or even open a pull request! I have a nice little contributing guide to help you get started.

You can also look at the final code on CodeSandbox.

I’m currently working on bringing a convert method to Dinero.js, as well as better support for all ISO 4217 currencies and cryptos. You can stay tuned by following me on Twitter.

Happy coding! ??‍?

Originally published at frontstuff.io.

]]>