Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
airwallex-payment-elements
Advanced tools
airwallex-payment-elements - npm Package Compare versions
Comparing version 0.2.7 to 0.2.11
@@ -1,4 +0,4 @@ | ||
| /* Airwallex Checkout Component Version [0.2.7] */ | ||
| "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,2,7].join(".")}.min.js`,t=e=>{const r=document.createElement("script");r.src=`${e}${o}`;const t=document.head||document.body;if(!t)throw new Error("Airwallex payment scripts requires a <head> or <body> html element in order to be loaded.");return t.appendChild(r),r};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.confirmPaymentIntentWithSavedCard=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntentWithSavedCard(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.createPaymentContract=async e=>{if(window.Airwallex)return window.Airwallex.createPaymentContract(e);{const e="Please loadAirwallex() before createPaymentContract();";throw console.error(e),new Error(e)}},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}/"]`)||t(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.loadAirwallexJs=t,exports.redirectToCheckout=e=>{window.Airwallex?window.Airwallex.redirectToCheckout(e):console.error("Please loadAirwallex() before redirectToCheckout();")}; | ||
| /* Airwallex Checkout Component Version [0.2.11] */ | ||
| "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,2,11].join(".")}.min.js`,t=e=>{const r=document.createElement("script");r.src=`${e}${o}`;const t=document.head||document.body;if(!t)throw new Error("Airwallex payment scripts requires a <head> or <body> html element in order to be loaded.");return t.appendChild(r),r};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.confirmPaymentIntentWithSavedCard=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntentWithSavedCard(e);{const e="Please loadAirwallex() before confirmPaymentIntentWithSavedCard();";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.createPaymentContract=async e=>{if(window.Airwallex)return window.Airwallex.createPaymentContract(e);{const e="Please loadAirwallex() before createPaymentContract();";throw console.error(e),new Error(e)}},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}/"]`)||t(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.loadAirwallexJs=t,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.2.7] */ | ||
| 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,2,7].join(".")}.min.js`,l=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},n=e=>Promise.resolve().then(()=>{if("undefined"==typeof window)return null;if(window.Airwallex)return window.Airwallex;const n=document.querySelector(`script[src="${o}"], script[src="${o}/"]`)||l(r((null==e?void 0:e.env)||"prod"));return new Promise((r,o)=>{n.addEventListener("load",()=>{window.Airwallex?(window.Airwallex.init(e),r(window.Airwallex)):o(new Error("Failed to load Airwallex on load event"))}),n.addEventListener("error",()=>{o(new Error("Failed to load Airwallex scripts"))})})}),t=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();")},a=(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 confirmPaymentIntent();";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.createPaymentContract(e);{const e="Please loadAirwallex() before createPaymentContract();";throw console.error(e),new Error(e)}};export{c as confirmPaymentIntent,s as confirmPaymentIntentWithSavedCard,a as createElement,A as createPaymentContract,x as createPaymentMethod,w as destroyElement,d as getElement,r as getGatewayUrl,m as getPaymentIntent,t as init,n as loadAirwallex,l as loadAirwallexJs,i as redirectToCheckout}; | ||
| /* Airwallex Checkout Component Version [0.2.11] */ | ||
| 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,2,11].join(".")}.min.js`,l=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},n=e=>Promise.resolve().then(()=>{if("undefined"==typeof window)return null;if(window.Airwallex)return window.Airwallex;const n=document.querySelector(`script[src="${o}"], script[src="${o}/"]`)||l(r((null==e?void 0:e.env)||"prod"));return new Promise((r,o)=>{n.addEventListener("load",()=>{window.Airwallex?(window.Airwallex.init(e),r(window.Airwallex)):o(new Error("Failed to load Airwallex on load event"))}),n.addEventListener("error",()=>{o(new Error("Failed to load Airwallex scripts"))})})}),t=e=>{window.Airwallex?window.Airwallex.init(e):console.error("Please loadAirwallex() before init();")},a=e=>{window.Airwallex?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)}},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.createPaymentContract(e);{const e="Please loadAirwallex() before createPaymentContract();";throw console.error(e),new Error(e)}};export{c as confirmPaymentIntent,s as confirmPaymentIntentWithSavedCard,i as createElement,A as createPaymentContract,x as createPaymentMethod,w as destroyElement,d as getElement,r as getGatewayUrl,m as getPaymentIntent,t as init,n as loadAirwallex,l as loadAirwallexJs,a as redirectToCheckout}; | ||
| /* Airwallex @Charlie.Lang */ | ||
| //# sourceMappingURL=airwallex.es.js.map |
@@ -1,4 +0,4 @@ | ||
| /* Airwallex Checkout Component Version [0.2.7] */ | ||
| 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,2,7].join(".")}.min.js`,n=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};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.confirmPaymentIntentWithSavedCard=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntentWithSavedCard(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.createPaymentContract=async e=>{if(window.Airwallex)return window.Airwallex.createPaymentContract(e);{const e="Please loadAirwallex() before createPaymentContract();";throw console.error(e),new Error(e)}},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}/"]`)||n(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.loadAirwallexJs=n,e.redirectToCheckout=e=>{window.Airwallex?window.Airwallex.redirectToCheckout(e):console.error("Please loadAirwallex() before redirectToCheckout();")},e}({}); | ||
| /* Airwallex Checkout Component Version [0.2.11] */ | ||
| 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,2,11].join(".")}.min.js`,n=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};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.confirmPaymentIntentWithSavedCard=async e=>{if(window.Airwallex)return window.Airwallex.confirmPaymentIntentWithSavedCard(e);{const e="Please loadAirwallex() before confirmPaymentIntentWithSavedCard();";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.createPaymentContract=async e=>{if(window.Airwallex)return window.Airwallex.createPaymentContract(e);{const e="Please loadAirwallex() before createPaymentContract();";throw console.error(e),new Error(e)}},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}/"]`)||n(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.loadAirwallexJs=n,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.2.7", | ||
| "version": "0.2.11", | ||
| "module": "lib/bin/airwallex.es.js", | ||
@@ -12,2 +12,6 @@ "main": "lib/bin/airwallex.cjs.js", | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/airwallex/airwallex-payment-elements.git" | ||
| }, | ||
| "license": "MIT", | ||
@@ -14,0 +18,0 @@ "keywords": [ |
673
README.md
| # airwallex-payment-elements | ||
| [](https://www.npmjs.org/package/airwallex-payment-elements) | ||
| [](https://github.com/semantic-release/semantic-release) | ||
| This universal library is a lightweight javascript SDK, which allow merchant site to convenient integrate with airwallex checkout flow | ||
| This airwallex-payment-elements library is a lightweight javascript SDK that allows merchants to conveniently integrate the Airwallex checkout flow on their website. | ||
| From the merchant perspective, The Hosted Payment Page(HPP) / Drop-in / Elements integration happen after shopper decide to checkout an order on merchant's website, Airwallex javascript SDK help merchant accept payments on merchant website, the whole user experience include create an [PaymentIntent](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro) entity to tacking the payment request, which link to merchant’s order entity, Airwallex using a [paymentAttempt](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Attempts/Intro) entity to collect payment methods details from a shopper, and link back to the PaymentIntent entity, which tracking the state change all the way through user interactions, you can checkout the [PaymentIntent](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro) section for more details | ||
| Check out our demo [here](https://demo-pacheckoutdemo.airwallex.com/). | ||
| With the API integration from merchant server, after PaymentIntent is successfully created, the response of the API call will return a unique ID for the PaymentIntent, and a client_secret which act as a single source of truth cross over the shopping experience, each time user's interaction trigger a service call Airwallex client API will validate against the client_secret to secure the whole payment flow | ||
| # How it works | ||
| So long story short, the merchant website checkout start with PaymentIntent and client_secret | ||
| Merchants can integrate airwallex-payment-elements in the checkout page on their site. For every checkout, merchants should create a [PaymentIntent](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro) entity through the [Airwallex API](https://www.airwallex.com/docs/api) to process payments with Airwallex. | ||
| Below are the step by step guide to use this library | ||
| Once the PaymentIntent is successfully created via API integration, the API will return a response with a unique ID and client secret for the intent. Merchants can then use these two keys to enable the payment elements to collect payment attempt details. | ||
| # Integrate with universal NPM package | ||
| # Payment Methods | ||
| ## Installation | ||
| The package includes different payment processing elements that will allow merchants ot accept payments on their site. We have 6 different checkout elements: | ||
| ### Install **airwallex-payment-elements** package | ||
| - [**Hosted Payment Page (HPP)**](https://www.airwallex.com/docs/payments__hosted-payment-page-integration): _Merchants can accept payments without the full handling of the payment processing and display of the payment options._ | ||
| - [**Drop in**](https://www.airwallex.com/docs/payments__drop-in-integration): _Merchants can accept payments without full responsibility of handling their payments but can still control the overall look and feel of their payment page._ | ||
| - [**Embedded Fields (Elements)**](https://www.airwallex.com/docs/payments__embedded-fields-integration): _A set of prebuilt UI components, like inputs and buttons that Merchants can directly place in their checkout flow (more below)_ | ||
| - Full Featured Card | ||
| - Split Card | ||
| - Wechat Element | ||
| ```ts | ||
| yarn add airwallex-payment-elements | ||
| ``` | ||
| The primary focus of this library is **_Elements_**, which enables Merchants to collect sensitive information (PCI) using customizable UI elements. This library also provides a single interface for interacting with the Payment Request API, allowing for the tokenization of sensitive information and handling of 3D secure authentication flows. | ||
| OR with NPM: | ||
| Elements includes the following features: | ||
| ```ts | ||
| npm install airwallex-payment-elements | ||
| ``` | ||
| 1. Automatic formatting of card information in the input field | ||
| 2. Customize placeholders to fit Merchant UX/UI designs | ||
| 3. Responsive design | ||
| 4. Flexible/Customizable styling to match the look and feel of the Merchant's checkout flow | ||
| ## Getting Started | ||
| # Installation | ||
| ### Initialize | ||
| Install with Yarn | ||
| ```ts | ||
| import { loadAirwallex } from 'airwallex-payment-elements'; | ||
| await loadAirwallex({ | ||
| env: 'demo', // 'staging' | 'demo' | 'prod' | ||
| }); | ||
| ``` | ||
| ```options``` pass to `loadAirwallex` is useful to customize looks and feel of the checkout form when you are adopt Drop-in / Elements integration | ||
| # Host Payment Page (HPP) integration | ||
| The HPP provide the most convenient way to integrate | ||
| ```ts | ||
| import { redirectToCheckout } from 'airwallex-payment-elements'; | ||
| redirectToCheckout({ | ||
| env: 'demo', // 'staging' | 'demo' | 'prod' | ||
| id: 'replace-with-your-intent-id', | ||
| client_secret: 'replace-with-your-client-secret' | ||
| } | ||
| yarn add airwallex-payment-elements | ||
| ``` | ||
| # DropIn / Card / FullFeaturedCard / Card elements / APM Elements integration | ||
| Or, with NPM | ||
| 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 | ||
| With this library, you can also tokenize sensitive information, and handle 3D Secure authentication | ||
| Airwallex element is a set of prebuilt UI components, like inputs and buttons, for building your checkout flow. It’s available as a feature of this library. this library handle checkout confirm within an Element without ever having it touch your server | ||
| Elements includes features like: | ||
| 1. Formatting card information automatically as it’s entered | ||
| 2. Customize placeholders to fit your UX design | ||
| 3. Using responsive design to fit the width of your customer’s screen or mobile device | ||
| 4. Customizing the styling to match the look and feel of your checkout flow | ||
| ## Create *dropIn* | *card* | *fullFeaturedCard* | *cardNumber* | *expiry* | *cvc* | *wechat* | *paymentRequestButton* | elements | ||
| ***When you select dropIn element type you are actually adopt Drop-in integration*** | ||
| With Drop-in integration, those prebuilt UI components has been composed into a payment form with all available payment methods, you can put it directly into you html page, and integrate with the rest of your own components to render your checkout page. | ||
| With *cardNumber* | *expiry* | *cvc* | *paymentRequestButton* | *wechat* elements, they are just building blocks: | ||
| 1. You can arrange with any order you want | ||
| 2. Show and hide anyone of them at any moment you want | ||
| 3. Customize the look and feels as you want | ||
| 4. Listen on the events and interact with shoppers when they click or typing in those elements | ||
| ## DropIn integration | ||
| #### Html template | ||
| ```html | ||
| <div id='dropIn'></div> | ||
| ``` | ||
| #### Client side script | ||
| ```ts | ||
| import { createElement } from 'airwallex-payment-elements'; | ||
| const dropInElement = 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' | ||
| } | ||
| }); | ||
| dropInElement.mount('dropIn'); | ||
| window.addEventListener('onSuccess', (event: ElementEvent) => { | ||
| // Handle checkout success event | ||
| }); | ||
| npm install airwallex-payment-elements | ||
| ``` | ||
| ## Card integration | ||
| # Getting Started with the Airwallex Card Element | ||
| #### Html template | ||
| The Card element is one of Airwallex's most popular payment integration. It is a single line multi-input field containing card number, card expiry, and card cvc. | ||
| ```html | ||
| <div id='card'></div> | ||
| ``` | ||
| _Detailed Card integration guide [here](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/card.md). More extensive documentation details [below](#Documentation)_ | ||
| #### Client side script | ||
| ### Initialize Airwallex: | ||
| ```ts | ||
| import Airwallex from 'airwallex-payment-elements'; | ||
| import { createElement } from 'airwallex-payment-elements'; | ||
| const cardElement = createElement('card', { | ||
| 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' | ||
| } | ||
| Airwallex.loadAirwallex({ | ||
| env: 'demo', // 'staging' | 'demo' | 'prod' | ||
| }); | ||
| 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. | ||
| ### Create a container for your payment element in HTML: | ||
| #### Html template | ||
| ```html | ||
| <div id='fullFeaturedCard'></div> | ||
| <div id="card"></div> | ||
| <div id="submit">Submit</div> | ||
| ``` | ||
| #### Client side script | ||
| ### Then create and mount your payment element in Javascript: | ||
| ```ts | ||
| import { createElement } from 'airwallex-payment-elements'; | ||
| const cardElement = createElement('fullFeaturedCard', { | ||
| intent: { // Required, Card use intent Id and client_secret to prepare checkout | ||
| const cardElement = Airwallex.createElement('card', { | ||
| intent: { | ||
| // Required, Card uses intent Id and client_secret to prepare checkout | ||
| id: 'replace-with-your-intent-id', | ||
| client_secret: 'replace-with-your-client-secret' | ||
| } | ||
| client_secret: 'replace-with-your-client-secret', | ||
| }, | ||
| }); | ||
| cardElement.mount('full-featured-card'); | ||
| window.addEventListener('onSuccess', (event: ElementEvent) => { | ||
| // Handle checkout success event | ||
| }); | ||
| cardElement.mount('card'); // Injects iFrame into element container | ||
| ``` | ||
| ## Card elements integration | ||
| ### Add an event handler to the button to trigger payment confirmation | ||
| #### Html template | ||
| ```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 { 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({ | ||
| element: cardNumber, | ||
| id: 'replace-with-your-intent-id', | ||
| document.getElementById('submit').addEventListener('click', () => { | ||
| Airwallex.confirmPaymentIntent({ | ||
| element: card, // Must link element | ||
| id: 'replace-with-your-intent-id', // Same as intent details from above | ||
| client_secret: 'replace-with-your-client-secret', | ||
| }).then((response) => { | ||
| // Listen to the payment confirmation response | ||
| window.alert(JSON.stringify(response)); | ||
| }); | ||
| const { confirmResult } = res || {}; | ||
| const { id, status } = confirmResult || {}; | ||
| // Handle success | ||
| } catch (err) { | ||
| const { reason } = err; | ||
| const { error: { code, message } } = reason || {}; | ||
| // Handle fail | ||
| }); | ||
| } | ||
| ``` | ||
| ### Add `onReady`, `onChange`, `onSuccess`, and `onError` event listeners to handle various events received from the Airwallex Payment server. | ||
| ## APM (wechat) integration | ||
| #### Html template | ||
| ```html | ||
| <div id='wechat'></div> | ||
| ``` | ||
| #### Client side script | ||
| ```ts | ||
| import { createElement } from 'airwallex-payment-elements'; | ||
| // Create and mount 'wechat' element | ||
| const wechat = createElement('wechat', { | ||
| 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' | ||
| } | ||
| // Replace EVENT_TYPE with 'onReady', 'onChange', 'onSuccess', or 'onError' | ||
| window.addEventListener(EVENT_TYPE, (event) => { | ||
| /* | ||
| ... Handle event | ||
| */ | ||
| window.alert(event.detail); | ||
| }); | ||
| wechat.mount('wechat'); | ||
| window.addEventListener('onSuccess', (event: ElementEvent) => { | ||
| // Handle checkout success event | ||
| }); | ||
| ``` | ||
| ## HPP / DropIn / FullFeaturedCard return customer checkout flow | ||
| Add `customer_id ` when create payment intent and we will get the saved payment methods for the customer and redner saved cards list in the element. Nothing need to change during the integration. | ||
| # Documentation | ||
| ## Card / Card elements return customer checkout flow | ||
| See the documentation for Airwallex functions [here](https://github.com/airwallex/airwallex-payment-demo/tree/master/docs), or for more specific payment integrations: | ||
| You could to get saved cards list when create intent or query intent. Then render them by your self to let shopper choose one of them. | ||
| - [**Card**](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/card.md) | ||
| - [**HPP (Hosted Payment Page)**](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/hpp.md) | ||
| - [**Drop in**](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/dropin.md) | ||
| - [**Full Featured Card**](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/fullfeaturedcard.md) | ||
| - [**Split Card**](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/splitcard.md) | ||
| - [**Wechat**](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/wechat.md) | ||
| - **Redirect** (coming soon...) | ||
| Then create a cvc element to enter cvc code and call `confirmPaymentIntentWithSavedCard` function to finish checkout. | ||
| # Integration | ||
| #### Html template | ||
| Each payment processing method requires different customizations. Check out our examples of web integrations with the [airwallex-payment-demo](https://github.com/airwallex/airwallex-payment-demo) library. | ||
| ```html | ||
| <label> | ||
| CVC | ||
| <div id='cvc'></div> | ||
| </label> | ||
| ``` | ||
| # Sandboxes | ||
| #### Client side script | ||
| You also can play around with different elements in our framework specific sandboxes below. They're all based off the [airwallex-payment-demo](https://github.com/airwallex/airwallex-payment-demo) repository! | ||
| ```ts | ||
| import { createElement, confirmPaymentIntentWithSavedCard } from 'airwallex-payment-elements'; | ||
| - [Static HTML](https://codesandbox.io/s/airwallex-payment-demo-static-html-c2z63) | ||
| - [React](https://codesandbox.io/s/airwallex-payment-demo-react-2m63j) | ||
| - [React-Typescript](https://codesandbox.io/s/airwallex-payment-demo-react-typescript-buuhk) | ||
| - [Vue](https://codesandbox.io/s/airwallex-payment-demo-vue-ffhrw) | ||
| - [Angular](https://codesandbox.io/s/airwallex-payment-demo-angular-zgx32) | ||
| // Create and mount 'cvc' element | ||
| const cvc = Airwallex.createElement('cvc'); | ||
| cvc.mount('cvc'); | ||
| # Questions, comments, or suggestions? | ||
| try { | ||
| const res = await confirmPaymentIntentWithSavedCard({ | ||
| id: 'replace-with-your-intent-id', | ||
| methodId: 'replace-with-chosen-payment-method-id', | ||
| customerId: 'replace-with-your-customer-id', | ||
| client_secret: 'replace-with-your-client-secret', | ||
| element: cvcElement, | ||
| }); | ||
| const { confirmResult } = res || {}; | ||
| const { id, status } = confirmResult || {}; | ||
| // Handle success | ||
| } catch (err) { | ||
| const { reason } = err; | ||
| const { error: { code, message } } = reason || {}; | ||
| // Handle fail | ||
| } | ||
| ``` | ||
| ***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 | ||
| Download and run those example from github [airwallex-payment-demo](https://github.com/airwallex/airwallex-payment-demo) | ||
| ***!!!Those examples only show integration with required parameters and steps, more details can be found in product doc [Payment-Web integration section](https://www.airwallex.com/docs) or in the `types` folder of the package inside `node_modules` after `npm install airwallex-payment-elements` command*** | ||
| ### 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.xx.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 | ||
| id: '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.xx.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.detail)); | ||
| }) | ||
| </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.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 | ||
| <!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.xx.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <h1>Card integration</h1> | ||
| <div id='full-featured-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('fullFeaturedCard', { | ||
| intent: { // Required, 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('full-featured-card'); | ||
| window.addEventListener('onSuccess', (event) => { | ||
| // Handle event | ||
| alert(JSON.stringify(event.detail)); | ||
| }) | ||
| </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.xx.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, | ||
| 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)); | ||
| }); | ||
| }); | ||
| </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.xx.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <script> | ||
| // Define the intent id and client_secret to checkout across different integration methods | ||
| const id = '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> | ||
| document.getElementById('hpp').addEventListener('click', () => { | ||
| Airwallex.redirectToCheckout({ | ||
| env: 'demo', | ||
| id, | ||
| client_secret | ||
| }); | ||
| }) | ||
| </script> | ||
| <hr> | ||
| <!-- DropIn integration--> | ||
| <h2>Option #2: DropIn integration</h2> | ||
| <div id='dropIn'></div> | ||
| <script> | ||
| Airwallex.init({ | ||
| env: 'demo', | ||
| origin: window.location.origin, | ||
| }); | ||
| const dropIn = Airwallex.createElement('dropIn', { | ||
| intent: { | ||
| id, | ||
| client_secret | ||
| } | ||
| }); | ||
| dropIn.mount('dropIn'); | ||
| </script> | ||
| <hr> | ||
| <!-- Card integration--> | ||
| <h2>Option #3: Card integration</h2> | ||
| <div id='card'></div> | ||
| <script> | ||
| Airwallex.init({ | ||
| origin: window.location.origin, | ||
| env: 'demo' | ||
| }); | ||
| const card = Airwallex.createElement('card', { | ||
| intent: { | ||
| id, | ||
| client_secret | ||
| } | ||
| }); | ||
| card.mount('card'); | ||
| </script> | ||
| <script> | ||
| window.addEventListener('onSuccess', (event) => { | ||
| /* | ||
| ... Handle event | ||
| */ | ||
| alert(JSON.stringify(event.detail)); | ||
| }) | ||
| </script> | ||
| <hr> | ||
| <!-- Card elements integration--> | ||
| <h2>Option #4: Card elements integration</h2> | ||
| <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> | ||
| Airwallex.init({ | ||
| env: 'demo', | ||
| origin: window.location.origin, | ||
| }); | ||
| const cardNumber = Airwallex.createElement('cardNumber'); | ||
| const expiry = Airwallex.createElement('expiry'); | ||
| const cvc = Airwallex.createElement('cvc'); | ||
| cardNumber.mount('cardNumber'); | ||
| expiry.mount('expiry'); | ||
| cvc.mount('cvc'); | ||
| document.getElementById('submit').addEventListener('click', () => { | ||
| Airwallex.confirmPaymentIntent({ | ||
| element: cardNumber, | ||
| id, | ||
| client_secret | ||
| }).then((response) => { | ||
| // handle confirm response | ||
| alert(JSON.stringify(response)); | ||
| }); | ||
| }); | ||
| </script> | ||
| <hr> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| ## Below are the live demo site you can play with | ||
| ### Staging Demo | ||
| [LINK](https://staging-pacheckoutdemo.airwallex.com) | ||
| ### Demo | ||
| [LINK](https://demo-pacheckoutdemo.airwallex.com) | ||
| We want to provide you with a seamless experience integrating with our platform. [Let us know](https://www.airwallex.com/contact-sales) if you run into any problems, or have any comments and suggestions for us. We value your input! |
@@ -318,2 +318,25 @@ import { | ||
| /** | ||
| * Interface of the request when call confirmPaymentIntent with contact. | ||
| * The application scenario: when you already have a contract created by call createPaymentContract and your customer would like to trigger a payment intent confirm with the pre signed contract (linked with customer_id) | ||
| */ | ||
| export interface PaymentMethodWithContract { | ||
| /** | ||
| * The id of the intent which would be confirmed | ||
| */ | ||
| id: string; | ||
| /** | ||
| * The `client_secret` of the intent. It returns when you create payment intent | ||
| */ | ||
| client_secret: string; | ||
| /** | ||
| * The element you would like to use to confirm intent | ||
| */ | ||
| element: Element; | ||
| /** | ||
| * The id of the contract which used to confirm intent | ||
| */ | ||
| contract_id: string; | ||
| } | ||
| /** | ||
| * Element integration `step #2` | ||
@@ -340,4 +363,10 @@ * Create payment element for checkout | ||
| * Only need for card payment method | ||
| * | ||
| * `PaymentMethod` - the request payload using for guest checkout without pre created contract | ||
| * | ||
| * `PaymentMethodWithContract` - the request payload using for confirm intent with pre created contract (created by `createPaymentContract` with existing customer) | ||
| */ | ||
| export declare const confirmPaymentIntent: (data?: PaymentMethod) => Promise<Intent | boolean>; | ||
| export declare const confirmPaymentIntent: ( | ||
| data?: PaymentMethod | PaymentMethodWithContract, | ||
| ) => Promise<Intent | boolean>; | ||
@@ -402,2 +431,6 @@ /** | ||
| merchant_trigger_reason?: 'scheduled' | 'unscheduled'; | ||
| /** | ||
| * `requires_cvc` used for decide whether cvc is required for subsequent transactions. Only applicable when next_triggered_by is `customer` | ||
| */ | ||
| requires_cvc?: boolean; | ||
| } | ||
@@ -404,0 +437,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by1.06%
1244
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-20.27%
84730
- Number of package files
- decreased by-23.81%
16
- Number of lines in readme file
- decreased by-78.33%
143
No dependency changes