airwallex-payment-elements 1.131.0 → 1.147.0
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/.gitlab-ci.yml +0 -1
- package/lib/bin/airwallex.cjs.js +2 -2
- package/lib/bin/airwallex.es.js +2 -2
- package/lib/bin/airwallex.iife.js +2 -2
- package/package.json +1 -1
- package/types/airwallex.d.ts +87 -4
- package/types/dropInElement.d.ts +14 -0
- package/types/element.d.ts +391 -12
- package/types/events.d.ts +58 -1
package/.gitlab-ci.yml
CHANGED
|
@@ -91,7 +91,6 @@ publish-gitlab-package:
|
|
|
91
91
|
- which ssh-agent || ( apk update && apk add openssh-client )
|
|
92
92
|
- yarn --pure-lockfile --ignore-engines --cache-folder .yarn
|
|
93
93
|
- eval $(ssh-agent -s)
|
|
94
|
-
- echo "${SSH_PRIVATE_KEY}" | tr -d '\r' | ssh-add -
|
|
95
94
|
- mkdir -p ~/.ssh
|
|
96
95
|
- chmod 700 ~/.ssh
|
|
97
96
|
- echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
|
package/lib/bin/airwallex.cjs.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
/* Airwallex Checkout Component Version [1.
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",dev:"checkout-dev.airwallex.com",local:"localhost:3000"},r=r=>`https://${e[r]||e.prod}`,t="/assets/elements.bundle.min.js?version=1.
|
|
1
|
+
/* Airwallex Checkout Component Version [1.147.0] */
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",dev:"checkout-dev.airwallex.com",local:"localhost:3000"},r=r=>`https://${e[r]||e.prod}`,t="/assets/elements.bundle.min.js?version=1.147.0",o=e=>{const r=document.createElement("script");r.src=`${e}${t}`,r.crossOrigin="anonymous";const o=document.head||document.body;if(!o)throw new Error("Airwallex payment scripts requires a <head> or <body> html element in order to be loaded.");return o.appendChild(r),r},n=async e=>{if("undefined"==typeof window)return null;if(window.Airwallex)return window.Airwallex;let n=0;const l=async()=>{const n=document.querySelector(`script[src="${t}"], script[src="${t}/"]`)||o(r((null==e?void 0:e.env)||"prod"));return new Promise(((r,t)=>{n.addEventListener("load",(()=>{window.Airwallex?(window.Airwallex.init(e),r(window.Airwallex)):t(new Error("Failed to load Airwallex on load event"))})),n.addEventListener("error",(()=>{t(new Error("Failed to load Airwallex scripts")),n.remove&&n.remove()}))}))};for(;n<3;)try{return await l()}catch(e){n++,await new Promise((e=>window.setTimeout(e,500)))}return null},l=e=>{window.Airwallex?window.Airwallex.init(e):console.error("Please loadAirwallex() before init();")},a=e=>{if(window.Airwallex)return window.Airwallex.redirectToCheckout(e);console.error("Please loadAirwallex() before redirectToCheckout();")},i=(e,r)=>window.Airwallex?window.Airwallex.createElement(e,r):(console.error("Please loadAirwallex() before createElement();"),null),w=e=>window.Airwallex?window.Airwallex.destroyElement(e):(console.error("Please loadAirwallex() before destroyElement();"),!1),d=e=>window.Airwallex?window.Airwallex.getElement(e):(console.error("Please loadAirwallex() before getElement();"),null),s=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntent(e);{const e="Please loadAirwallex() before confirmPaymentIntent();";throw console.error(e),new Error(e)}},c=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntentWithSavedCard(e);{const e="Please loadAirwallex() before confirmPaymentIntentWithSavedCard();";throw console.error(e),new Error(e)}},x=async(e,r)=>{if(window.Airwallex)return window.Airwallex.createPaymentMethod(e,r);{const e="Please loadAirwallex() before createPaymentMethod();";throw console.error(e),new Error(e)}},m=async(e,r)=>{if(window.Airwallex)return window.Airwallex.getPaymentIntent(e,r);{const e="Please loadAirwallex() before getPaymentIntent();";throw console.error(e),new Error(e)}},A=async e=>{if(window.Airwallex)return window.Airwallex.createPaymentConsent(e);{const e="Please loadAirwallex() before createPaymentConsent();";throw console.error(e),new Error(e)}},y=e=>window.Airwallex.getDeviceFingerprint(e);var u={getGatewayUrl:r,loadAirwallex:n,loadAirwallexJs:o,init:l,redirectToCheckout:a,createElement:i,destroyElement:w,getDeviceFingerprint:y,getElement:d,getPaymentIntent:m,createPaymentMethod:x,createPaymentConsent:A,confirmPaymentIntent:s,confirmPaymentIntentWithSavedCard:c};exports.confirmPaymentIntent=s,exports.confirmPaymentIntentWithSavedCard=c,exports.createElement=i,exports.createPaymentConsent=A,exports.createPaymentMethod=x,exports.default=u,exports.destroyElement=w,exports.getDeviceFingerprint=y,exports.getElement=d,exports.getGatewayUrl=r,exports.getPaymentIntent=m,exports.init=l,exports.loadAirwallex=n,exports.loadAirwallexJs=o,exports.redirectToCheckout=a;
|
|
3
3
|
//# sourceMappingURL=airwallex.cjs.js.map
|
package/lib/bin/airwallex.es.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
/* Airwallex Checkout Component Version [1.
|
|
2
|
-
const e={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",dev:"checkout-dev.airwallex.com",local:"localhost:3000"},r=r=>`https://${e[r]||e.prod}`,o="/assets/elements.bundle.min.js?version=1.
|
|
1
|
+
/* Airwallex Checkout Component Version [1.147.0] */
|
|
2
|
+
const e={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",dev:"checkout-dev.airwallex.com",local:"localhost:3000"},r=r=>`https://${e[r]||e.prod}`,o="/assets/elements.bundle.min.js?version=1.147.0",n=e=>{const r=document.createElement("script");r.src=`${e}${o}`,r.crossOrigin="anonymous";const n=document.head||document.body;if(!n)throw new Error("Airwallex payment scripts requires a <head> or <body> html element in order to be loaded.");return n.appendChild(r),r},l=async e=>{if("undefined"==typeof window)return null;if(window.Airwallex)return window.Airwallex;let l=0;const t=async()=>{const l=document.querySelector(`script[src="${o}"], script[src="${o}/"]`)||n(r((null==e?void 0:e.env)||"prod"));return new Promise(((r,o)=>{l.addEventListener("load",(()=>{window.Airwallex?(window.Airwallex.init(e),r(window.Airwallex)):o(new Error("Failed to load Airwallex on load event"))})),l.addEventListener("error",(()=>{o(new Error("Failed to load Airwallex scripts")),l.remove&&l.remove()}))}))};for(;l<3;)try{return await t()}catch(e){l++,await new Promise((e=>window.setTimeout(e,500)))}return null},t=e=>{window.Airwallex?window.Airwallex.init(e):console.error("Please loadAirwallex() before init();")},a=e=>{if(window.Airwallex)return window.Airwallex.redirectToCheckout(e);console.error("Please loadAirwallex() before redirectToCheckout();")},i=(e,r)=>window.Airwallex?window.Airwallex.createElement(e,r):(console.error("Please loadAirwallex() before createElement();"),null),w=e=>window.Airwallex?window.Airwallex.destroyElement(e):(console.error("Please loadAirwallex() before destroyElement();"),!1),d=e=>window.Airwallex?window.Airwallex.getElement(e):(console.error("Please loadAirwallex() before getElement();"),null),c=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntent(e);{const e="Please loadAirwallex() before confirmPaymentIntent();";throw console.error(e),new Error(e)}},s=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntentWithSavedCard(e);{const e="Please loadAirwallex() before confirmPaymentIntentWithSavedCard();";throw console.error(e),new Error(e)}},m=async(e,r)=>{if(window.Airwallex)return window.Airwallex.createPaymentMethod(e,r);{const e="Please loadAirwallex() before createPaymentMethod();";throw console.error(e),new Error(e)}},x=async(e,r)=>{if(window.Airwallex)return window.Airwallex.getPaymentIntent(e,r);{const e="Please loadAirwallex() before getPaymentIntent();";throw console.error(e),new Error(e)}},A=async e=>{if(window.Airwallex)return window.Airwallex.createPaymentConsent(e);{const e="Please loadAirwallex() before createPaymentConsent();";throw console.error(e),new Error(e)}},u=e=>window.Airwallex.getDeviceFingerprint(e);var y={getGatewayUrl:r,loadAirwallex:l,loadAirwallexJs:n,init:t,redirectToCheckout:a,createElement:i,destroyElement:w,getDeviceFingerprint:u,getElement:d,getPaymentIntent:x,createPaymentMethod:m,createPaymentConsent:A,confirmPaymentIntent:c,confirmPaymentIntentWithSavedCard:s};export default y;export{c as confirmPaymentIntent,s as confirmPaymentIntentWithSavedCard,i as createElement,A as createPaymentConsent,m as createPaymentMethod,w as destroyElement,u as getDeviceFingerprint,d as getElement,r as getGatewayUrl,x as getPaymentIntent,t as init,l as loadAirwallex,n as loadAirwallexJs,a as redirectToCheckout};
|
|
3
3
|
//# sourceMappingURL=airwallex.es.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
/* Airwallex Checkout Component Version [1.
|
|
2
|
-
var Airwallex=function(e){"use strict";const r={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",dev:"checkout-dev.airwallex.com",local:"localhost:3000"},n=e=>`https://${r[e]||r.prod}`,t="/assets/elements.bundle.min.js?version=1.
|
|
1
|
+
/* Airwallex Checkout Component Version [1.147.0] */
|
|
2
|
+
var Airwallex=function(e){"use strict";const r={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",dev:"checkout-dev.airwallex.com",local:"localhost:3000"},n=e=>`https://${r[e]||r.prod}`,t="/assets/elements.bundle.min.js?version=1.147.0",o=e=>{const r=document.createElement("script");r.src=`${e}${t}`,r.crossOrigin="anonymous";const n=document.head||document.body;if(!n)throw new Error("Airwallex payment scripts requires a <head> or <body> html element in order to be loaded.");return n.appendChild(r),r},l=async e=>{if("undefined"==typeof window)return null;if(window.Airwallex)return window.Airwallex;let r=0;const l=async()=>{const r=document.querySelector(`script[src="${t}"], script[src="${t}/"]`)||o(n((null==e?void 0:e.env)||"prod"));return new Promise(((n,t)=>{r.addEventListener("load",(()=>{window.Airwallex?(window.Airwallex.init(e),n(window.Airwallex)):t(new Error("Failed to load Airwallex on load event"))})),r.addEventListener("error",(()=>{t(new Error("Failed to load Airwallex scripts")),r.remove&&r.remove()}))}))};for(;r<3;)try{return await l()}catch(e){r++,await new Promise((e=>window.setTimeout(e,500)))}return null},a=e=>{window.Airwallex?window.Airwallex.init(e):console.error("Please loadAirwallex() before init();")},i=e=>{if(window.Airwallex)return window.Airwallex.redirectToCheckout(e);console.error("Please loadAirwallex() before redirectToCheckout();")},w=(e,r)=>window.Airwallex?window.Airwallex.createElement(e,r):(console.error("Please loadAirwallex() before createElement();"),null),d=e=>window.Airwallex?window.Airwallex.destroyElement(e):(console.error("Please loadAirwallex() before destroyElement();"),!1),c=e=>window.Airwallex?window.Airwallex.getElement(e):(console.error("Please loadAirwallex() before getElement();"),null),s=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntent(e);{const e="Please loadAirwallex() before confirmPaymentIntent();";throw console.error(e),new Error(e)}},m=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntentWithSavedCard(e);{const e="Please loadAirwallex() before confirmPaymentIntentWithSavedCard();";throw console.error(e),new Error(e)}},x=async(e,r)=>{if(window.Airwallex)return window.Airwallex.createPaymentMethod(e,r);{const e="Please loadAirwallex() before createPaymentMethod();";throw console.error(e),new Error(e)}},A=async(e,r)=>{if(window.Airwallex)return window.Airwallex.getPaymentIntent(e,r);{const e="Please loadAirwallex() before getPaymentIntent();";throw console.error(e),new Error(e)}},u=async e=>{if(window.Airwallex)return window.Airwallex.createPaymentConsent(e);{const e="Please loadAirwallex() before createPaymentConsent();";throw console.error(e),new Error(e)}},y=e=>window.Airwallex.getDeviceFingerprint(e);var f={getGatewayUrl:n,loadAirwallex:l,loadAirwallexJs:o,init:a,redirectToCheckout:i,createElement:w,destroyElement:d,getDeviceFingerprint:y,getElement:c,getPaymentIntent:A,createPaymentMethod:x,createPaymentConsent:u,confirmPaymentIntent:s,confirmPaymentIntentWithSavedCard:m};return e.confirmPaymentIntent=s,e.confirmPaymentIntentWithSavedCard=m,e.createElement=w,e.createPaymentConsent=u,e.createPaymentMethod=x,e.default=f,e.destroyElement=d,e.getDeviceFingerprint=y,e.getElement=c,e.getGatewayUrl=n,e.getPaymentIntent=A,e.init=a,e.loadAirwallex=l,e.loadAirwallexJs=o,e.redirectToCheckout=i,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
|
|
3
3
|
//# sourceMappingURL=airwallex.iife.js.map
|
package/package.json
CHANGED
package/types/airwallex.d.ts
CHANGED
|
@@ -9,6 +9,10 @@ import {
|
|
|
9
9
|
WechatElementOptions,
|
|
10
10
|
ApplePayButtonOptions,
|
|
11
11
|
GooglePayButtonOptions,
|
|
12
|
+
KrCardExpiryDateElementOptions,
|
|
13
|
+
KrCardPswFirstTwoElementOptions,
|
|
14
|
+
KrCardIdentifierElementOptions,
|
|
15
|
+
KrCardNumberElementOptions,
|
|
12
16
|
ApplePayButtonElementType,
|
|
13
17
|
GooglePayButtonElementType,
|
|
14
18
|
CardElementType,
|
|
@@ -22,6 +26,10 @@ import {
|
|
|
22
26
|
QrcodeElementType,
|
|
23
27
|
CardNetwork,
|
|
24
28
|
Appearance,
|
|
29
|
+
KrCardExpiryDateElementType,
|
|
30
|
+
KrCardPswFirstTwoElementType,
|
|
31
|
+
KrCardIdentifierElementType,
|
|
32
|
+
KrCardNumberElementType,
|
|
25
33
|
} from './element';
|
|
26
34
|
import { QrcodeElementOptions } from './qrcodeElement';
|
|
27
35
|
import { Intent, PaymentMethodBasicInfo } from './cardNumber';
|
|
@@ -57,7 +65,8 @@ export type Locale =
|
|
|
57
65
|
| 'ru'
|
|
58
66
|
| 'sv'
|
|
59
67
|
| 'zh'
|
|
60
|
-
| 'zh-HK'
|
|
68
|
+
| 'zh-HK'
|
|
69
|
+
| 'tr';
|
|
61
70
|
|
|
62
71
|
/**
|
|
63
72
|
* Global option to customize font styles of Elements. You can specify font options using `family`, `src` and `weight` attributes.
|
|
@@ -219,7 +228,6 @@ export interface Layout {
|
|
|
219
228
|
alwaysShowMethodLabel?: boolean;
|
|
220
229
|
}
|
|
221
230
|
|
|
222
|
-
|
|
223
231
|
export interface HppLayout {
|
|
224
232
|
/**
|
|
225
233
|
* Specify the layout for the payment elements. By default, `accordion` layout is used on desktop and `tab` layout is used on mobile.
|
|
@@ -265,6 +273,11 @@ export interface HostPaymentPage {
|
|
|
265
273
|
* The payment consent details.
|
|
266
274
|
*/
|
|
267
275
|
payment_consent?: PaymentConsentOptions;
|
|
276
|
+
/**
|
|
277
|
+
* The options for saved payment method.
|
|
278
|
+
* @defaultValue `{ displayMode: 'auto', saveMode: 'auto' }`
|
|
279
|
+
*/
|
|
280
|
+
savedPaymentMethod?: SavedPaymentMethodOptions;
|
|
268
281
|
/**
|
|
269
282
|
* The ID of the Customer used in registered user checkout. Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Customers/Intro)
|
|
270
283
|
* This field is required when `mode` is `'recurring'`.
|
|
@@ -309,7 +322,10 @@ export interface HostPaymentPage {
|
|
|
309
322
|
*/
|
|
310
323
|
successUrl?: string;
|
|
311
324
|
/**
|
|
312
|
-
* The
|
|
325
|
+
* The HTTPS URL to redirect shoppers when payment fails.
|
|
326
|
+
* We do not recommend merchants to pass this value.
|
|
327
|
+
* If a payment fails, shoppers should retry the payment or switch to a different payment method instead of redirecting to a failure URL.
|
|
328
|
+
* @deprecated
|
|
313
329
|
*/
|
|
314
330
|
failUrl?: string;
|
|
315
331
|
/**
|
|
@@ -644,9 +660,50 @@ export interface TermsOfUse {
|
|
|
644
660
|
end_date?: string;
|
|
645
661
|
}
|
|
646
662
|
|
|
663
|
+
type SaveMode =
|
|
664
|
+
| 'auto' // Default. Current behavior:
|
|
665
|
+
// - When next_triggered_by is undefined and customer_id is provided:
|
|
666
|
+
// * Show the checkbox.
|
|
667
|
+
// * If the customer ticks it, store the method for future CIT.
|
|
668
|
+
// * If the customer does not tick it, process as a guest checkout.
|
|
669
|
+
// - When next_triggered_by = 'merchant':
|
|
670
|
+
// * Do not show the checkbox.
|
|
671
|
+
// * Store the method for future MIT.
|
|
672
|
+
// - When next_triggered_by = 'customer':
|
|
673
|
+
// * Do not show the checkbox.
|
|
674
|
+
// * Store the method for future CIT.
|
|
675
|
+
| 'enable' // Always store when possible (no checkbox).
|
|
676
|
+
| 'disable' // Never store (always guest checkout).
|
|
677
|
+
| 'collect_consent'; // Show a checkbox and only store if the customer opts in.
|
|
678
|
+
|
|
679
|
+
export interface SavedPaymentMethodOptions {
|
|
680
|
+
/**
|
|
681
|
+
* Controls if UI *displays* existing saved payment methods.
|
|
682
|
+
*
|
|
683
|
+
* - 'auto' (default): If we have customer_id + valid payment consents,
|
|
684
|
+
* fetch and show saved methods (current behavior).
|
|
685
|
+
* - 'never': Never show saved methods in the UI, even if they exist.
|
|
686
|
+
*
|
|
687
|
+
* Note: This only affects display. Whether we *store* a method is
|
|
688
|
+
* controlled by saveMode.
|
|
689
|
+
* @defaultValue `'auto'`
|
|
690
|
+
*/
|
|
691
|
+
displayMode?: 'auto' | 'never';
|
|
692
|
+
/**
|
|
693
|
+
* Whether and how to store the payment method used in this transaction.
|
|
694
|
+
* auto – when next_triggered_by is undefined and a customer_id is present, a checkbox is shown so the customer can choose between guest checkout and storing the method for future CIT; when next_triggered_by is merchant or customer, no checkbox is shown and the method is automatically stored for future MIT or CIT respectively.
|
|
695
|
+
* enable – Always store the payment method when possible; no checkbox is shown.
|
|
696
|
+
* disable – Never store the payment method; always treat the transaction as guest checkout.
|
|
697
|
+
* collect_consent – Always show a checkbox and only store the payment method if the customer explicitly opts in.
|
|
698
|
+
* @hidden
|
|
699
|
+
* @defaultValue `'auto'`
|
|
700
|
+
*/
|
|
701
|
+
saveMode?: SaveMode;
|
|
702
|
+
}
|
|
703
|
+
|
|
647
704
|
export interface PaymentConsentOptions {
|
|
648
705
|
/**
|
|
649
|
-
*
|
|
706
|
+
* The party to initiate subsequent payment
|
|
650
707
|
*/
|
|
651
708
|
next_triggered_by: 'merchant' | 'customer';
|
|
652
709
|
/**
|
|
@@ -698,6 +755,12 @@ export interface PaymentMethodRequestData {
|
|
|
698
755
|
* The payment consent details.
|
|
699
756
|
*/
|
|
700
757
|
payment_consent?: PaymentConsentOptions;
|
|
758
|
+
/**
|
|
759
|
+
* This field is used to indicate whether the current payment is initiated by the cardholder. This field must be used only in combination with payment_method_id field and is applicable only for Cvc element. FYI : next_triggered_by is used to indicate the driver for subsequent payments in the series.
|
|
760
|
+
*
|
|
761
|
+
* - `'customer'`: The payment is initiated by the customer using the stored payment method details.
|
|
762
|
+
*/
|
|
763
|
+
triggered_by?: 'customer';
|
|
701
764
|
/**
|
|
702
765
|
* The payment method details returned by calling createPaymentMethod().
|
|
703
766
|
*/
|
|
@@ -798,6 +861,22 @@ export interface ElementOptionsTypeMap {
|
|
|
798
861
|
* Define full featured card element type and its mapped option type. This integration renders a single widget for all card payment details.
|
|
799
862
|
*/
|
|
800
863
|
fullFeaturedCard: FullFeaturedCardElementOptions;
|
|
864
|
+
/**
|
|
865
|
+
* Define KR Card Expiry Element type and its mapped option type.
|
|
866
|
+
*/
|
|
867
|
+
krCardExpiry: KrCardExpiryDateElementOptions;
|
|
868
|
+
/**
|
|
869
|
+
* Define KR Card Password First two digits Element type and its mapped option type.
|
|
870
|
+
*/
|
|
871
|
+
krCardPswFirstTwo: KrCardPswFirstTwoElementOptions;
|
|
872
|
+
/**
|
|
873
|
+
* Define KR Card Identifier Element type and its mapped option type.
|
|
874
|
+
*/
|
|
875
|
+
krCardIdentifier: KrCardIdentifierElementOptions;
|
|
876
|
+
/**
|
|
877
|
+
* Define KR Card Number Element type and its mapped option type.
|
|
878
|
+
*/
|
|
879
|
+
krCardNumber: KrCardNumberElementOptions;
|
|
801
880
|
}
|
|
802
881
|
|
|
803
882
|
export interface ElementTypeMap {
|
|
@@ -812,6 +891,10 @@ export interface ElementTypeMap {
|
|
|
812
891
|
qrcode?: QrcodeElementType;
|
|
813
892
|
redirect?: RedirectElementType;
|
|
814
893
|
fullFeaturedCard?: FullFeaturedCardElementType;
|
|
894
|
+
krCardExpiry?: KrCardExpiryDateElementType;
|
|
895
|
+
krCardPswFirstTwo?: KrCardPswFirstTwoElementType;
|
|
896
|
+
krCardIdentifier?: KrCardIdentifierElementType;
|
|
897
|
+
krCardNumber?: KrCardNumberElementType;
|
|
815
898
|
}
|
|
816
899
|
|
|
817
900
|
/**
|
package/types/dropInElement.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ import {
|
|
|
6
6
|
AuthorizationType,
|
|
7
7
|
Layout,
|
|
8
8
|
PaymentConsentOptions,
|
|
9
|
+
SavedPaymentMethodOptions,
|
|
9
10
|
SubmitType,
|
|
10
11
|
} from './airwallex';
|
|
11
12
|
import { ApplePayHppOrDropInRequestOptions, GooglePayRequestOptions, ContactField, LPMFlows } from './element';
|
|
@@ -70,6 +71,11 @@ export interface DropInElementOptions {
|
|
|
70
71
|
* The payment consent details.
|
|
71
72
|
*/
|
|
72
73
|
payment_consent?: PaymentConsentOptions;
|
|
74
|
+
/**
|
|
75
|
+
* The options for saved payment method.
|
|
76
|
+
* @defaultValue `{ displayMode: 'auto', saveMode: 'auto' }`
|
|
77
|
+
*/
|
|
78
|
+
savedPaymentMethod?: SavedPaymentMethodOptions;
|
|
73
79
|
/**
|
|
74
80
|
* The payment methods your website would like to integrate with
|
|
75
81
|
* @deprecated use {@link methods} instead
|
|
@@ -191,4 +197,12 @@ export interface DropInElementOptions {
|
|
|
191
197
|
* @defaultValue `'pay'`
|
|
192
198
|
*/
|
|
193
199
|
submitType?: SubmitType;
|
|
200
|
+
/**
|
|
201
|
+
* This field is used for Multi-Currency Pricing(MCP).
|
|
202
|
+
* The merchant can create a quote for the shopper, and pass the quote_id to Drop-in Element.
|
|
203
|
+
* If the quote_id is provided, Drop-in Element will use that quote to convert the amount and currency.
|
|
204
|
+
* And each time the shopper changes the currency, the merchant needs to create a new quote or reuse existing quotes and update the quote_id.
|
|
205
|
+
* If the quote_id is not provided, Drop-in Element will use ACC logic to automatically convert the amount and currency.
|
|
206
|
+
*/
|
|
207
|
+
quote_id?: string | null;
|
|
194
208
|
}
|
package/types/element.d.ts
CHANGED
|
@@ -22,6 +22,8 @@ import {
|
|
|
22
22
|
CardElementEventHandler,
|
|
23
23
|
DropInElementEventCode,
|
|
24
24
|
DropInElementEventHandler,
|
|
25
|
+
DropInElementTriggerEventParams,
|
|
26
|
+
DropInTriggerEventCode,
|
|
25
27
|
GooglePayButtonEventCode,
|
|
26
28
|
GooglePayButtonEventHandler,
|
|
27
29
|
SplitElementEventCode,
|
|
@@ -53,7 +55,11 @@ export type ElementType =
|
|
|
53
55
|
| 'qrcode'
|
|
54
56
|
| 'redirect'
|
|
55
57
|
| 'dropIn'
|
|
56
|
-
| 'fullFeaturedCard'
|
|
58
|
+
| 'fullFeaturedCard'
|
|
59
|
+
| 'krCardExpiry'
|
|
60
|
+
| 'krCardPswFirstTwo'
|
|
61
|
+
| 'krCardIdentifier'
|
|
62
|
+
| 'krCardNumber';
|
|
57
63
|
|
|
58
64
|
/**
|
|
59
65
|
* The payment method options for the redirect element. Integration with the payment method will redirect the shopper from the merchant's checkout site to the specific provider's authentication page.
|
|
@@ -146,7 +152,10 @@ export type PaymentMethodWithRedirect =
|
|
|
146
152
|
| 'twint'
|
|
147
153
|
| 'laybuy'
|
|
148
154
|
| 'venmo'
|
|
149
|
-
| 'payme'
|
|
155
|
+
| 'payme'
|
|
156
|
+
| 'tabby'
|
|
157
|
+
| 'octopus'
|
|
158
|
+
| 'spaylater';
|
|
150
159
|
|
|
151
160
|
export type DirectDebitPaymentMethod =
|
|
152
161
|
| 'ach_direct_debit'
|
|
@@ -240,6 +249,8 @@ export type EventCode =
|
|
|
240
249
|
| 'onPressArrowKey'
|
|
241
250
|
| 'onSwitchMethod';
|
|
242
251
|
|
|
252
|
+
export type TriggerEventCode = 'intentRefetch';
|
|
253
|
+
|
|
243
254
|
/**
|
|
244
255
|
* Return error when user input validation or the request fails.
|
|
245
256
|
*/
|
|
@@ -1035,7 +1046,7 @@ export interface GooglePayButtonOptions extends GooglePayRequestOptions {
|
|
|
1035
1046
|
mode?: Mode;
|
|
1036
1047
|
/**
|
|
1037
1048
|
* Indicate the amount and currency of the Payment Intent.
|
|
1038
|
-
* If the `mode` is set to `'recurring'` and `intent_id` omitted, amount should be `{value: 0, currency: 'Replace with payment currency'}`.
|
|
1049
|
+
* If the `mode` is set to `'recurring'` and `intent_id` omitted, amount should be `{value: '0', currency: 'Replace with payment currency'}`.
|
|
1039
1050
|
*/
|
|
1040
1051
|
amount: Amount;
|
|
1041
1052
|
|
|
@@ -1241,7 +1252,7 @@ export interface ApplePayButtonOptions extends ApplePayRequestOptions {
|
|
|
1241
1252
|
/**
|
|
1242
1253
|
* Indicate the amount and currency of the Payment Intent.
|
|
1243
1254
|
*
|
|
1244
|
-
* If the `mode` is set to `'recurring'` and `intent_id` omitted, amount should be `{value: 0, currency: 'Replace with payment currency'}`.
|
|
1255
|
+
* If the `mode` is set to `'recurring'` and `intent_id` omitted, amount should be `{value: '0', currency: 'Replace with payment currency'}`.
|
|
1245
1256
|
*/
|
|
1246
1257
|
amount: Amount;
|
|
1247
1258
|
/**
|
|
@@ -1294,6 +1305,109 @@ export interface WechatElementOptions {
|
|
|
1294
1305
|
style?: CSSProperties;
|
|
1295
1306
|
}
|
|
1296
1307
|
|
|
1308
|
+
/**
|
|
1309
|
+
* Applies to split card element type integration, the interface used when `createElement()` with type `krCardExpiry`.
|
|
1310
|
+
*/
|
|
1311
|
+
export interface KrCardExpiryDateElementOptions {
|
|
1312
|
+
/**
|
|
1313
|
+
* Whether the `krCardExpiry` Element input is disabled or not.
|
|
1314
|
+
* @defaultValue `false`
|
|
1315
|
+
*/
|
|
1316
|
+
disabled?: boolean;
|
|
1317
|
+
/**
|
|
1318
|
+
* A short hint to suggest the expected value of an input field to the shopper.
|
|
1319
|
+
*/
|
|
1320
|
+
placeholder?: string;
|
|
1321
|
+
/**
|
|
1322
|
+
* Style for the krCardExpiry Element.
|
|
1323
|
+
*/
|
|
1324
|
+
style?: InputStyle;
|
|
1325
|
+
}
|
|
1326
|
+
|
|
1327
|
+
/**
|
|
1328
|
+
* Applies to split card element type integration, the interface used when `createElement()` with type `krCardPswFirstTwo`.
|
|
1329
|
+
*/
|
|
1330
|
+
export interface KrCardPswFirstTwoElementOptions {
|
|
1331
|
+
/**
|
|
1332
|
+
* Whether the `krCardPswFirstTwo` Element input is disabled or not.
|
|
1333
|
+
* @defaultValue `false`
|
|
1334
|
+
*/
|
|
1335
|
+
disabled?: boolean;
|
|
1336
|
+
/**
|
|
1337
|
+
* A short hint to suggest the expected value of an input field to the shopper.
|
|
1338
|
+
*/
|
|
1339
|
+
placeholder?: string;
|
|
1340
|
+
/**
|
|
1341
|
+
* Style for the krCardPswFirstTwo Element.
|
|
1342
|
+
*/
|
|
1343
|
+
style?: InputStyle;
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1346
|
+
/**
|
|
1347
|
+
* Applies to split card element type integration, the interface used when `createElement()` with type `krCardIdentifier`.
|
|
1348
|
+
*/
|
|
1349
|
+
export interface KrCardIdentifierElementOptions {
|
|
1350
|
+
/**
|
|
1351
|
+
* The type of the identifier.
|
|
1352
|
+
*/
|
|
1353
|
+
cardType: 'personal' | 'company';
|
|
1354
|
+
/**
|
|
1355
|
+
* Whether the `krCardIdentifier` Element input is disabled or not.
|
|
1356
|
+
* @defaultValue `false`
|
|
1357
|
+
*/
|
|
1358
|
+
disabled?: boolean;
|
|
1359
|
+
/**
|
|
1360
|
+
* A short hint to suggest the expected value of an input field to the shopper when card type is 'personal'.
|
|
1361
|
+
*/
|
|
1362
|
+
dateOfBirthPlaceholder?: string;
|
|
1363
|
+
/**
|
|
1364
|
+
* A short hint to suggest the expected value of an input field to the shopper when card type is 'company'.
|
|
1365
|
+
*/
|
|
1366
|
+
businessNumberPlaceholder?: string;
|
|
1367
|
+
/**
|
|
1368
|
+
* Style for the krCardIdentifier Element.
|
|
1369
|
+
*/
|
|
1370
|
+
style?: InputStyle;
|
|
1371
|
+
}
|
|
1372
|
+
|
|
1373
|
+
/**
|
|
1374
|
+
* Applies to split card element type integration, the interface used when `createElement()` called with type `krCardNumber`
|
|
1375
|
+
*/
|
|
1376
|
+
export interface KrCardNumberElementOptions {
|
|
1377
|
+
/**
|
|
1378
|
+
* Whether the `krCardNumber` Element input is disabled or not.
|
|
1379
|
+
* @defaultValue `false`
|
|
1380
|
+
*/
|
|
1381
|
+
disabled?: boolean;
|
|
1382
|
+
/**
|
|
1383
|
+
* The Payment Intent you would like to checkout.
|
|
1384
|
+
* Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/)
|
|
1385
|
+
*
|
|
1386
|
+
*/
|
|
1387
|
+
intent?: Intent;
|
|
1388
|
+
/**
|
|
1389
|
+
* Whether the amount should be captured automatically upon successful payment authorization.
|
|
1390
|
+
* Set it to `false` if you want to place a hold on the payment method and capture the funds sometime later.
|
|
1391
|
+
* @defaultValue `true`
|
|
1392
|
+
*/
|
|
1393
|
+
autoCapture?: boolean;
|
|
1394
|
+
/**
|
|
1395
|
+
* The authorization type for the card payment.
|
|
1396
|
+
* Set it to `'pre_auth'` if you want to place a hold on your customer's card for more than 7 days, i.e., extend the authorization time window.
|
|
1397
|
+
* Currently it's only available when the card brand is Visa or Mastercard. `autoCapture` will be automatically set to `false` if you enable `'pre_auth'`.
|
|
1398
|
+
* @defaultValue `'final_auth'`
|
|
1399
|
+
*/
|
|
1400
|
+
authorizationType?: AuthorizationType;
|
|
1401
|
+
/**
|
|
1402
|
+
* A short hint to suggest the expected value of an input field to the shopper.
|
|
1403
|
+
*/
|
|
1404
|
+
placeholder?: string;
|
|
1405
|
+
/**
|
|
1406
|
+
* Style for the krCardNumber Element.
|
|
1407
|
+
*/
|
|
1408
|
+
style?: InputStyle;
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1297
1411
|
/**
|
|
1298
1412
|
* Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
|
|
1299
1413
|
*/
|
|
@@ -1484,7 +1598,7 @@ export interface CardElementType extends ElementBaseType {
|
|
|
1484
1598
|
update(options?: Partial<CardElementOptions>, initOptions?: Partial<InitOptions>): void;
|
|
1485
1599
|
/**
|
|
1486
1600
|
* Listen to Element events.
|
|
1487
|
-
*
|
|
1601
|
+
* @typeParam EventCode - A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.
|
|
1488
1602
|
* @param event - The event name
|
|
1489
1603
|
* @param handler - The event handler
|
|
1490
1604
|
* @example
|
|
@@ -1494,7 +1608,7 @@ export interface CardElementType extends ElementBaseType {
|
|
|
1494
1608
|
* });
|
|
1495
1609
|
* ```
|
|
1496
1610
|
*/
|
|
1497
|
-
on<
|
|
1611
|
+
on<EventCode extends CardElementEventCode>(eventCode: EventCode, handler: CardElementEventHandler<EventCode>): void;
|
|
1498
1612
|
}
|
|
1499
1613
|
|
|
1500
1614
|
/**
|
|
@@ -1583,6 +1697,17 @@ export interface CardNumberElementType extends ElementBaseType {
|
|
|
1583
1697
|
*/
|
|
1584
1698
|
getBinInfo(client_secret: string): Promise<BinInfo>;
|
|
1585
1699
|
|
|
1700
|
+
/**
|
|
1701
|
+
*
|
|
1702
|
+
* @param id - The ID of the Payment Intent.
|
|
1703
|
+
* @param client_secret - The client secret of the Payment Intent.
|
|
1704
|
+
* @example
|
|
1705
|
+
* ```ts
|
|
1706
|
+
* element.getPaymentIntent('replace-with-your-intent-id', 'replace-with-your-client-secret');
|
|
1707
|
+
* ```
|
|
1708
|
+
*/
|
|
1709
|
+
getPaymentIntent(id: string, client_secret: string): Promise<Intent>;
|
|
1710
|
+
|
|
1586
1711
|
/**
|
|
1587
1712
|
* Using this function to create a payment method for future payments. The created payment method can be saved in your system.
|
|
1588
1713
|
* @param data - Payment method request payload
|
|
@@ -1612,6 +1737,7 @@ export interface CardNumberElementType extends ElementBaseType {
|
|
|
1612
1737
|
update(options?: Partial<CardNumberElementOptions>, initOptions?: Partial<InitOptions>): void;
|
|
1613
1738
|
/**
|
|
1614
1739
|
* Listen to Element events.
|
|
1740
|
+
* @typeParam EventCode - A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.
|
|
1615
1741
|
* @param eventCode - The event code to listen for.
|
|
1616
1742
|
* @param handler - The callback function that will be called when the event occurs.
|
|
1617
1743
|
* @example
|
|
@@ -1622,7 +1748,7 @@ export interface CardNumberElementType extends ElementBaseType {
|
|
|
1622
1748
|
* });
|
|
1623
1749
|
* ```
|
|
1624
1750
|
*/
|
|
1625
|
-
on<
|
|
1751
|
+
on<EventCode extends SplitElementEventCode>(eventCode: EventCode, handler: SplitElementEventHandler<EventCode>): void;
|
|
1626
1752
|
}
|
|
1627
1753
|
|
|
1628
1754
|
/**
|
|
@@ -1665,6 +1791,7 @@ export interface ExpiryDateElementType extends ElementBaseType {
|
|
|
1665
1791
|
update(options?: Partial<ExpiryDateElementOptions>, initOptions?: Partial<InitOptions>): void;
|
|
1666
1792
|
/**
|
|
1667
1793
|
* Listen to Element events.
|
|
1794
|
+
* @typeParam EventCode - A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.
|
|
1668
1795
|
* @param eventCode - The event code to listen for.
|
|
1669
1796
|
* @param handler - The callback function that will be called when the event occurs.
|
|
1670
1797
|
* @example
|
|
@@ -1675,7 +1802,7 @@ export interface ExpiryDateElementType extends ElementBaseType {
|
|
|
1675
1802
|
* });
|
|
1676
1803
|
* ```
|
|
1677
1804
|
*/
|
|
1678
|
-
on<
|
|
1805
|
+
on<EventCode extends SplitElementEventCode>(eventCode: EventCode, handler: SplitElementEventHandler<EventCode>): void;
|
|
1679
1806
|
}
|
|
1680
1807
|
|
|
1681
1808
|
/**
|
|
@@ -1738,6 +1865,7 @@ export interface CvcElementType extends ElementBaseType {
|
|
|
1738
1865
|
update(options?: Partial<CvcElementOptions>, initOptions?: Partial<InitOptions>): void;
|
|
1739
1866
|
/**
|
|
1740
1867
|
* Listen to Element events.
|
|
1868
|
+
* @typeParam EventCode - A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.
|
|
1741
1869
|
* @param eventCode - The event code to listen for.
|
|
1742
1870
|
* @param handler - The callback function that will be called when the event occurs.
|
|
1743
1871
|
* @example
|
|
@@ -1748,7 +1876,7 @@ export interface CvcElementType extends ElementBaseType {
|
|
|
1748
1876
|
* });
|
|
1749
1877
|
* ```
|
|
1750
1878
|
*/
|
|
1751
|
-
on<
|
|
1879
|
+
on<EventCode extends SplitElementEventCode>(eventCode: EventCode, handler: SplitElementEventHandler<EventCode>): void;
|
|
1752
1880
|
}
|
|
1753
1881
|
|
|
1754
1882
|
interface ParameterObject {
|
|
@@ -1789,6 +1917,7 @@ export interface ApplePayButtonElementType extends ElementBaseType {
|
|
|
1789
1917
|
|
|
1790
1918
|
/**
|
|
1791
1919
|
* Listen to Element events.
|
|
1920
|
+
* @typeParam EventCode - A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.
|
|
1792
1921
|
* @param eventCode - The event code to listen for.
|
|
1793
1922
|
* @param handler - The callback function that will be called when the event occurs.
|
|
1794
1923
|
* @example
|
|
@@ -1799,7 +1928,10 @@ export interface ApplePayButtonElementType extends ElementBaseType {
|
|
|
1799
1928
|
* });
|
|
1800
1929
|
* ```
|
|
1801
1930
|
*/
|
|
1802
|
-
on<
|
|
1931
|
+
on<EventCode extends ApplePayButtonEventCode>(
|
|
1932
|
+
eventCode: EventCode,
|
|
1933
|
+
handler: ApplePayButtonEventHandler<EventCode>,
|
|
1934
|
+
): void;
|
|
1803
1935
|
/**
|
|
1804
1936
|
* Call this function when the shopper is ready to make a payment as per the details in the Payment Intent.
|
|
1805
1937
|
* @example
|
|
@@ -1861,6 +1993,7 @@ export interface DropInElementType extends ElementBaseType {
|
|
|
1861
1993
|
update(options?: Partial<DropInElementOptions>, initOptions?: Partial<InitOptions>): void;
|
|
1862
1994
|
/**
|
|
1863
1995
|
* Listen to the Element events.
|
|
1996
|
+
* @typeParam EventCode - A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.
|
|
1864
1997
|
* @param eventCode - The event code to listen for.
|
|
1865
1998
|
* @param handler - The callback function that will be called when the event occurs.
|
|
1866
1999
|
* @example
|
|
@@ -1871,7 +2004,21 @@ export interface DropInElementType extends ElementBaseType {
|
|
|
1871
2004
|
* });
|
|
1872
2005
|
* ```
|
|
1873
2006
|
*/
|
|
1874
|
-
on<
|
|
2007
|
+
on<EventCode extends DropInElementEventCode>(
|
|
2008
|
+
eventCode: EventCode,
|
|
2009
|
+
handler: DropInElementEventHandler<EventCode>,
|
|
2010
|
+
): void;
|
|
2011
|
+
|
|
2012
|
+
/**
|
|
2013
|
+
* Call this function to trigger a specific event.
|
|
2014
|
+
* @param code - The event code to trigger.
|
|
2015
|
+
* @param params - The parameters that pass to the triggered event handler.
|
|
2016
|
+
* @example
|
|
2017
|
+
* ```ts
|
|
2018
|
+
* element.trigger('intentRefetch');
|
|
2019
|
+
* ```
|
|
2020
|
+
*/
|
|
2021
|
+
trigger<T extends DropInTriggerEventCode>(code: T, params?: DropInElementTriggerEventParams<T>): void;
|
|
1875
2022
|
}
|
|
1876
2023
|
|
|
1877
2024
|
/**
|
|
@@ -1894,6 +2041,7 @@ export interface GooglePayButtonElementType extends ElementBaseType {
|
|
|
1894
2041
|
|
|
1895
2042
|
/**
|
|
1896
2043
|
* Listen to Element events.
|
|
2044
|
+
* @typeParam EventCode - A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.
|
|
1897
2045
|
* @param eventCode - The event code to listen for.
|
|
1898
2046
|
* @param handler - The callback function that will be called when the event occurs.
|
|
1899
2047
|
* @example
|
|
@@ -1904,7 +2052,10 @@ export interface GooglePayButtonElementType extends ElementBaseType {
|
|
|
1904
2052
|
* });
|
|
1905
2053
|
* ```
|
|
1906
2054
|
*/
|
|
1907
|
-
on<
|
|
2055
|
+
on<EventCode extends GooglePayButtonEventCode>(
|
|
2056
|
+
eventCode: EventCode,
|
|
2057
|
+
handler: GooglePayButtonEventHandler<EventCode>,
|
|
2058
|
+
): void;
|
|
1908
2059
|
|
|
1909
2060
|
/**
|
|
1910
2061
|
* Call this function when the shopper is ready to make a payment as per the details in the Payment Intent.
|
|
@@ -2041,3 +2192,231 @@ export interface RedirectElementType extends ElementBaseType {
|
|
|
2041
2192
|
*/
|
|
2042
2193
|
on(event: RedirectElementEvent, handler: EventListener): void;
|
|
2043
2194
|
}
|
|
2195
|
+
|
|
2196
|
+
/**
|
|
2197
|
+
* Functions and external fields can be used in your integration flow with Airwallex element
|
|
2198
|
+
*/
|
|
2199
|
+
export interface KrCardExpiryDateElementType extends ElementBaseType {
|
|
2200
|
+
/**
|
|
2201
|
+
* Using this function to blur the HTML Input element.
|
|
2202
|
+
* @example
|
|
2203
|
+
* ```ts
|
|
2204
|
+
* element.blur();
|
|
2205
|
+
* ```
|
|
2206
|
+
*/
|
|
2207
|
+
blur(): void;
|
|
2208
|
+
/**
|
|
2209
|
+
* Using this function to clear the HTML Input element.
|
|
2210
|
+
* @example
|
|
2211
|
+
* ```ts
|
|
2212
|
+
* element.clear();
|
|
2213
|
+
* ```
|
|
2214
|
+
*/
|
|
2215
|
+
clear(): void;
|
|
2216
|
+
/**
|
|
2217
|
+
* Using this function to focus the HTML Input element
|
|
2218
|
+
* @example
|
|
2219
|
+
* ```ts
|
|
2220
|
+
* element.focus();
|
|
2221
|
+
* ```
|
|
2222
|
+
*/
|
|
2223
|
+
focus(): void;
|
|
2224
|
+
/**
|
|
2225
|
+
* Call this function to update Element options after creating the Element.
|
|
2226
|
+
* @example
|
|
2227
|
+
* ```ts
|
|
2228
|
+
* element.update({
|
|
2229
|
+
* placeholder: 'replace-with-your-placeholder',
|
|
2230
|
+
* });
|
|
2231
|
+
* ```
|
|
2232
|
+
*/
|
|
2233
|
+
update(options?: Partial<KrCardExpiryDateElementOptions>, initOptions?: Partial<InitOptions>): void;
|
|
2234
|
+
/**
|
|
2235
|
+
* Listen to Element events.
|
|
2236
|
+
* @typeParam EventCode - A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.
|
|
2237
|
+
* @param eventCode - The event code to listen for.
|
|
2238
|
+
* @param handler - The callback function that will be called when the event occurs.
|
|
2239
|
+
* @example
|
|
2240
|
+
* ```ts
|
|
2241
|
+
* element.on('change', (e) => {
|
|
2242
|
+
* const { completed, empty, error } = e.detail;
|
|
2243
|
+
* // Handle change event
|
|
2244
|
+
* });
|
|
2245
|
+
* ```
|
|
2246
|
+
*/
|
|
2247
|
+
on<EventCode extends SplitElementEventCode>(eventCode: EventCode, handler: SplitElementEventHandler<EventCode>): void;
|
|
2248
|
+
}
|
|
2249
|
+
|
|
2250
|
+
/**
|
|
2251
|
+
* Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
|
|
2252
|
+
*/
|
|
2253
|
+
export interface KrCardPswFirstTwoElementType extends ElementBaseType {
|
|
2254
|
+
/**
|
|
2255
|
+
* Using this function to blur the HTML Input element.
|
|
2256
|
+
* @example
|
|
2257
|
+
* ```ts
|
|
2258
|
+
* element.blur();
|
|
2259
|
+
* ```
|
|
2260
|
+
*/
|
|
2261
|
+
blur(): void;
|
|
2262
|
+
/**
|
|
2263
|
+
* Using this function to clear the HTML Input element.
|
|
2264
|
+
* @example
|
|
2265
|
+
* ```ts
|
|
2266
|
+
* element.clear();
|
|
2267
|
+
* ```
|
|
2268
|
+
*/
|
|
2269
|
+
clear(): void;
|
|
2270
|
+
/**
|
|
2271
|
+
* Using this function to focus the HTML Input element
|
|
2272
|
+
* @example
|
|
2273
|
+
* ```ts
|
|
2274
|
+
* element.focus();
|
|
2275
|
+
* ```
|
|
2276
|
+
*/
|
|
2277
|
+
focus(): void;
|
|
2278
|
+
/**
|
|
2279
|
+
* Call this function to update Element options after creating the Element.
|
|
2280
|
+
* @example
|
|
2281
|
+
* ```ts
|
|
2282
|
+
* element.update({
|
|
2283
|
+
* placeholder: 'replace-with-your-placeholder',
|
|
2284
|
+
* });
|
|
2285
|
+
* ```
|
|
2286
|
+
*/
|
|
2287
|
+
update(options?: Partial<KrCardPswFirstTwoElementOptions>, initOptions?: Partial<InitOptions>): void;
|
|
2288
|
+
/**
|
|
2289
|
+
* Listen to Element events.
|
|
2290
|
+
* @typeParam EventCode - A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.
|
|
2291
|
+
* @param eventCode - The event code to listen for.
|
|
2292
|
+
* @param handler - The callback function that will be called when the event occurs.
|
|
2293
|
+
* @example
|
|
2294
|
+
* ```ts
|
|
2295
|
+
* element.on('change', (e) => {
|
|
2296
|
+
* const { completed, empty, error } = e.detail;
|
|
2297
|
+
* // Handle change event
|
|
2298
|
+
* });
|
|
2299
|
+
* ```
|
|
2300
|
+
*/
|
|
2301
|
+
on<EventCode extends SplitElementEventCode>(eventCode: EventCode, handler: SplitElementEventHandler<EventCode>): void;
|
|
2302
|
+
}
|
|
2303
|
+
|
|
2304
|
+
/**
|
|
2305
|
+
* Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
|
|
2306
|
+
*/
|
|
2307
|
+
export interface KrCardIdentifierElementType extends ElementBaseType {
|
|
2308
|
+
/**
|
|
2309
|
+
* Using this function to blur the HTML Input element.
|
|
2310
|
+
* @example
|
|
2311
|
+
* ```ts
|
|
2312
|
+
* element.blur();
|
|
2313
|
+
* ```
|
|
2314
|
+
*/
|
|
2315
|
+
blur(): void;
|
|
2316
|
+
/**
|
|
2317
|
+
* Using this function to clear the HTML Input element.
|
|
2318
|
+
* @example
|
|
2319
|
+
* ```ts
|
|
2320
|
+
* element.clear();
|
|
2321
|
+
* ```
|
|
2322
|
+
*/
|
|
2323
|
+
clear(): void;
|
|
2324
|
+
/**
|
|
2325
|
+
* Using this function to focus the HTML Input element
|
|
2326
|
+
* @example
|
|
2327
|
+
* ```ts
|
|
2328
|
+
* element.focus();
|
|
2329
|
+
* ```
|
|
2330
|
+
*/
|
|
2331
|
+
focus(): void;
|
|
2332
|
+
/**
|
|
2333
|
+
* Call this function to update Element options after creating the Element.
|
|
2334
|
+
* @example
|
|
2335
|
+
* ```ts
|
|
2336
|
+
* element.update({
|
|
2337
|
+
* placeholder: 'replace-with-your-placeholder',
|
|
2338
|
+
* });
|
|
2339
|
+
* ```
|
|
2340
|
+
*/
|
|
2341
|
+
update(options?: Partial<KrCardIdentifierElementOptions>, initOptions?: Partial<InitOptions>): void;
|
|
2342
|
+
/**
|
|
2343
|
+
* Listen to Element events.
|
|
2344
|
+
* @typeParam EventCode - A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.
|
|
2345
|
+
* @param eventCode - The event code to listen for.
|
|
2346
|
+
* @param handler - The callback function that will be called when the event occurs.
|
|
2347
|
+
* @example
|
|
2348
|
+
* ```ts
|
|
2349
|
+
* element.on('change', (e) => {
|
|
2350
|
+
* const { completed, empty, error } = e.detail;
|
|
2351
|
+
* // Handle change event
|
|
2352
|
+
* });
|
|
2353
|
+
* ```
|
|
2354
|
+
*/
|
|
2355
|
+
on<EventCode extends SplitElementEventCode>(eventCode: EventCode, handler: SplitElementEventHandler<EventCode>): void;
|
|
2356
|
+
}
|
|
2357
|
+
|
|
2358
|
+
/**
|
|
2359
|
+
* Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
|
|
2360
|
+
*/
|
|
2361
|
+
export interface KrCardNumberElementType extends ElementBaseType {
|
|
2362
|
+
/**
|
|
2363
|
+
* Using this function to blur the HTML Input element.
|
|
2364
|
+
* @example
|
|
2365
|
+
* ```ts
|
|
2366
|
+
* element.blur();
|
|
2367
|
+
* ```
|
|
2368
|
+
*/
|
|
2369
|
+
blur(): void;
|
|
2370
|
+
/**
|
|
2371
|
+
* Using this function to clear the HTML Input element.
|
|
2372
|
+
* @example
|
|
2373
|
+
* ```ts
|
|
2374
|
+
* element.clear();
|
|
2375
|
+
* ```
|
|
2376
|
+
*/
|
|
2377
|
+
clear(): void;
|
|
2378
|
+
/**
|
|
2379
|
+
* Using this function to focus the HTML Input element
|
|
2380
|
+
* @example
|
|
2381
|
+
* ```ts
|
|
2382
|
+
* element.focus();
|
|
2383
|
+
* ```
|
|
2384
|
+
*/
|
|
2385
|
+
focus(): void;
|
|
2386
|
+
/**
|
|
2387
|
+
* Call this function when the shopper is ready to make a payment as per the details in the Payment Intent.
|
|
2388
|
+
*
|
|
2389
|
+
* Confirms the Payment Intent.
|
|
2390
|
+
*@example
|
|
2391
|
+
* ```ts
|
|
2392
|
+
* element.confirm({
|
|
2393
|
+
* client_secret: 'replace-with-your-client-secret',
|
|
2394
|
+
* });
|
|
2395
|
+
* ```
|
|
2396
|
+
*/
|
|
2397
|
+
confirm(data: PaymentMethodRequestData): Promise<Intent>;
|
|
2398
|
+
/**
|
|
2399
|
+
* Call this function to update Element options after creating the Element.
|
|
2400
|
+
* @example
|
|
2401
|
+
* ```ts
|
|
2402
|
+
* element.update({
|
|
2403
|
+
* autoCapture: false,
|
|
2404
|
+
* });
|
|
2405
|
+
* ```
|
|
2406
|
+
*/
|
|
2407
|
+
update(options?: Partial<KrCardNumberElementOptions>, initOptions?: Partial<InitOptions>): void;
|
|
2408
|
+
/**
|
|
2409
|
+
* Listen to Element events.
|
|
2410
|
+
* @typeParam EventCode - A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.
|
|
2411
|
+
* @param eventCode - The event code to listen for.
|
|
2412
|
+
* @param handler - The callback function that will be called when the event occurs.
|
|
2413
|
+
* @example
|
|
2414
|
+
* ```ts
|
|
2415
|
+
* element.on('change', (e) => {
|
|
2416
|
+
* const { completed, empty, error } = e.detail;
|
|
2417
|
+
* // Handle change event
|
|
2418
|
+
* });
|
|
2419
|
+
* ```
|
|
2420
|
+
*/
|
|
2421
|
+
on<EventCode extends SplitElementEventCode>(eventCode: EventCode, handler: SplitElementEventHandler<EventCode>): void;
|
|
2422
|
+
}
|
package/types/events.d.ts
CHANGED
|
@@ -9,7 +9,10 @@ export type DropInElementEventCode =
|
|
|
9
9
|
| 'cancel'
|
|
10
10
|
| 'clickConfirmButton'
|
|
11
11
|
| 'switchMethod'
|
|
12
|
-
| 'pendingVerifyAccount'
|
|
12
|
+
| 'pendingVerifyAccount'
|
|
13
|
+
| 'surchargeFeeChange';
|
|
14
|
+
|
|
15
|
+
export type DropInTriggerEventCode = 'intentRefetch';
|
|
13
16
|
|
|
14
17
|
export type ApplePayButtonEventCode =
|
|
15
18
|
| 'ready'
|
|
@@ -127,8 +130,50 @@ export type PendingVerifyAccountEvent = {
|
|
|
127
130
|
};
|
|
128
131
|
};
|
|
129
132
|
|
|
133
|
+
export type SurchargeFeeChangeEvent = {
|
|
134
|
+
detail: {
|
|
135
|
+
/**
|
|
136
|
+
* The method of the payment
|
|
137
|
+
*/
|
|
138
|
+
method: PaymentMethodType;
|
|
139
|
+
/**
|
|
140
|
+
* The name of the method
|
|
141
|
+
*/
|
|
142
|
+
methodName: string;
|
|
143
|
+
/**
|
|
144
|
+
* The surcharge fee of the method
|
|
145
|
+
*/
|
|
146
|
+
surchargeFee: number;
|
|
147
|
+
/**
|
|
148
|
+
* The currency of the payment
|
|
149
|
+
*/
|
|
150
|
+
currency: string;
|
|
151
|
+
/**
|
|
152
|
+
* The base amount of the payment
|
|
153
|
+
*/
|
|
154
|
+
base_amount: number;
|
|
155
|
+
};
|
|
156
|
+
};
|
|
157
|
+
|
|
130
158
|
export type DropInElementEventHandler<T extends DropInElementEventCode> = (eventData: DropInElementEvent[T]) => void;
|
|
131
159
|
|
|
160
|
+
export type DropInElementTriggerEventParams<T extends DropInTriggerEventCode> = DropInElementTriggerMethodParam[T];
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* The parameters that pass to the triggered event handler.
|
|
164
|
+
*/
|
|
165
|
+
type DropInElementTriggerMethodParam = {
|
|
166
|
+
/**
|
|
167
|
+
* Call this function to refetch the latest intent information.
|
|
168
|
+
*
|
|
169
|
+
* @example
|
|
170
|
+
* ```ts
|
|
171
|
+
* element.trigger('intentRefetch');
|
|
172
|
+
* ```
|
|
173
|
+
*/
|
|
174
|
+
intentRefetch: undefined;
|
|
175
|
+
};
|
|
176
|
+
|
|
132
177
|
/**
|
|
133
178
|
* The event object you can listen to.
|
|
134
179
|
*/
|
|
@@ -208,6 +253,18 @@ type DropInElementEvent = {
|
|
|
208
253
|
* ```
|
|
209
254
|
*/
|
|
210
255
|
pendingVerifyAccount: PendingVerifyAccountEvent;
|
|
256
|
+
/**
|
|
257
|
+
* This event will be fired when the surcharge fee changes.
|
|
258
|
+
*
|
|
259
|
+
* @example
|
|
260
|
+
* ```ts
|
|
261
|
+
* element.on('surchargeFeeChange', (e) => {
|
|
262
|
+
* const { method, methodName, surchargeFee, currency, base_amount } = e.detail;
|
|
263
|
+
* console.log('Surcharge fee changed', { method, methodName, surchargeFee, currency, base_amount });
|
|
264
|
+
* });
|
|
265
|
+
* ```
|
|
266
|
+
*/
|
|
267
|
+
surchargeFeeChange: SurchargeFeeChangeEvent;
|
|
211
268
|
};
|
|
212
269
|
|
|
213
270
|
interface ApplePayDateComponents {
|