Skip to content

Commit fc0a5c6

Browse files
00e600e6
committed
Remove old React component
It is replaced by our new React embed library at https://www.npmjs.com/package/@heliofi/checkout-react
1 parent 66c752f commit fc0a5c6

File tree

189 files changed

+183
-29625
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

189 files changed

+183
-29625
lines changed

‎README.md

+5-237
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22

33
Helio embedded components can be used in your website for dynamic payments or standard paylinks and pay streams.
44

5-
We currently support React v18.
5+
## Helio checkout embed
66

7-
Download the NPM from here: https://www.npmjs.com/package/@heliofi/react
7+
If you would like to embed our Pay Links in your webiste, please see [demo.hel.io](https://demo.hel.io) or our new [Helio Checkout React embed widget](https://www.npmjs.com/package/@heliofi/checkout-react).
88

9-
(Use the latest full version modules for deployment. Do not use the alpha versions unless recommended by Helio)
9+
Our [sample developer app](https://github.com/heliofi/sample-dev-app) shows how to use our API and embed together.
1010

11-
Always use the latest public version and ensure that all your dependencies are on the latest versions
11+
## Helio SDK
1212

1313
The Helio SDK is now integrated into the Helio React modules.
1414

@@ -24,53 +24,6 @@ Further documents with examples are available here: https://github.com/heliofi/h
2424

2525
Devnet and Mainnet are currently supported by Helio.
2626

27-
## Installation
28-
29-
`yarn add @heliofi/react`
30-
31-
## Embed Helio Components
32-
33-
You can embed Helio components for the following two use cases:
34-
35-
* Embed a Dynamic payment with the Helio Pay button (REACT)
36-
* Embed a Pay Link or Pay Stream with the Helio Pay button (REACT)
37-
38-
### 1. Embed a Dynamic payment with the Helio Pay button
39-
40-
The Helio pay button supports a "dynamic" payment options where you can pass a currency and a value through to our standard Helio Pay button.
41-
This is useful for custom checkout pages that want to have more than one item on the page where a total can be calculated and passed through for payment.
42-
43-
In the example below if you provide totalAmount and the currency to the button, the user will perform the payments with those values.
44-
45-
```ts
46-
import { HelioPay } from "@heliofi/react";
47-
import { SuccessPaymentEvent } from '@heliofi/sdk'
48-
49-
const App = () => {
50-
return (
51-
<div>
52-
<HelioPay
53-
cluster={ClusterHelio.Mainnet}
54-
paymentRequestId={"your_paylink_id"}
55-
supportedCurrencies={["SOL"]}
56-
totalAmount={0.01}
57-
onSuccess={(event: SuccessPaymentEvent): void => {
58-
console.log("onSuccess", event);
59-
/**
60-
* The success event signature looks as follows:
61-
* {
62-
* content: string;
63-
* transaction: string;
64-
* }
65-
* The transaction can be used to verify the payment with helio api
66-
* */
67-
}}
68-
/>
69-
</div>
70-
);
71-
};
72-
```
73-
7427
### Using the Helio API to verify a dynamic payment
7528

7629
Verify the payment using the Helio API by creating access keys here: https://docs.hel.io/developers/helio-api-key
@@ -99,196 +52,11 @@ try {
9952
throw new Error("Unable to get transactions data from backend!");
10053
}
10154
```
102-
### 2. Embed a Pay Link with the Helio Pay button
103-
104-
Use this option if you want to embed the Helio Pay Button on your site for Links
105-
106-
```ts
107-
import { HelioPay } from "@heliofi/react";
108-
import {
109-
ClusterHelio,
110-
SuccessPaymentEvent,
111-
ErrorPaymentEvent,
112-
PendingPaymentEvent
113-
} from '@heliofi/sdk';
114-
115-
const App = () => {
116-
return (
117-
<div>
118-
<HelioPay
119-
cluster={ClusterHelio.Mainnet}
120-
paymentRequestId={"your_paylink_id"}
121-
onSuccess={function (event: SuccessPaymentEvent): void {
122-
console.log("onSuccess", event);
123-
}}
124-
onError={function (event: ErrorPaymentEvent): void {
125-
console.log("onError", event);
126-
}}
127-
onPending={function (event: PendingPaymentEvent): void {
128-
console.log("onPending", event);
129-
}}
130-
onStartPayment={function (): void {
131-
console.log("onStartPayment");
132-
}}
133-
/>
134-
</div>
135-
);
136-
};
137-
```
138-
139-
### 3. Embed a Pay Stream with the Helio Pay button
140-
141-
Use this option if you want to embed the Helio Pay Button on your site for Pay Streams
142-
143-
```ts
144-
import { HelioPay } from "@heliofi/react";
145-
import {
146-
ClusterHelio,
147-
SuccessPaymentEvent,
148-
ErrorPaymentEvent,
149-
PendingPaymentEvent
150-
} from '@heliofi/sdk';
151-
152-
const App = () => {
153-
return (
154-
<div>
155-
<HelioPay
156-
cluster={ClusterHelio.Mainnet}
157-
paymentRequestId={"your_paystream_id"}
158-
paymentType={PaymentRequestType.PAYSTREAM}
159-
onSuccess={function (event: SuccessPaymentEvent): void {
160-
console.log("onSuccess", event);
161-
}}
162-
onError={function (event: ErrorPaymentEvent): void {
163-
console.log("onError", event);
164-
}}
165-
onPending={function (event: PendingPaymentEvent): void {
166-
console.log("onPending", event);
167-
}}
168-
onStartPayment={function (): void {
169-
console.log("onStartPayment");
170-
}}
171-
/>
172-
</div>
173-
);
174-
};
175-
```
17655

177-
### 4. Populate customer details with parameter pass through on the Helio Pay button
178-
179-
**Available parameter passthroughs for customer information**
180-
181-
`fullName, email, discordUsername, twitterUser, phoneNumber, productValue, areaCode, deliveryAddress, city, street, streetNumber.`
182-
183-
<br>**Example parameter passthrough for name and city**
184-
185-
`http://your_domain/?fullName=full%20name&city=your_city`
186-
187-
<br>**Use this option if you want to embed the Helio Pay Button on your site for parameter pass through for customer information:**
188-
189-
```ts
190-
import { HelioPay } from "@heliofi/react";
191-
import {
192-
ClusterHelio,
193-
SuccessPaymentEvent,
194-
ErrorPaymentEvent,
195-
PendingPaymentEvent
196-
} from '@heliofi/sdk';
197-
198-
const App = () => {
199-
return (
200-
<div>
201-
<HelioPay
202-
cluster={ClusterHelio.Mainnet}
203-
paymentRequestId={"your_paylink_id"}
204-
onSuccess={function (event: SuccessPaymentEvent): void {
205-
console.log("onSuccess", event);
206-
}}
207-
onError={function (event: ErrorPaymentEvent): void {
208-
console.log("onError", event);
209-
}}
210-
onPending={function (event: PendingPaymentEvent): void {
211-
console.log("onPending", event);
212-
}}
213-
onStartPayment={function (): void {
214-
console.log("onStartPayment");
215-
}}
216-
searchCustomerDetails={{ fullName: 'full name', email: '[email protected]', ... }}
217-
/>
218-
</div>
219-
);
220-
};
221-
```
222-
223-
### 5. Embed a additionalJSON or customApiUrl with the Helio Pay button
224-
225-
Use this options if you want to save additional information or change api url
226-
227-
```ts
228-
import { HelioPay } from "@heliofi/react";
229-
import {
230-
ClusterHelio,
231-
SuccessPaymentEvent,
232-
ErrorPaymentEvent,
233-
PendingPaymentEvent
234-
} from '@heliofi/sdk';
235-
236-
const App = () => {
237-
return (
238-
<div>
239-
<HelioPay
240-
additionalJSON={{ key1: 'value1' }}
241-
customApiUrl="http://127.0.0.1"
242-
cluster={ClusterHelio.Mainnet}
243-
paymentRequestId={"your_paystream_id"}
244-
paymentType={PaymentRequestType.PAYSTREAM}
245-
onSuccess={function (event: SuccessPaymentEvent): void {
246-
console.log("onSuccess", event);
247-
}}
248-
onError={function (event: ErrorPaymentEvent): void {
249-
console.log("onError", event);
250-
}}
251-
onPending={function (event: PendingPaymentEvent): void {
252-
console.log("onPending", event);
253-
}}
254-
onStartPayment={function (): void {
255-
console.log("onStartPayment");
256-
}}
257-
/>
258-
</div>
259-
);
260-
};
261-
```
262-
263-
#### Properties table for the Helio components
264-
265-
| Property | Type | Required | Default value | Description |
266-
|:--------------------|:-------------------|:---------|:---------------------------|:-------------------------------------------------------------------------------------------|
267-
| cluster | string | yes | | **available values:** devnet, mainnet, testnet |
268-
| paymentRequestId | string | yes | | Your paylink ID |
269-
| onSuccess | function | no | | triggered event when success |
270-
| onError | function | no | | triggered event when error |
271-
| onPending | function | no | | triggered event when pending |
272-
| onStartPayment | function | no | | triggered event on start payment |
273-
| theme | object | no | | customize the primary color(more will come soon) `theme={{ colors: { primary: #f76c1b }}}` |
274-
| totalAmount | number | no | | you can pass dynamic amount. dynamic pricing should be checked for this. |
275-
| supportedCurrencies | string array | no | | currencies you want to support. |
276-
| paymentType | PaymentRequestType | no | PaymentRequestType.PAYLINK | **available values:** PAYLINK, PAYSTREAM |
277-
| additionalJSON | object | no | | set additional information for customers |
278-
| customApiUrl | string | no | | change api url for all requests |
279-
280-
### Support Currencies
56+
### Supported Currencies
28157

28258
Use our Swagger API to get a list of currencies currently supported : https://api.hel.io/v1/docs#/Currency/CurrencyController_value
28359

28460
Try it out with currency 'type' of "DIGITAL" to return all supported currencies
28561

28662
Or pull directly from : https://api.hel.io/v1/currency?type=DIGITAL
287-
288-
### Embedded Example App
289-
290-
An example application with dynamic pricing can be found here: [Embedded Example App](https://embed.hel.io/)
291-
292-
Repo for the example application which you can review to understand how to embed Helio components : https://github.com/heliofi/heliopay-nextjs-sample
293-
294-
<img width="983" alt="Helio Embedded Example App" src="https://user-images.githubusercontent.com/97976151/213204178-1dd385db-00f0-4978-b26c-ba1fefe56d2c.png">

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"lerna": "^5.1.8"
66
},
77
"scripts": {
8-
"release": "lerna publish --ignore '@heliofi/react'",
9-
"build": "(yarn workspace @heliofi/solana-adapter run build) && (yarn workspace @heliofi/sdk run build) && (yarn workspace @heliofi/react run build)"
8+
"release": "lerna publish",
9+
"build": "(yarn workspace @heliofi/solana-adapter run build) && (yarn workspace @heliofi/sdk run build)"
1010
},
1111
"workspaces": [
1212
"packages/*"

‎packages/e2e/.eslintignore

-1
This file was deleted.

‎packages/e2e/.prettierrc

-16
This file was deleted.

‎packages/e2e/package.json

-66
This file was deleted.

‎packages/e2e/public/index.html

-12
This file was deleted.

0 commit comments

Comments
 (0)