airwallex-payment-elements
Advanced tools
airwallex-payment-elements - npm Package Compare versions
Comparing version 0.0.82 to 0.0.83
@@ -1,4 +0,4 @@ | ||
| /* Airwallex Checkout Component Version [0.0.82] */ | ||
| "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,0,82].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.0.83] */ | ||
| "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,0,83].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.0.82] */ | ||
| 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,0,82].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.0.83] */ | ||
| 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,0,83].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.0.82] */ | ||
| 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,0,82].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.0.83] */ | ||
| 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,0,83].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.0.82", | ||
| "version": "0.0.83", | ||
| "module": "lib/bin/airwallex.es.js", | ||
@@ -5,0 +5,0 @@ "main": "lib/bin/airwallex.cjs.js", |
464
README.md
@@ -15,2 +15,4 @@ # airwallex-payment-elements | ||
| # Integrate with universal NPM package | ||
| ## Installation | ||
@@ -20,19 +22,12 @@ | ||
| Option #1 | ||
| ```js | ||
| ```ts | ||
| yarn add airwallex-payment-elements | ||
| ``` | ||
| Option #2: OR with NPM: | ||
| OR with NPM: | ||
| ```js | ||
| ```ts | ||
| npm install airwallex-payment-elements | ||
| ``` | ||
| Option #3: OR using UMD build from your client HTML: | ||
| ```html | ||
| <script src="https://checkout.airwallex.com/assets/bundle.0.0.82.min.js"></script> | ||
| ``` | ||
| ## Getting Started | ||
@@ -42,72 +37,20 @@ | ||
| Option #1: | ||
| ```ts | ||
| import { loadAirwallex } from 'airwallex-payment-elements'; | ||
| await loadAirwallex(options?: InitOptions); | ||
| await loadAirwallex({ | ||
| env: demo, // 'staging' | 'demo' | 'prod' | ||
| }); | ||
| ``` | ||
| Option #2: Or using UMD js global (optional on NPM package integration): | ||
| ```options``` pass to `loadAirwallex` is useful to customize looks and feel of the checkout form when you are adopt Drop-in / Elements integration | ||
| ```js | ||
| Airwallex.init(options?: InitOptions); | ||
| ``` | ||
| Option #3: (optional on NPM package integration): | ||
| # Host Payment Page (HPP) integration | ||
| ```ts | ||
| import { init } from 'airwallex-payment-elements'; | ||
| init(options?: InitOptions); | ||
| ``` | ||
| ```options``` is useful to customize looks and feel of the checkout form when you are adopt Drop-in / Elements integration | ||
| ```ts | ||
| interface FontOptions { | ||
| family?: string; | ||
| src?: string; | ||
| weight?: string; | ||
| } | ||
| export interface InitOptions { | ||
| env?: string; // staging | demo | prod | ||
| locale?: string; | ||
| font?: FontOptions; | ||
| } | ||
| ``` | ||
| ### Host Payment Page (HPP) integration | ||
| The HPP provide the most convenient way to integrate | ||
| #### HPP interface | ||
| ```ts | ||
| export interface HostPaymentPage { | ||
| env?: 'staging' | 'demo' | 'prod' | ||
| client_secret: string; | ||
| theme?: Style; | ||
| customerId?: string; | ||
| component?: 'default' | 'cards' | 'wechatpay'; | ||
| successUrl?: string; | ||
| failUrl?: string; | ||
| cancelUrl?: string; | ||
| encodeLogoUrl?: string; | ||
| } | ||
| ``` | ||
| i.e Using default method and looks & feel | ||
| Option #1: using UMD js global | ||
| ```js | ||
| airwallex.redirectToCheckout({ | ||
| client_secret: 'replace-with-your-client-secret', | ||
| } | ||
| ``` | ||
| Option #2: | ||
| ```ts | ||
| import { redirectToCheckout } from 'airwallex-payment-elements'; | ||
| redirectToCheckout({ | ||
| env: 'demo', // 'staging' | 'demo' | 'prod' | ||
| client_secret: 'replace-with-your-client-secret', | ||
@@ -117,3 +60,3 @@ } | ||
| ### Drop-in / Elements integration | ||
| # DropIn / Card / Card / APM Elements integration | ||
@@ -128,11 +71,11 @@ 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 | ||
| >Formatting card information automatically as it’s entered | ||
| 1. Formatting card information automatically as it’s entered | ||
| >Customize placeholders to fit your UX design | ||
| 2. Customize placeholders to fit your UX design | ||
| >Using responsive design to fit the width of your customer’s screen or mobile device | ||
| 3. Using responsive design to fit the width of your customer’s screen or mobile device | ||
| >Customizing the styling to match the look and feel of your checkout flow | ||
| 4. Customizing the styling to match the look and feel of your checkout flow | ||
| #### Create *cardNumber* | *expiry* | *cvc* | *paymentRequestButton* | *card* | *wechat* | *dropIn* elements | ||
| ## Create *dropIn* | *card* | *cardNumber* | *expiry* | *cvc* | *wechat* | *paymentRequestButton* | elements | ||
@@ -145,34 +88,32 @@ ***When you select dropIn element type you are actually adopt Drop-in integration*** | ||
| > You can arrange with any order you want | ||
| 1. You can arrange with any order you want | ||
| > Show and hide anyone of them at any moment you want | ||
| 2. Show and hide anyone of them at any moment you want | ||
| > Customize the look and feels as you want | ||
| 3. Customize the look and feels as you want | ||
| > Listen on the events and interact with shoppers when they click or typing in those elements | ||
| 4. Listen on the events and interact with shoppers when they click or typing in those elements | ||
| #### Create element interface [Detail interface](./types/airwallex.d.ts) | ||
| ## DropIn integration | ||
| ```ts | ||
| export declare const createElement: (type: 'cardNumber' | 'expiry' | 'cvc' | 'paymentRequestButton' | 'card' | 'wechat' | 'dropIn', options?: ElementOptions | undefined) => ElementBase | null; | ||
| ``` | ||
| #### Html template | ||
| #### Browser javascript or import NPM package | ||
| Option #1: using UMD js global | ||
| ```js | ||
| Airwallex.createElement(type, options); | ||
| ```html | ||
| <div id='dropIn'></div> | ||
| ``` | ||
| Option #2: | ||
| #### Client side script | ||
| ```ts | ||
| import { createElement } from 'airwallex-payment-elements'; | ||
| createElement(type, options); | ||
| const dropInElement = createElement('dropIn'); | ||
| dropInElement.mount('dropIn'); | ||
| window.addEventListener('onSuccess', (event: ElementEvent) => { | ||
| // Handle checkout success event | ||
| }); | ||
| ``` | ||
| ### Mount element | ||
| ## Card integration | ||
| i.e Mount element to div, you can add card html div element in your html template, and call below method will mount them: | ||
| #### Html template | ||
@@ -183,10 +124,4 @@ ```html | ||
| Option #1: using UMD js global | ||
| #### Client side script | ||
| ```js | ||
| Airwallex.cardElement.mount('card'); | ||
| ``` | ||
| Option #2: | ||
| ```ts | ||
@@ -196,21 +131,49 @@ import { createElement } from 'airwallex-payment-elements'; | ||
| cardElement.mount('card'); | ||
| window.addEventListener('onSuccess', (event: ElementEvent) => { | ||
| // Handle checkout success event | ||
| }); | ||
| ``` | ||
| ### Confirm PaymentIntent using mounted element | ||
| ## Card elements integration | ||
| #### Confirm interface | ||
| #### Html template | ||
| i.e Confirm using card element (for UMD global can use `Airwallex.confirmPaymentIntent` to replace the imported method) | ||
| ```html | ||
| <label> | ||
| Card number | ||
| <div id='cardNumber'></div> | ||
| </label> | ||
| <label> | ||
| Expiry | ||
| <div id='expiry'></div> | ||
| </label> | ||
| <label> | ||
| CVC | ||
| <div id='cvc'></div> | ||
| </label> | ||
| ``` | ||
| #### Client side script | ||
| ```ts | ||
| import { confirmPaymentIntent } from 'airwallex-payment-elements'; | ||
| const payload = { | ||
| element: getElement('card'), | ||
| intent, | ||
| payment_method: { | ||
| billing | ||
| } | ||
| }; | ||
| import { createElement, confirmPaymentIntent } from 'airwallex-payment-elements'; | ||
| // Create and mount 'cardNumber' element | ||
| const cardNumber = createElement('cardNumber'); | ||
| cardNumber.mount('cardNumber'); | ||
| // Create and mount 'expiry' element | ||
| const expiry = Airwallex.createElement('expiry'); | ||
| expiry.mount('expiry'); | ||
| // Create and mount 'cvc' element | ||
| const cvc = Airwallex.createElement('cvc'); | ||
| cvc.mount('cvc'); | ||
| try { | ||
| const res = await confirmPaymentIntent(payload); | ||
| const res = await confirmPaymentIntent({ | ||
| ent: cardNumber, | ||
| intentId: 'replace-with-your-intent-id', | ||
| client_secret: 'replace-with-your-client-secret', | ||
| }); | ||
| const { confirmResult } = res || {}; | ||
@@ -235,52 +198,244 @@ const { id, status } = confirmResult || {}; | ||
| ### Listen to event trigger by shopper interaction | ||
| ## APM (wechat) integration | ||
| #### Event interface | ||
| #### Html template | ||
| ```ts | ||
| export interface ElementEvent { | ||
| type: 'cardNumber' | 'expiry' | 'cvc' | 'paymentRequestButton' | 'card' | 'wechat' | 'dropIn'; | ||
| code: 'onReady' | 'onSubmit' | 'onSuccess' | 'onError' | 'onCancel' | 'onFocus' | 'onBlur' | 'onChange' | 'onClick'; | ||
| complete: boolean; | ||
| empty: boolean; | ||
| brand: string; | ||
| error?: { | ||
| message: string; | ||
| code: string; | ||
| value?: string; | ||
| }; | ||
| } | ||
| ```html | ||
| <div id='wechat'></div> | ||
| ``` | ||
| i.e Listen to event when user typing on the input | ||
| #### Client side script | ||
| ```ts | ||
| window.addEventListener('onChange', (event: ElementEvent) => { | ||
| /* | ||
| ... Handle event | ||
| */ | ||
| } | ||
| import { createElement } from 'airwallex-payment-elements'; | ||
| // Create and mount 'wechat' element | ||
| const wechat = createElement('wechat'); | ||
| wechat.mount('wechat'); | ||
| window.addEventListener('onSuccess', (event: ElementEvent) => { | ||
| // Handle checkout success event | ||
| }); | ||
| ``` | ||
| ## Below are universal javascript in browser to testing | ||
| *** For more detail please check on the interface in the package *** | ||
| # Integrate with Universal Module Definition (UMD) javascript | ||
| ## Below are universal javascript in browser to get start with Airwallex checkout integration | ||
| ***!!!Those examples only show integration with required parameters and steps*** | ||
| ### Hosted payment page (HPP) 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.0.0.83.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <h1>Hosted payment page (HPP) integration</h1> | ||
| <button id='hpp'>Redirect to HPP</button> | ||
| <script> | ||
| document.getElementById('hpp').addEventListener('click', () => { | ||
| // Step #2: Call the HPP function to checkout | ||
| Airwallex.redirectToCheckout({ | ||
| env: 'demo', // Which env('staging' | 'demo' | 'prod') you would like to integrate with | ||
| intentId: 'replace-with-your-intent-id', | ||
| client_secret: 'replace-with-your-client-secret' | ||
| }); | ||
| }) | ||
| </script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| ### DropIn 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.0.0.83.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <h1>DropIn integration</h1> | ||
| <div id='dropIn'></div> | ||
| <script> | ||
| // Step #2: Initialize the Airwallex global context for event communication | ||
| Airwallex.init({ | ||
| env: 'demo', // 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 'dropIn' element | ||
| const dropIn = Airwallex.createElement('dropIn', { | ||
| intent: { // Required, dropIn use intent Id and client_secret to prepare checkout | ||
| id: 'replace-with-your-intent-id', | ||
| client_secret: 'replace-with-your-client-secret' | ||
| } | ||
| }); | ||
| // Step #4: Mount 'dropIn' element | ||
| dropIn.mount('dropIn'); | ||
| window.addEventListener('onSuccess', (event) => { | ||
| /* | ||
| ... Handle event | ||
| */ | ||
| alert(JSON.stringify(event)); | ||
| }) | ||
| </script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| ### 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.0.0.83.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <h1>Card integration</h1> | ||
| <div id='card'></div> | ||
| <script> | ||
| // Step #2: Initialize the Airwallex global context for event communication | ||
| Airwallex.init({ | ||
| env: 'demo', // 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', { | ||
| intent: { // Required, dropIn use intent Id and client_secret to prepare checkout | ||
| id: 'replace-with-your-intent-id', | ||
| client_secret: 'replace-with-your-client-secret' | ||
| } | ||
| }); | ||
| // Step #4: Mount 'card' element | ||
| card.mount('card'); | ||
| window.addEventListener('onSuccess', (event) => { | ||
| /* | ||
| ... Handle event | ||
| */ | ||
| alert(JSON.stringify(event)); | ||
| }) | ||
| </script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| ### Card elements 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.0.0.83.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <h1>Card elements integration</h1> | ||
| <label> | ||
| Card number | ||
| <div id='cardNumber'></div> | ||
| </label> | ||
| <label> | ||
| Expiry | ||
| <div id='expiry'></div> | ||
| </label> | ||
| <label> | ||
| CVC | ||
| <div id='cvc'></div> | ||
| </label> | ||
| <br> | ||
| <button id='submit'>Submit</button> | ||
| <script> | ||
| // Step #2: Initialize the Airwallex global context for event communication | ||
| Airwallex.init({ | ||
| env: 'demo', // 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.1: Create 'cardNumber' element | ||
| const cardNumber = Airwallex.createElement('cardNumber'); | ||
| // Step #3.2: Create 'expiry' element | ||
| const expiry = Airwallex.createElement('expiry'); | ||
| // Step #3.3: Create 'cvc' element | ||
| const cvc = Airwallex.createElement('cvc'); | ||
| // Step #4: Mount card elements | ||
| cardNumber.mount('cardNumber'); | ||
| expiry.mount('expiry'); | ||
| cvc.mount('cvc'); | ||
| document.getElementById('submit').addEventListener('click', () => { | ||
| // Step #5: Confirm payment intent with id and client_secret | ||
| Airwallex.confirmPaymentIntent({ | ||
| element: cardNumber, | ||
| intentId: '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)); | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| ## Put all integration methods in one place for your choose | ||
| ```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.0.0.83.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <script> | ||
| // Define the intent id and client_secret to checkout across different integration methods | ||
| const intentId = 'replace-with-your-intent-id'; | ||
| const client_secret = 'replace-with-your-client-secret'; | ||
| </script> | ||
| <h1>Airwallex checkout integration</h1> | ||
| <hr> | ||
| <!-- HPP --> | ||
| <h2>Option #1: Hosted payment page (HPP) integration</h2> | ||
| <button id='hpp'>Redirect to HPP</button> | ||
| <script> | ||
| const intentId = 'replace-with-your-intent-id'; | ||
| const client_secret = 'replace-with-your-client-secret'; | ||
| Airwallex.redirectToCheckout({ | ||
| env: 'dev', | ||
| intentId: intentId, | ||
| client_secret | ||
| document.getElementById('hpp').addEventListener('click', () => { | ||
| Airwallex.redirectToCheckout({ | ||
| env: 'demo', | ||
| intentId: intentId, | ||
| client_secret | ||
| }); | ||
| }) | ||
| </script> | ||
| <hr> | ||
| <!-- DropIn integration--> | ||
| <h2>DropIn integration</h2> | ||
| <h2>Option #2: DropIn integration</h2> | ||
| <div id='dropIn'></div> | ||
| <script> | ||
| Airwallex.init({ | ||
| env: 'dev', | ||
| env: 'demo', | ||
| origin: window.location.origin, | ||
@@ -296,4 +451,5 @@ }); | ||
| </script> | ||
| <hr> | ||
| <!-- Card integration--> | ||
| <h2>Card integration</h2> | ||
| <h2>Option #3: Card integration</h2> | ||
| <div id='card'></div> | ||
@@ -303,3 +459,3 @@ <script> | ||
| origin: window.location.origin, | ||
| env: 'dev' | ||
| env: 'demo' | ||
| }); | ||
@@ -314,4 +470,13 @@ const card = Airwallex.createElement('card', { | ||
| </script> | ||
| <script> | ||
| window.addEventListener('onSuccess', (event) => { | ||
| /* | ||
| ... Handle event | ||
| */ | ||
| alert(JSON.stringify(event)); | ||
| }) | ||
| </script> | ||
| <hr> | ||
| <!-- Card elements integration--> | ||
| <h2>Card elements integration</h2> | ||
| <h2>Option #4: Card elements integration</h2> | ||
| <label> | ||
@@ -333,3 +498,3 @@ Card number | ||
| Airwallex.init({ | ||
| env: 'dev', | ||
| env: 'demo', | ||
| origin: window.location.origin, | ||
@@ -346,7 +511,2 @@ }); | ||
| element: cardNumber, | ||
| payment_method: { | ||
| card: { | ||
| name: 'card_name' | ||
| }, | ||
| }, | ||
| intentId, | ||
@@ -356,7 +516,9 @@ client_secret | ||
| /* handle confirm response */ | ||
| console.info(response); | ||
| alert(JSON.stringify(response)); | ||
| }); | ||
| }); | ||
| </script> | ||
| <hr> | ||
| </body> | ||
| </html> | ||
| ``` | ||
@@ -363,0 +525,0 @@ |
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by9.91%
64561
- Number of lines in readme file
- increased by45.25%
520
No dependency changes