airwallex-payment-elements
Advanced tools
Comparing version 0.1.0 to 0.1.1
@@ -1,4 +0,4 @@ | ||
/* Airwallex Checkout Component Version [0.1.0] */ | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",qa:"checkoutui.qa.awx.im",preview:"checkoutui.preview.awx.im",dev:"localhost:3000"},r=r=>"https://"+(e[r]||"checkout.airwallex.com"),o=`/assets/bundle.${[0,1,0].join(".")}.min.js`;exports.confirmPaymentIntent=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntent(e);{const e="Please loadAirwallex() before confirmPaymentIntent();";throw console.error(e),new Error(e)}},exports.createElement=(e,r)=>window.Airwallex?window.Airwallex.createElement(e,r):(console.error("Please loadAirwallex() before createElement();"),null),exports.createPaymentMethod=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)}},exports.destroyElement=e=>window.Airwallex?window.Airwallex.destroyElement(e):(console.error("Please loadAirwallex() before destroyElement();"),!1),exports.getElement=e=>window.Airwallex?window.Airwallex.getElement(e):(console.error("Please loadAirwallex() before getElement();"),null),exports.getGatewayUrl=r,exports.getPaymentIntent=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)}},exports.init=e=>{window.Airwallex?window.Airwallex.init(e):console.error("Please loadAirwallex() before init();")},exports.loadAirwallex=e=>Promise.resolve().then(()=>{if("undefined"==typeof window)return null;if(window.Airwallex)return window.Airwallex;const l=document.querySelector(`script[src="${o}"], script[src="${o}/"]`)||(e=>{const r=document.createElement("script");r.src=`${e}${o}`;const l=document.head||document.body;if(!l)throw new Error("Airwallex payment scripts requires a <head> or <body> html element in order to be loaded.");return l.appendChild(r),r})(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"))})})}),exports.redirectToCheckout=e=>{window.Airwallex?window.Airwallex.redirectToCheckout(e):console.error("Please loadAirwallex() before redirectToCheckout();")}; | ||
/* Airwallex Checkout Component Version [0.1.1] */ | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",qa:"checkoutui.qa.awx.im",preview:"checkoutui.preview.awx.im",dev:"localhost:3000"},r=r=>"https://"+(e[r]||"checkout.airwallex.com"),o=`/assets/bundle.${[0,1,1].join(".")}.min.js`;exports.confirmPaymentIntent=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntent(e);{const e="Please loadAirwallex() before confirmPaymentIntent();";throw console.error(e),new Error(e)}},exports.createElement=(e,r)=>window.Airwallex?window.Airwallex.createElement(e,r):(console.error("Please loadAirwallex() before createElement();"),null),exports.createPaymentMethod=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)}},exports.destroyElement=e=>window.Airwallex?window.Airwallex.destroyElement(e):(console.error("Please loadAirwallex() before destroyElement();"),!1),exports.getElement=e=>window.Airwallex?window.Airwallex.getElement(e):(console.error("Please loadAirwallex() before getElement();"),null),exports.getGatewayUrl=r,exports.getPaymentIntent=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)}},exports.init=e=>{window.Airwallex?window.Airwallex.init(e):console.error("Please loadAirwallex() before init();")},exports.loadAirwallex=e=>Promise.resolve().then(()=>{if("undefined"==typeof window)return null;if(window.Airwallex)return window.Airwallex;const l=document.querySelector(`script[src="${o}"], script[src="${o}/"]`)||(e=>{const r=document.createElement("script");r.src=`${e}${o}`;const l=document.head||document.body;if(!l)throw new Error("Airwallex payment scripts requires a <head> or <body> html element in order to be loaded.");return l.appendChild(r),r})(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"))})})}),exports.redirectToCheckout=e=>{window.Airwallex?window.Airwallex.redirectToCheckout(e):console.error("Please loadAirwallex() before redirectToCheckout();")}; | ||
/* Airwallex @Charlie.Lang */ | ||
//# sourceMappingURL=airwallex.cjs.js.map |
@@ -1,4 +0,4 @@ | ||
/* Airwallex Checkout Component Version [0.1.0] */ | ||
const e={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",qa:"checkoutui.qa.awx.im",preview:"checkoutui.preview.awx.im",dev:"localhost:3000"},r=r=>"https://"+(e[r]||"checkout.airwallex.com"),o=`/assets/bundle.${[0,1,0].join(".")}.min.js`,l=e=>Promise.resolve().then(()=>{if("undefined"==typeof window)return null;if(window.Airwallex)return window.Airwallex;const l=document.querySelector(`script[src="${o}"], script[src="${o}/"]`)||(e=>{const r=document.createElement("script");r.src=`${e}${o}`;const l=document.head||document.body;if(!l)throw new Error("Airwallex payment scripts requires a <head> or <body> html element in order to be loaded.");return l.appendChild(r),r})(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"))})})}),n=e=>{window.Airwallex?window.Airwallex.init(e):console.error("Please loadAirwallex() before init();")},i=e=>{window.Airwallex?window.Airwallex.redirectToCheckout(e):console.error("Please loadAirwallex() before redirectToCheckout();")},t=(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),a=e=>window.Airwallex?window.Airwallex.getElement(e):(console.error("Please loadAirwallex() before getElement();"),null),d=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,r)=>{if(window.Airwallex)return window.Airwallex.createPaymentMethod(e,r);{const e="Please loadAirwallex() before createPaymentMethod();";throw console.error(e),new Error(e)}},s=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)}};export{d as confirmPaymentIntent,t as createElement,c as createPaymentMethod,w as destroyElement,a as getElement,r as getGatewayUrl,s as getPaymentIntent,n as init,l as loadAirwallex,i as redirectToCheckout}; | ||
/* Airwallex Checkout Component Version [0.1.1] */ | ||
const e={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",qa:"checkoutui.qa.awx.im",preview:"checkoutui.preview.awx.im",dev:"localhost:3000"},r=r=>"https://"+(e[r]||"checkout.airwallex.com"),o=`/assets/bundle.${[0,1,1].join(".")}.min.js`,l=e=>Promise.resolve().then(()=>{if("undefined"==typeof window)return null;if(window.Airwallex)return window.Airwallex;const l=document.querySelector(`script[src="${o}"], script[src="${o}/"]`)||(e=>{const r=document.createElement("script");r.src=`${e}${o}`;const l=document.head||document.body;if(!l)throw new Error("Airwallex payment scripts requires a <head> or <body> html element in order to be loaded.");return l.appendChild(r),r})(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"))})})}),n=e=>{window.Airwallex?window.Airwallex.init(e):console.error("Please loadAirwallex() before init();")},i=e=>{window.Airwallex?window.Airwallex.redirectToCheckout(e):console.error("Please loadAirwallex() before redirectToCheckout();")},t=(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),a=e=>window.Airwallex?window.Airwallex.getElement(e):(console.error("Please loadAirwallex() before getElement();"),null),d=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,r)=>{if(window.Airwallex)return window.Airwallex.createPaymentMethod(e,r);{const e="Please loadAirwallex() before createPaymentMethod();";throw console.error(e),new Error(e)}},s=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)}};export{d as confirmPaymentIntent,t as createElement,c as createPaymentMethod,w as destroyElement,a as getElement,r as getGatewayUrl,s as getPaymentIntent,n as init,l as loadAirwallex,i as redirectToCheckout}; | ||
/* Airwallex @Charlie.Lang */ | ||
//# sourceMappingURL=airwallex.es.js.map |
@@ -1,4 +0,4 @@ | ||
/* Airwallex Checkout Component Version [0.1.0] */ | ||
var Airwallex=function(e){"use strict";const r={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",qa:"checkoutui.qa.awx.im",preview:"checkoutui.preview.awx.im",dev:"localhost:3000"},o=e=>"https://"+(r[e]||"checkout.airwallex.com"),l=`/assets/bundle.${[0,1,0].join(".")}.min.js`;return e.confirmPaymentIntent=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntent(e);{const e="Please loadAirwallex() before confirmPaymentIntent();";throw console.error(e),new Error(e)}},e.createElement=(e,r)=>window.Airwallex?window.Airwallex.createElement(e,r):(console.error("Please loadAirwallex() before createElement();"),null),e.createPaymentMethod=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)}},e.destroyElement=e=>window.Airwallex?window.Airwallex.destroyElement(e):(console.error("Please loadAirwallex() before destroyElement();"),!1),e.getElement=e=>window.Airwallex?window.Airwallex.getElement(e):(console.error("Please loadAirwallex() before getElement();"),null),e.getGatewayUrl=o,e.getPaymentIntent=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)}},e.init=e=>{window.Airwallex?window.Airwallex.init(e):console.error("Please loadAirwallex() before init();")},e.loadAirwallex=e=>Promise.resolve().then(()=>{if("undefined"==typeof window)return null;if(window.Airwallex)return window.Airwallex;const r=document.querySelector(`script[src="${l}"], script[src="${l}/"]`)||(e=>{const r=document.createElement("script");r.src=`${e}${l}`;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})(o((null==e?void 0:e.env)||"prod"));return new Promise((o,l)=>{r.addEventListener("load",()=>{window.Airwallex?(window.Airwallex.init(e),o(window.Airwallex)):l(new Error("Failed to load Airwallex on load event"))}),r.addEventListener("error",()=>{l(new Error("Failed to load Airwallex scripts"))})})}),e.redirectToCheckout=e=>{window.Airwallex?window.Airwallex.redirectToCheckout(e):console.error("Please loadAirwallex() before redirectToCheckout();")},e}({}); | ||
/* Airwallex Checkout Component Version [0.1.1] */ | ||
var Airwallex=function(e){"use strict";const r={prod:"checkout.airwallex.com",demo:"checkout-demo.airwallex.com",staging:"checkout-staging.airwallex.com",qa:"checkoutui.qa.awx.im",preview:"checkoutui.preview.awx.im",dev:"localhost:3000"},o=e=>"https://"+(r[e]||"checkout.airwallex.com"),l=`/assets/bundle.${[0,1,1].join(".")}.min.js`;return e.confirmPaymentIntent=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntent(e);{const e="Please loadAirwallex() before confirmPaymentIntent();";throw console.error(e),new Error(e)}},e.createElement=(e,r)=>window.Airwallex?window.Airwallex.createElement(e,r):(console.error("Please loadAirwallex() before createElement();"),null),e.createPaymentMethod=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)}},e.destroyElement=e=>window.Airwallex?window.Airwallex.destroyElement(e):(console.error("Please loadAirwallex() before destroyElement();"),!1),e.getElement=e=>window.Airwallex?window.Airwallex.getElement(e):(console.error("Please loadAirwallex() before getElement();"),null),e.getGatewayUrl=o,e.getPaymentIntent=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)}},e.init=e=>{window.Airwallex?window.Airwallex.init(e):console.error("Please loadAirwallex() before init();")},e.loadAirwallex=e=>Promise.resolve().then(()=>{if("undefined"==typeof window)return null;if(window.Airwallex)return window.Airwallex;const r=document.querySelector(`script[src="${l}"], script[src="${l}/"]`)||(e=>{const r=document.createElement("script");r.src=`${e}${l}`;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})(o((null==e?void 0:e.env)||"prod"));return new Promise((o,l)=>{r.addEventListener("load",()=>{window.Airwallex?(window.Airwallex.init(e),o(window.Airwallex)):l(new Error("Failed to load Airwallex on load event"))}),r.addEventListener("error",()=>{l(new Error("Failed to load Airwallex scripts"))})})}),e.redirectToCheckout=e=>{window.Airwallex?window.Airwallex.redirectToCheckout(e):console.error("Please loadAirwallex() before redirectToCheckout();")},e}({}); | ||
/* Airwallex @Charlie.Lang */ | ||
//# sourceMappingURL=airwallex.iife.js.map |
{ | ||
"name": "airwallex-payment-elements", | ||
"version": "0.1.0", | ||
"version": "0.1.1", | ||
"module": "lib/bin/airwallex.es.js", | ||
@@ -5,0 +5,0 @@ "main": "lib/bin/airwallex.cjs.js", |
103
README.md
@@ -58,3 +58,3 @@ # airwallex-payment-elements | ||
# DropIn / Card / Card elements / APM Elements integration | ||
# DropIn / Card / FullFeaturedCard / Card elements / APM Elements integration | ||
@@ -77,3 +77,3 @@ The primary integration path through this library is with Elements, which enables merchant to collect sensitive payment information(PCI) using customizable UI elements. this library also provides a single interface for Payment Request API | ||
## Create *dropIn* | *card* | *cardNumber* | *expiry* | *cvc* | *wechat* | *paymentRequestButton* | elements | ||
## Create *dropIn* | *card* | *fullFeaturedCard* | *cardNumber* | *expiry* | *cvc* | *wechat* | *paymentRequestButton* | elements | ||
@@ -129,2 +129,3 @@ ***When you select dropIn element type you are actually adopt Drop-in integration*** | ||
```ts | ||
import { createElement } from 'airwallex-payment-elements'; | ||
@@ -138,2 +139,39 @@ const cardElement = createElement('card', { | ||
cardElement.mount('card'); | ||
try { | ||
const res = await confirmPaymentIntent({ | ||
element: cardElement, | ||
id: 'replace-with-your-intent-id', | ||
client_secret: 'replace-with-your-client-secret', | ||
}); | ||
const { confirmResult } = res || {}; | ||
const { id, status } = confirmResult || {}; | ||
// Handle success | ||
} catch (err) { | ||
const { reason } = err; | ||
const { error: { code, message } } = reason || {}; | ||
// Handle fail | ||
} | ||
``` | ||
## Full Featured Card integration | ||
What's different from card is that full featured card contains payment button so that you don't need to confirm payment intent yourself. | ||
#### Html template | ||
```html | ||
<div id='fullFeaturedCard'></div> | ||
``` | ||
#### Client side script | ||
```ts | ||
import { createElement } from 'airwallex-payment-elements'; | ||
const cardElement = createElement('fullFeaturedCard', { | ||
intent: { // Required, Card use intent Id and client_secret to prepare checkout | ||
id: 'replace-with-your-intent-id', | ||
client_secret: 'replace-with-your-client-secret' | ||
} | ||
}); | ||
cardElement.mount('full-featured-card'); | ||
window.addEventListener('onSuccess', (event: ElementEvent) => { | ||
@@ -196,2 +234,3 @@ // Handle checkout success event | ||
## APM (wechat) integration | ||
@@ -302,6 +341,58 @@ | ||
``` | ||
### Card integration | ||
```html | ||
<!doctype html> | ||
<html> | ||
<head lang='en'> | ||
<meta charset='utf-8'> | ||
<meta name='viewport' content='width=device-width, initial-scale=1'> | ||
<title>Airwallex Checkout Playground</title> | ||
<!-- Step #1: Load Checkout Universal Module Definition (UMD) bundle js--> | ||
<script src="https://checkout.airwallex.com/assets/bundle.xx.xx.xx.min.js"></script> | ||
</head> | ||
<body> | ||
<h1>Card integration</h1> | ||
<label> | ||
Card Information | ||
<div id='card'></div> | ||
</label> | ||
<br> | ||
<button id='submit'>Submit</button> | ||
<script> | ||
// Step #2: Initialize the Airwallex global context for event communication | ||
Airwallex.init({ | ||
env: 'staging', // Setup which env('staging' | 'demo' | 'prod') you would like to integrate with | ||
origin: window.location.origin, // Setup your event target to receive the browser events message | ||
}); | ||
// Step #3: Create 'card' element | ||
const card = Airwallex.createElement('card'); | ||
// Step #4: Mount card element | ||
card.mount('card'); | ||
document.getElementById('submit').addEventListener('click', () => { | ||
// Step #5: Confirm payment intent with id and client_secret | ||
Airwallex.confirmPaymentIntent({ | ||
element: card, | ||
id: 'replace-with-your-intent-id', | ||
client_secret: 'replace-with-your-client-secret' | ||
}).then((response) => { | ||
/* handle confirm response in your business flow */ | ||
alert(JSON.stringify(response)); | ||
}); | ||
}); | ||
window.addEventListener('onReady', (event) => { | ||
/* | ||
... Handle event | ||
*/ | ||
alert(event.detail) | ||
}) | ||
</script> | ||
</body> | ||
</html> | ||
``` | ||
### Full Featured Card integration | ||
What's different from card is that full featured card contains payment button so that you don't need to confirm payment intent yourself. | ||
```html | ||
@@ -319,3 +410,3 @@ <!doctype html> | ||
<h1>Card integration</h1> | ||
<div id='card'></div> | ||
<div id='full-featured-card'></div> | ||
<script> | ||
@@ -328,3 +419,3 @@ // Step #2: Initialize the Airwallex global context for event communication | ||
// Step #3: Create 'card' element | ||
const card = Airwallex.createElement('card', { | ||
const card = Airwallex.createElement('fullFeaturedCard', { | ||
intent: { // Required, use intent Id and client_secret to prepare checkout | ||
@@ -336,3 +427,3 @@ id: 'replace-with-your-intent-id', | ||
// Step #4: Mount 'card' element | ||
card.mount('card'); | ||
card.mount('full-featured-card'); | ||
window.addEventListener('onSuccess', (event) => { | ||
@@ -339,0 +430,0 @@ // Handle event |
@@ -49,3 +49,23 @@ import { ElementOptions } from './airwallex'; | ||
/** | ||
* Event code supported value by element when user interact with the checkout element | ||
* Event code supported value by element when shopper interact with the checkout element | ||
* | ||
* `onReady`: The event fires when a given element resource has loaded. | ||
* | ||
* `onSubmit`: The event is raised when confirm the intent. It fires after the click Pay button or calling confirmPaymentIntent function. | ||
* | ||
* `onSuccess`: The event fires when a intent is confirm with Airwallex | ||
* | ||
* `onError`: Error events are fired at various targets for different kinds of errors with shopper interaction, refer to `ElementError` interface. | ||
* | ||
* `onCancel`: The event fires when shopper click cancel button when interact with the payment form. | ||
* | ||
* `onFocus`: The event is raised when the shopper sets focus on an input by click or tab switch interaction. | ||
* | ||
* `onBlur`: The event is raised when an input in element loses focus. | ||
* | ||
* `onChange`: The events fire when the user commits a value change to a input. This may be done, for example, by clicking outside of the input or by using the Tab key to switch to a different input. | ||
* | ||
* `onClick`: The event is raised when the user clicks on an input element. | ||
* | ||
* `onDynamicCurrencyConversion`: The events fire when merchant enable Dynamic Currency Conversion (DCC) feature and shopper is confirm payment with an intent which match DCC scenario | ||
*/ | ||
@@ -55,2 +75,3 @@ export type EventCode = | ||
| 'onSubmit' | ||
| 'onDynamicCurrencyConversion' | ||
| 'onSuccess' | ||
@@ -57,0 +78,0 @@ | 'onError' |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
80624
700
616