@getopenpay/openpay-js-react 0.0.10 → 0.0.11-alpha.7c71962

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.
Files changed (3) hide show
  1. package/README.md +91 -4
  2. package/dist/index.js +1017 -961
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -33,12 +33,68 @@ The library provides separate card elements (Card number, expiry, CVV) and a com
33
33
  - `<CardCvcElement />`
34
34
  - `<CardElement />` (Combined)
35
35
 
36
+ <br />
37
+
38
+ ### Callbacks
39
+
40
+ `ElementsForm` component, which is responsible for managing the form elements involved in the payment checkout process. This provides optional callback functions and properties that help customize the behavior of the form.
41
+
42
+ `onFocus?: (elementId: string) => void`
43
+ Triggered when a form element gains focus.
44
+ Parameters:
45
+ `elementId`: The ID of the element that gained focus.
46
+
47
+ `onBlur?: (elementId: string) => void`
48
+ Triggered when a form element loses focus.
49
+ Parameters:
50
+ `elementId`: The ID of the element that lost focus.
51
+
52
+ `onChange?: (elementId: string) => void`
53
+ Triggered when a form element's value changes.
54
+ Parameters:
55
+ `elementId`: The ID of the element whose value changed.
56
+
57
+ `onLoad?: (totalAmountAtoms: number, currency?: string) => void`
58
+ Triggered when the form is successfully loaded.
59
+ Parameters:
60
+ `totalAmountAtoms`: The total amount to be processed in atomic units (usually the smallest denomination of the currency).
61
+ `currency`: (Optional) The currency code in which the transaction is being processed.
62
+
63
+ `onLoadError?: (message: string) => void`
64
+ Triggered if there is an error loading the form.
65
+ Parameters:
66
+ `message`: A string describing the error that occurred during form loading.
67
+
68
+ `onValidationError?: (field: FieldNames, errors: string[], elementId?: string) => void`
69
+ Triggered when there is a validation error in any of the form fields.
70
+ Parameters:
71
+ `field`: The name of the field that failed validation.
72
+ `errors:` An array of error messages describing the validation issues.
73
+ `elementId:` (Optional) The ID of the element where the validation error occurred.
74
+
75
+ `onCheckoutStarted?: () => void`
76
+ Triggered when the checkout process begins.
77
+
78
+ `onCheckoutSuccess?: (invoiceUrls: string[], subscriptionIds: string[], customerId: string) => void`
79
+ Triggered when the checkout process is successfully completed.
80
+ Parameters:
81
+ `invoiceUrls`: An array of URLs to the generated invoices.
82
+
83
+ `onCheckoutError?: (message: string) => void`
84
+ Triggered when an error occurs during the checkout process.
85
+ Parameters:
86
+ `message`: A string describing the error that occurred during checkout.
87
+
88
+ <br />
89
+
36
90
  ### Billing information
37
91
 
38
92
  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`.
93
+ For OpenPay to access the input fields, please include `data-opid` attribute with predefined field names which can be accessed via `FieldName`.
40
94
 
41
- Available field names:
95
+ Fields must be rendered inside `<ElementsForm>`
96
+
97
+ Available field names:
42
98
 
43
99
  - `FieldName.FIRST_NAME`
44
100
  - `FieldName.LAST_NAME`
@@ -49,17 +105,48 @@ Available field names:
49
105
  - `FieldName.COUNTRY`
50
106
  - `FieldName.ADDRESS`
51
107
  - `FieldName.PHONE`
108
+ - `FieldName.PROMOTION_CODE`
109
+
110
+ <br />
52
111
 
53
112
  ### Styling
54
113
 
55
114
  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
115
 
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.
116
+ 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
117
 
59
- - `backgroundColor`
118
+ - `backgroundColor`
60
119
  - `color`
61
120
  - `fontFamily`
62
121
  - `fontSize`
63
122
  - `fontWeight`
64
123
  - `margin`
65
124
  - `padding`
125
+
126
+ Optionally, placeholder can be configured via a property of `styles`.
127
+
128
+ - `placeholder` : `string | { cardNumber: string, expiry: string, cvc: string }`
129
+
130
+ For individual card elements: placeholder accepts a `string`
131
+ For the combined`<CardElement>`: placeholder accepts an object `{ cardNumber: string, expiry: string, cvc: string }`
132
+
133
+
134
+ ## Release | Publish
135
+
136
+ ### Alpha version
137
+
138
+ Default CDE environment for alpha version is `staging`
139
+
140
+ A new alpha version is automatically released when a commit is pushed to main.
141
+
142
+ ### Stable version
143
+
144
+ Default CDE environment for stable version is `production`
145
+
146
+ To release a new version:
147
+ - the version in `package.json` need to be upgraded
148
+ - merge the commit containing the version update to main
149
+ - create a new release in github
150
+ - create new tag with updated version (e.g. if version in package.json is `0.0.10`, create a tag named `v0.0.10`)
151
+ - publish the release
152
+ It will publish a new stable version to npm