@paycargo/js-react
Version:
Paycargo Wrapper component our Express Payment Solutions
214 lines (182 loc) • 11.6 kB
Markdown
## React TypeScript
First, run `npm i /js-react` in your Command Line Interface. Afterwards, the following dependency will be found in the `package.json`. The ellipses (...) represent the presence of other possible code.
```
. . .
{
"dependencies": {
. . .
"@paycargo/js-react": "^0.0.2"
. . .
}
. . .
```
Next, import React into the file, set up the `useState`, and define `handleOnClick`. We have included some dummy transaction information to fully illustrate what this implementation would look like.
```
import React, { useState, ChangeEvent} from "react";
import "./styles.css";
export default function App() {
const [selectedTransactions, setSelectedTransactions] = useState<any[]>([]);
const transactions = [
{
number: "2123190692",
departureDate: "2023-11-17T00:00:00.000Z",
arrivalDate: "2023-11-29T00:00:00.000Z",
paymentDueDate: "2023-11-22T00:00:00.000Z",
hasArrived: "N",
total: 45.38,
direction: "Inbound",
customerRefNumber: "29338586",
parent: "HLCUDUB231004840",
notes: "4716747",
type: "Invoice",
index: 0,
vendorId: 281573,
},
{
number: "2123190470",
departureDate: "2023-10-10T00:00:00.000Z",
arrivalDate: "2023-11-26T00:00:00.000Z",
paymentDueDate: "2023-11-22T00:00:00.000Z",
total: 6395.04,
direction: "Inbound",
customerRefNumber: "23686246",
parent: "HLCUBKK231007945",
batchId: 344788,
notes: "4716734",
type: "Invoice",
index: 1,
vendorId: 281573,
},
{
number: "2123190469",
departureDate: "2023-10-10T00:00:00.000Z",
arrivalDate: "2023-11-26T00:00:00.000Z",
paymentDueDate: "2023-11-22T00:00:00.000Z",
hasArrived: "N",
total: 6595.04,
customerRefNumber: "23686246",
parent: "HLCUBKK231007945",
notes: "4716733",
type: "Invoice",
index: 2,
vendorId: 281573,
},
];
function handleOnClick(event: ChangeEvent<HTMLInputElement>) {
const { target } = event;
const { value, checked } = target;
if (checked) {
setSelectedTransactions((state) => [
...state,
transactions[Number(value)],
]);
} else {
setSelectedTransactions((state) => {
const newState = state.filter((trans) => trans.index !== Number(value));
return newState;
});
}
}
```
Now, the PayCargo Checkout button must be loaded by importing and defining `defineCustomElements` as well as importing the PayCargo Checkout component itself and passing Options into it.
```
import React, { useState, ChangeEvent, useEffect, useRef } from "react";
import { defineCustomElements, PaycargoCheckout } from "@paycargo/js-react";
import "./styles.css";
defineCustomElements();
// OPTIONS that will be passed as a prop to the PaycargoCheckout Component
const options = {
env: "dev", // PROD , TEST, DEV
code: "odex", // Provied by PayCargo
brand: "odex", // Provied By PayCargo
originURL: "https://d566dp.csb.app", // URL to whitelist
};
. . .
<div style={{ border: "1px solid black", marginBottom: "10px" }} />
<div id="paycargo-button-container" className="text-center">
<PaycargoCheckout
options={options}
pcTransactions={selectedTransactions}
/>
</div>
```
***
### Event Listeners
We want to listen to two types of events: (1) when the transaction is being closed to see if any action was taken, and (2) when a payment has been attempted or successfully approved. To do this, we need to implement `useEffect` and add event listeners to the PayCargo Checkout component.
```
import React, { useState, ChangeEvent, useEffect, useRef } from "react";
. . .
export default function App() {
. . .
const paycargoRef = useRef<HTMLPaycargoCheckoutElement | null>(null);
. . .
. . .
useEffect(() => {
const listener = (event: any) => {
console.log("PaycargoCheckout Event", event.detail);
};
paycargoRef?.current?.addEventListener("close", listener);
paycargoRef?.current?.addEventListener("paymentResponse", listener);
return () => {
paycargoRef?.current?.removeEventListener("close", listener);
paycargoRef?.current?.removeEventListener("paymentResponse", listener);
};
}, [paycargoRef]);
return ( . . .
<PaycargoCheckout
ref={paycargoRef}
options={options}
pcTransactions={selectedTransactions}
/>
. . .
```
***
### How to Pass Data to the PayCargo Checkout Component
### _Properties_
| Property Name | Values | Type | Required | Description |
|---------------|--------------------------|----------------------------|--------------------|----------------------------------------------------------|
| options | | `object` | :heavy_check_mark: | Passing necessary options into the component |
| | env | `string` | :heavy_check_mark: | Options: `local`, `dev`, `test`, `prod` |
| | code | `string` | :heavy_check_mark: | PayCargo `integration` code |
| | originURL | `string` | :heavy_check_mark: | Host URL where component is loaded |
| | brand | `string` | | |
| | size | `string` | | Options: `full`, `lg`, `md` where the default size is `md` |
| visible | true / false | `boolean` | :heavy_check_mark: | To make PayCargo Checkout component visible or hidden |
| pcTransactions| | `object[]` | :heavy_check_mark: | PayCargo transaction object |
| | type | `string` | :heavy_check_mark: | Transaction type (example: `Invoice`, `Terminal Fee`, etc)|
| | vendorId | `number` / `null` | :heavy_check_mark: | |
| | number | `string` | :heavy_check_mark: | |
| | direction | `'Inbound'` / `'Outbound'` | :heavy_check_mark: | |
| | total | `number` | :heavy_check_mark: | Amount of total transaction. If transaction lines are present, then the total should equal the sum of all transaction line amounts|
| | arrivalDate | `string` / `date` | | |
| | hasArrived | `'Y'` / `'N'` | :heavy_check_mark: | |
| | bolLink | `string` | | |
| | parent | `string` | | |
| | shipperRefNumber | `string` | | |
| | customerRefNumber | `string` | | |
| | subcategory | `string` | | |
| | paymentDueDate | `date` | | |
| | notes | `string` / `null` | | |
| | transactionLines | `array` | | |
***
### _Transaction Lines_
| Property Name | Values | Type | Required | Description |
|---------------|--------------------------|----------------------------|--------------------|----------------------------------------------------------|
| transactionLines| | `object` | | Passing necessary options into the component. Note: these property names are case sensitive |
| | AMOUNT | `number` | :heavy_check_mark: | Amount for transaction line |
| | DESCRIPTION | `string` | :heavy_check_mark: | |
| | START_DATE | `string` / `date` | | |
| | END_DATE | `string` / `date` | | |
| | QUANTITY | `number` | | |
| | UNIT_PRICE | `number` | | |
| | containerNumber | `string` | | OSRA: container number |
| | availabilityDate | `string` / `date` | | OSRA: first available date |
| | pod | `string` | | OSRA: port of discharge |
| | sfd | `string` | | OSRA: start free day |
| | lfd | `string` | | OSRA: last free day |
| | freeTimeDays | `string` | | OSRA: free time days |
| | ddr | `string` | | OSRA: demurrage detention rule |
| | feeContact | `string` | | OSRA: mitigation contact |
| | complianceStatement | `string` | | OSRA: compliance statement |
| | commonCarrierStatement | `string` | | OSRA: common carrier statement |
***