This is a demo web app, built to showcase a basic Zaprite API integration.

Demonstration

The example API integration showcases a demo customer dashboard where a payment is required. The following flow has been built:

1. The customer is presented with an amount to pay.
2. The customer clicks a button to initiate a payment.
3. The app uses Zaprite's API to create an Order (/v1/order), using the merchant's preferred Checkout and Payment Method options.
4. The customer is redirected to the checkoutUrl returned from the API.
5. The customer makes a payment and is redirected back to the redirectUrl specified in the original Order request.
6. A 'success' page uses the Order information to query the Order at Zaprite (/v1/order/{id}) and display the relevant information to the customer.

Zaprite API

You can learn more about Zaprite's API at:

• https://zaprite.com/developers
• https://api.zaprite.com

Stack

This app was built using Next.js, bootstrapped with create-next-app. It uses Tailwind and Shadcn.

Local Development

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Requirements

You will need an API key associated with your Zaprite Organization to interact with our API. You can request API access by logging into your Zaprite Organization, creating a Sandbox Organization for testing, and then navigating to Settings > API.

Learn more about Zaprite Sandbox Organizations at:

• How to test payments for an API integration.

Learn More About Next.js

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.