logix-payment-shift4 1.0.5 → 1.0.7

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 (4) hide show
  1. package/dist/index.cjs.js +14 -15
  2. package/dist/index.esm.js +14 -15
  3. package/package.json +1 -1
  4. package/src/PaymentForm.jsx +10 -11
package/dist/index.cjs.js CHANGED
@@ -183,16 +183,16 @@ function _unsupportedIterableToArray(r, a) {
183
183
 
184
184
  function PaymentForm(_ref) {
185
185
  var amount = _ref.amount,
186
- currency = _ref.currency;
187
- _ref.currencyIcon;
188
- var color = _ref.color,
186
+ currency = _ref.currency,
187
+ color = _ref.color,
189
188
  _ref$formwidth = _ref.formwidth,
190
189
  formwidth = _ref$formwidth === void 0 ? 400 : _ref$formwidth,
191
190
  _ref$formborderRadius = _ref.formborderRadius,
192
191
  formborderRadius = _ref$formborderRadius === void 0 ? 20 : _ref$formborderRadius,
193
192
  _ref$formbackgroundCo = _ref.formbackgroundColor,
194
- formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo;
195
- _ref.companyLogo;
193
+ formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
194
+ _ref$inputpadding = _ref.inputpadding,
195
+ inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding;
196
196
  var formRef = React.useRef();
197
197
  var initializedRef = React.useRef(false); // yalnız bir dəfə mount üçün
198
198
  var shift4Ref = React.useRef(null);
@@ -335,7 +335,6 @@ function PaymentForm(_ref) {
335
335
  display: "flex",
336
336
  justifyContent: "center",
337
337
  width: "100%",
338
- padding: "20px",
339
338
  boxSizing: "border-box"
340
339
  }
341
340
  }, /*#__PURE__*/React.createElement("form", {
@@ -346,7 +345,7 @@ function PaymentForm(_ref) {
346
345
  style: {
347
346
  display: "grid",
348
347
  gap: "12px",
349
- padding: "24px",
348
+ padding: "20px",
350
349
  backgroundColor: formbackgroundColor,
351
350
  borderRadius: formborderRadius,
352
351
  width: formwidth,
@@ -366,8 +365,8 @@ function PaymentForm(_ref) {
366
365
  "data-shift4": "number",
367
366
  className: "form-control",
368
367
  style: {
369
- padding: "12px",
370
- borderRadius: "10px",
368
+ padding: inputpadding,
369
+ borderRadius: formborderRadius,
371
370
  border: "1px solid #ccc",
372
371
  boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
373
372
  }
@@ -387,8 +386,8 @@ function PaymentForm(_ref) {
387
386
  "data-shift4": "expiry",
388
387
  className: "form-control",
389
388
  style: {
390
- padding: "12px",
391
- borderRadius: "10px",
389
+ padding: inputpadding,
390
+ borderRadius: formborderRadius,
392
391
  border: "1px solid #ccc",
393
392
  boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
394
393
  }
@@ -401,8 +400,8 @@ function PaymentForm(_ref) {
401
400
  "data-shift4": "cvc",
402
401
  className: "form-control",
403
402
  style: {
404
- padding: "12px",
405
- borderRadius: "10px",
403
+ padding: inputpadding,
404
+ borderRadius: formborderRadius,
406
405
  border: "1px solid #ccc",
407
406
  boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
408
407
  }
@@ -412,11 +411,11 @@ function PaymentForm(_ref) {
412
411
  style: {
413
412
  marginTop: "16px",
414
413
  width: "100%",
415
- padding: "14px",
414
+ padding: inputpadding + 2,
416
415
  backgroundColor: color,
417
416
  color: "white",
418
417
  border: "none",
419
- borderRadius: "12px",
418
+ borderRadius: formborderRadius,
420
419
  fontWeight: "600",
421
420
  cursor: !isReady || isSubmitting ? "not-allowed" : "pointer",
422
421
  opacity: !isReady || isSubmitting ? 0.7 : 1
package/dist/index.esm.js CHANGED
@@ -181,16 +181,16 @@ function _unsupportedIterableToArray(r, a) {
181
181
 
182
182
  function PaymentForm(_ref) {
183
183
  var amount = _ref.amount,
184
- currency = _ref.currency;
185
- _ref.currencyIcon;
186
- var color = _ref.color,
184
+ currency = _ref.currency,
185
+ color = _ref.color,
187
186
  _ref$formwidth = _ref.formwidth,
188
187
  formwidth = _ref$formwidth === void 0 ? 400 : _ref$formwidth,
189
188
  _ref$formborderRadius = _ref.formborderRadius,
190
189
  formborderRadius = _ref$formborderRadius === void 0 ? 20 : _ref$formborderRadius,
191
190
  _ref$formbackgroundCo = _ref.formbackgroundColor,
192
- formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo;
193
- _ref.companyLogo;
191
+ formbackgroundColor = _ref$formbackgroundCo === void 0 ? "#fff" : _ref$formbackgroundCo,
192
+ _ref$inputpadding = _ref.inputpadding,
193
+ inputpadding = _ref$inputpadding === void 0 ? 12 : _ref$inputpadding;
194
194
  var formRef = useRef();
195
195
  var initializedRef = useRef(false); // yalnız bir dəfə mount üçün
196
196
  var shift4Ref = useRef(null);
@@ -333,7 +333,6 @@ function PaymentForm(_ref) {
333
333
  display: "flex",
334
334
  justifyContent: "center",
335
335
  width: "100%",
336
- padding: "20px",
337
336
  boxSizing: "border-box"
338
337
  }
339
338
  }, /*#__PURE__*/React.createElement("form", {
@@ -344,7 +343,7 @@ function PaymentForm(_ref) {
344
343
  style: {
345
344
  display: "grid",
346
345
  gap: "12px",
347
- padding: "24px",
346
+ padding: "20px",
348
347
  backgroundColor: formbackgroundColor,
349
348
  borderRadius: formborderRadius,
350
349
  width: formwidth,
@@ -364,8 +363,8 @@ function PaymentForm(_ref) {
364
363
  "data-shift4": "number",
365
364
  className: "form-control",
366
365
  style: {
367
- padding: "12px",
368
- borderRadius: "10px",
366
+ padding: inputpadding,
367
+ borderRadius: formborderRadius,
369
368
  border: "1px solid #ccc",
370
369
  boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
371
370
  }
@@ -385,8 +384,8 @@ function PaymentForm(_ref) {
385
384
  "data-shift4": "expiry",
386
385
  className: "form-control",
387
386
  style: {
388
- padding: "12px",
389
- borderRadius: "10px",
387
+ padding: inputpadding,
388
+ borderRadius: formborderRadius,
390
389
  border: "1px solid #ccc",
391
390
  boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
392
391
  }
@@ -399,8 +398,8 @@ function PaymentForm(_ref) {
399
398
  "data-shift4": "cvc",
400
399
  className: "form-control",
401
400
  style: {
402
- padding: "12px",
403
- borderRadius: "10px",
401
+ padding: inputpadding,
402
+ borderRadius: formborderRadius,
404
403
  border: "1px solid #ccc",
405
404
  boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
406
405
  }
@@ -410,11 +409,11 @@ function PaymentForm(_ref) {
410
409
  style: {
411
410
  marginTop: "16px",
412
411
  width: "100%",
413
- padding: "14px",
412
+ padding: inputpadding + 2,
414
413
  backgroundColor: color,
415
414
  color: "white",
416
415
  border: "none",
417
- borderRadius: "12px",
416
+ borderRadius: formborderRadius,
418
417
  fontWeight: "600",
419
418
  cursor: !isReady || isSubmitting ? "not-allowed" : "pointer",
420
419
  opacity: !isReady || isSubmitting ? 0.7 : 1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "logix-payment-shift4",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "main": "dist/index.cjs.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "description": "A React component library for integrating Shift4 payments with Logix applications.",
package/src/PaymentForm.jsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useEffect, useRef, useState } from "react";
2
2
 
3
- export default function PaymentForm({amount,currency,currencyIcon,color,formwidth=400,formborderRadius=20,formbackgroundColor="#fff",companyLogo}) {
3
+ export default function PaymentForm({amount,currency,color,formwidth=400,formborderRadius=20,formbackgroundColor="#fff",inputpadding=12}) {
4
4
  const formRef = useRef();
5
5
  const initializedRef = useRef(false); // yalnız bir dəfə mount üçün
6
6
  const shift4Ref = useRef(null);
@@ -95,7 +95,6 @@ export default function PaymentForm({amount,currency,currencyIcon,color,formwidt
95
95
  display: "flex",
96
96
  justifyContent: "center",
97
97
  width: "100%",
98
- padding: "20px",
99
98
  boxSizing: "border-box"
100
99
  }}
101
100
  >
@@ -107,7 +106,7 @@ export default function PaymentForm({amount,currency,currencyIcon,color,formwidt
107
106
  style={{
108
107
  display: "grid",
109
108
  gap: "12px",
110
- padding: "24px",
109
+ padding: "20px",
111
110
  backgroundColor: formbackgroundColor,
112
111
  borderRadius: formborderRadius,
113
112
  width: formwidth,
@@ -123,8 +122,8 @@ export default function PaymentForm({amount,currency,currencyIcon,color,formwidt
123
122
  data-shift4="number"
124
123
  className="form-control"
125
124
  style={{
126
- padding: "12px",
127
- borderRadius: "10px",
125
+ padding: inputpadding,
126
+ borderRadius: formborderRadius,
128
127
  border: "1px solid #ccc",
129
128
  boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
130
129
  }}
@@ -139,8 +138,8 @@ export default function PaymentForm({amount,currency,currencyIcon,color,formwidt
139
138
  data-shift4="expiry"
140
139
  className="form-control"
141
140
  style={{
142
- padding: "12px",
143
- borderRadius: "10px",
141
+ padding: inputpadding,
142
+ borderRadius: formborderRadius,
144
143
  border: "1px solid #ccc",
145
144
  boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
146
145
  }}
@@ -152,8 +151,8 @@ export default function PaymentForm({amount,currency,currencyIcon,color,formwidt
152
151
  data-shift4="cvc"
153
152
  className="form-control"
154
153
  style={{
155
- padding: "12px",
156
- borderRadius: "10px",
154
+ padding: inputpadding,
155
+ borderRadius: formborderRadius,
157
156
  border: "1px solid #ccc",
158
157
  boxShadow: "inset 0 2px 4px rgba(0,0,0,0.05)"
159
158
  }}
@@ -168,11 +167,11 @@ export default function PaymentForm({amount,currency,currencyIcon,color,formwidt
168
167
  style={{
169
168
  marginTop: "16px",
170
169
  width: "100%",
171
- padding: "14px",
170
+ padding: inputpadding+2,
172
171
  backgroundColor: color,
173
172
  color: "white",
174
173
  border: "none",
175
- borderRadius: "12px",
174
+ borderRadius: formborderRadius,
176
175
  fontWeight: "600",
177
176
  cursor: !isReady || isSubmitting ? "not-allowed" : "pointer",
178
177
  opacity: !isReady || isSubmitting ? 0.7 : 1