Integrating with North's Embedded Checkout is extremely easy and secure. Instead of handling sensitive payment credentials directly, your application uses our modern payment iframe (Form mode). This custom checkout experience helps you achieve Payment Card Industry Data Security Standard (PCI DSS) compliance by ensuring that all sensitive card details are sent directly to North's secure environment. Your backend never touches, processes, or stores raw card data, vastly reducing your PCI scope.

Once you've integrated the Embedded Checkout with your platform, this is how making online payments will work:

1. The customer initiates the checkout process.
2. The merchant server makes a secure request to the North session service to create a checkout session.
3. The session service returns a short-lived session token (valid for 30 minutes) to the merchant server, which forwards it to the front-end application.
4. The client application loads North's lightweight script (checkout.js) and calls checkout.mount() with the session token to render a secure, responsive payment form directly within your layout.
5. The customer fills out the payment form and submits it. The form is posted directly to North's PCI-compliant servers.
6. The client listens for transaction completion via the onPaymentComplete callback and navigates to the confirmation page.
7. Your server queries the secure session status endpoint to authoritatively verify the transaction result (Approved or Declined) before fulfilling the customer's order.

To create your React app using Vite, open the paymentshub-react folder and run the following command:

Once the React app is created, navigate to the client folder and run the following command to install the required dependencies:

The purpose of each package is as follows:

• bootstrap: to style the React app.
• react-bootstrap: to provide Bootstrap 5 components that are built with React.
• react-router-dom: to set up routing in the React app.

First, you need to load North's payment library. Open the client/index.html file and add the script tag inside the <head> block:

This script exposes a global checkout object on the window, which we will use to mount our hosted checkout form.

Next, open the src/main.jsx file and replace the existing code with the following:

This sets up the BrowserRouter for the React app.

Next, open src/App.jsx and replace the existing code with the following:

This imports the BootStrap CSS file and various pages. It sets up four routes for the various pages in this app:

• Homepage: to display various products.
• ProductPage: to display the details of a particular product.
• Payment: to load and display the Embedded Checkout form.
• PaymentResults: to show the secure payment result.

First, you will create the components that are used in this application.

Inside the src folder, create a folder called components. In the components folder, create a file called NavBar.jsx and paste in the code below:

This will create a simple navigation bar.

Next, create a file called ProductCard.jsx inside the components folder and add the code below:

The above code creates a reusable card component that you will use to display the details of a product on the homepage.

Now you can go ahead and create the pages. Inside the src folder, create a folder called pages. Make sure you create the files below inside the pages folder.

You will start by creating the Homepage.jsx file. Paste the following code inside this file:

The above code fetches various products from the Fake Store API and uses the ProductCard component to render them on the page.

Next, create a file ProductPage.jsx and paste in the code below:

The above code retrieves the product details based on the navigation parameter and renders them. It contains a button that, when clicked, triggers createCheckoutSession(). This function makes a POST request to /api/create-checkout-session on our backend server and passes a products array with the item details. If successful, it stores the returned token (session token) in local storage and redirects the user to our /payment route where the checkout form will be loaded.

Remember to replace with your actual backend server link once you deploy your API.

Next, create a file called Payment.jsx and paste in the code below:

This page retrieves the sessionToken from local storage and mounts the secure hosted payment form. By calling window.checkout.mount(), North automatically renders a fully optimized, responsive checkout iframe inside the #checkout-container element.

Additionally, we call window.checkout.onPaymentComplete() to register a callback. Once the customer completes their transaction successfully within the secure iframe, this callback runs and navigates them automatically to /payment/result.

This simplifies your client-side code immensely, removing any requirement to build and maintain sensitive input forms for card numbers, expiration dates, or CVV inputs.

Lastly, create a file called PaymentResults.jsx and paste in the code below:

This page makes a GET request to your backend's secure /api/session-status endpoint, passing along the sessionToken. Your backend acts as the secure proxy, requesting the checkout status from North's secure servers, and returns the result. If the status is 'Approved', we display a payment success page showing the transaction ID, auth code, and amount request details. Otherwise, we inform the customer that their payment failed. The exact field names (and whether they appear at the top level or nested under a body object) come from North's Session Status response, so confirm them against a real response from your account and adjust the mapping if needed.

You can access the full code for the React app on this GitHub repo .

In this guide, you've learned about embedded payments and their benefits. You also learned about North's modern Embedded Checkout (Form Integration) and how to securely integrate it into your React application to build a seamless, secure storefront with minimal compliance requirements. You can read the Embedded Checkout Integration Guides to learn more about how this product can meet your business needs.

To learn how to modify your app to add shopping cart functionality in ReactJS, check out Part 2 of this series.