Install

npm install @newageerp/node-payments

middleware.ts

import { paymentsNextSrv } from '@newageerp/node-payments'

export async function middleware(req: NextRequest) {
    const paymentsResp = await paymentsNextSrv.checkForRoutes(req)
    if (paymentsResp) {
        return paymentsResp
    }
}

export const config = {
    matcher: '/((?!_next/static|_next/image|favicon.ico).*)',
}

USAGE

paypal

redirect to paypal on click

import { paypalBrowser } from '@newageerp/node-payments'

const onClickPP = async () => {
    setShowPaypalLoader(true)

    const ppResponse = await paypalBrowser.buttonFlow({
        cart: cart.cart.items,
        currency,
        extraData: {
            totals: cart.totals,
        },
        id: props.uuid,
        paypalData: {
            description: cart.cart.items[0].product.title,
            successUrl: `${window.location.origin}${redirectUrl}?pm=paypal-rt`,
            cancelUrl: window.location.origin,
            skipShippingAddress: true,
        }
    })

    if (ppResponse.url) {
        window.location.href = ppResponse.url
    }
}

venmo

button render

get token

const venmoData = await venmoBrowser.token()

render button

const button = window.paypal.Buttons({
    style: {
        height: 40,
    },
    fundingSource: 'venmo',
    createOrder: async function() {
        const orderData = await venmoBrowser.buttonFlow({
            id: props.uuid,
            cart: cart.cart.items,
            currency: cart.cart.currency.toLocaleUpperCase(),
            extraData: {
                totals: cart.totals,
            },
            venmoData: {
                description: cart.cart.items[0].product.title,
            },
        })
        return orderData.id
    },
    onApprove: (data: any, actions: any) => {
        return actions.order.capture().then(function(orderData: any) {
            window.location.href = `${window.location.origin}${redirectUrl}?pm=venmo`
        })
    },
})
if (button.isEligible()) {
    button.render('#venmo-button-container')
}

full example

import React, { Fragment, useEffect, useState } from 'react'
import { useCart } from '@/components/cart/CartProvider'
import { useParams } from 'next/navigation'
import { getPaidPageLink, ParamsCheckoutFlowType } from '@/lib/params_utils'
import Script from 'next/script'
import { venmoBrowser, VenmoTokenBrowserResponse } from '@newageerp/node-payments'

type Props = {
	uuid: string
}

export const VenmoButton = (props: Props) => {
	const params = useParams<ParamsCheckoutFlowType>()
	const [venmoData, setVenmoData] = useState<VenmoTokenBrowserResponse | undefined>(undefined)
	const cart = useCart()

	const redirectUrl = getPaidPageLink(params)

	const renderVenmoButton = () => {
		// @ts-ignore
		if (!window.paypal) {
			setTimeout(renderVenmoButton, 500)
			return
		}
		// @ts-ignore
		const button = window.paypal.Buttons({
			style: {
				height: 40,
			},
			fundingSource: 'venmo',
			createOrder: async function() {
				const orderData = await venmoBrowser.buttonFlow({
					id: props.uuid,
					cart: cart.cart.items,
					currency: cart.cart.currency.toLocaleUpperCase(),
					extraData: {
						totals: cart.totals,
					},
					venmoData: {
						description: cart.cart.items[0].product.title,
					},
				})
				return orderData.id
			},
			onApprove: (data: any, actions: any) => {
				return actions.order.capture().then(function(orderData: any) {
					window.location.href = `${window.location.origin}${redirectUrl}?pm=venmo`
				})
			},
		})
		if (button.isEligible()) {
			button.render('#venmo-button-container')
		}
	}

	useEffect(() => {
		const asyncF = async () => {
			const venmoData = await venmoBrowser.token()
			if (venmoData && venmoData.success === 1 && venmoData.scriptUrl) {
				setVenmoData(venmoData)

				renderVenmoButton()
			}
		}
		asyncF().catch(console.error)
	}, [])


	if (!venmoData || !venmoData.data || !venmoData.scriptUrl) {
		return <Fragment />
	}

	return (
		<div className={'w-full'}>
			<div id="venmo-button-container"></div>
			<Script
				src={venmoData.scriptUrl}
				data-user-id-token={venmoData.data.token}></Script>
		</div>
	)
}