Not officially supported by Paynow.
Before you can start making requests to Paynow's API, you need to get an integration ID and integration Key from Paynow. Sign in to Paynow and get integration details. Here's a detailed guide on how to go about this process.
Install the library using NPM or yarn
yarn add paynow-react
// or
npm install paynow-reactFor Paynow React to work correctly, you need to set up the PaynowWrapper at the root of your application.
Go to the root of your application and do this:
import * as React from 'react';
// 1. import `PaynowReactWrapper` component
import { PaynowReactWrapper } from 'paynow-react';
function App({ Component }) {
// 2. Use at the root of your app
const paynow_config = {
integration_id: 'your-integration-id',
integration_key: 'your-integration-key',
result_url: 'default-result-url',
return_url: 'default-return-url',
};
return (
<PaynowReactWrapper {...paynow_config}>
<Component />
</PaynowReactWrapper>
);
}Follows most of the type definitions given in Paynow-NodeJS-SDK and extends a few
The image url will be used to display an image in the list of items
type Item = {
title: string;
amount: number;
quantity: number;
image?: string;
};The <PaynowPayment /> component accepts the following props
type PaymentProps = {
items: [Item];
label: string;
paymentMode: PaymentMode;
isOpen: boolean;
onClose: () => void;
};<PaynowPayment/> renders a modal that has the UI for the paynow payment.
import { PaynowPayment } from 'paynow-react';
import React, { useState } from 'react';
const items = [
{
title: 'Annual Bleek Subscription',
amount: 10,
quantity: 1,
image:
'https://d1wqzb5bdbcre6.cloudfront.net/c25a949b6f1ffabee9af1a5696d7f152325bdce2d1b926456d42994c3d91ad78/68747470733a2f2f66696c65732e7374726970652e636f6d2f6c696e6b732f666c5f746573745f67625631776635726a4c64725a635858647032346d643649',
},
{
title: 'Annual Clinch Subscription',
amount: 200.1,
quantity: 1,
},
];
const Checkout = () => {
// payment modal state
const [isOpen, setIsOpen] = React.useState(true);
// toggle modal state. Useful for mobile payments
const onCloseHandler = data => {
// Do something with the data and the close the modal
console.log(data);
setIsOpen(false);
};
return (
<div>
<PaynowPayment
items={items}
label="Express checkout"
paymentMode="mobile"
isOpen={isOpen}
onClose={onCloseHandler}
/>
</div>
);
};Please see our contribution guidelines to learn how you can contribute to this paynow-react.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent