@getopenpay/openpay-js-react 0.0.2-alpha.6c3bbd9 → 0.0.2-alpha.9971440
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,14 +1,68 @@
|
|
|
1
1
|
# openpay-js-react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Installation
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
```shell npm
|
|
6
|
+
npm install @getopenpay/openpay-js-react
|
|
7
|
+
```
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
4. Open [http://localhost:3032](http://localhost:3032) to see the example app
|
|
9
|
+
```shell yarn
|
|
10
|
+
yarn add @getopenpay/openpay-js-react
|
|
11
|
+
```
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
```shell pnpm
|
|
14
|
+
pnpm add @getopenpay/openpay-js-react
|
|
15
|
+
```
|
|
13
16
|
|
|
14
|
-
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
See example usage here ([example usages](https://dash.readme.com/go/getopenpay?redirect=%2Fv1.0%2Fdocs%2Fexamples))
|
|
20
|
+
|
|
21
|
+
## Concepts
|
|
22
|
+
|
|
23
|
+
### Elements
|
|
24
|
+
|
|
25
|
+
Elements are the embeds of secure web pages hosted on our servers. Elements must be used within the provider,`<ElementsForm />`, which provides context required by the elements.
|
|
26
|
+
|
|
27
|
+
`<ElementsForm />` needs `checkoutSecureToken` which can be generated by creating a checkout session via OpenPay Python SDK. [Create Checkout Session](ref:create_checkout_session)
|
|
28
|
+
|
|
29
|
+
The library provides separate card elements (Card number, expiry, CVV) and a combination these elements in a single line input field.
|
|
30
|
+
|
|
31
|
+
- `<CardNumberElement />`
|
|
32
|
+
- `<CardExpiryElement />`
|
|
33
|
+
- `<CardCvcElement />`
|
|
34
|
+
- `<CardElement />` (Combined)
|
|
35
|
+
|
|
36
|
+
### Billing information
|
|
37
|
+
|
|
38
|
+
Customer billing information is required to proceed checkout. You can implement the input fields for billing information in your own way. Since you're in control of these fields, you can perform custom validations, custom styling and auto-fill with user account information.
|
|
39
|
+
For OpenPay to access the input fields, please include `data-opid` attribute with predefined field names which can be accessed via `FieldName`.
|
|
40
|
+
|
|
41
|
+
Available field names:
|
|
42
|
+
|
|
43
|
+
- `FieldName.FIRST_NAME`
|
|
44
|
+
- `FieldName.LAST_NAME`
|
|
45
|
+
- `FieldName.EMAIL`
|
|
46
|
+
- `FieldName.ZIP_CODE`
|
|
47
|
+
- `FieldName.CITY`
|
|
48
|
+
- `FieldName.STATE`
|
|
49
|
+
- `FieldName.COUNTRY`
|
|
50
|
+
- `FieldName.ADDRESS`
|
|
51
|
+
- `FieldName.PHONE`
|
|
52
|
+
|
|
53
|
+
### Styling
|
|
54
|
+
|
|
55
|
+
By default, the elements provided are "Unstyled". They will have transparent background and text color adaptive to system's color scheme. You can wrap an element inside a container to which you can apply customized styling ([Examples](doc:examples)).
|
|
56
|
+
|
|
57
|
+
If you want to customize the styling of the element itself you can apply via the optional `styles` prop. The following are supported properties. These support any valid CSS values.
|
|
58
|
+
|
|
59
|
+
- `backgroundColor`
|
|
60
|
+
- `color`
|
|
61
|
+
- `fontFamily`
|
|
62
|
+
- `fontSize`
|
|
63
|
+
- `fontWeight`
|
|
64
|
+
- `margin`
|
|
65
|
+
- `padding`
|
|
66
|
+
What’s Next
|
|
67
|
+
Tell your users what they should do after they've finished this page
|
|
68
|
+
Examples
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getopenpay/openpay-js-react",
|
|
3
|
-
"version": "0.0.2-alpha.
|
|
3
|
+
"version": "0.0.2-alpha.9971440",
|
|
4
4
|
"description": "Accept payments through OpenPay, right on your site",
|
|
5
5
|
"author": "OpenPay <info@getopenpay.com> (https://getopenpay.com)",
|
|
6
6
|
"type": "module",
|