<chec-payment-form>
, an enhanced Commerce.js aware <form>
Vue component to facilitate rapid checkout development. (BETA v0.1.0)
Vue.js installer plugin for Commerce.js with a global Facililates creating a checkout payment form in a Commercejs.com headless integration.
Play with a demo on codesandbox: https://codesandbox.io/s/commerce-components-chec-payment-form-demo-oekns?file=/src/App.vue
Installing package
You can use either yarn
or npm
to install the commerce-components
package and it's dependencies from this Github repo.
Clone this repo then ...
with yarn
yarn add commerce-components
with npm
npm install commerce-components
Easily build a checkout form
Before getting started create a free Chec merchant account on Commercejs.com then within your Chec dashboard create at least one product and retrieve your public API key.
-
Import then install
VueCommercejs
usingVue.use()
passing your publicChec
API key.This will
- globally register the
<chec-payment-form>
component. - instantiate a Commerce.js client assigning it as a global variable
this.$commerce
. (e.g.this.$commerce.cart.retrieve().then(cart => console.log(cart));
from anywhere)
;Vue;; - globally register the
-
Implement the
<chec-payment-form>
component synchronizing the<App>
's checkout & formData state<!-- ex: App.vue templae --><!-- ^^ the slot props are important for powering dynamic parts of the form, it provides the countries, subregions, and shippingOptions list,a computed shippingOptionsById object,and a captureOrder callback method to invoke on submit--><!-- invoke captureOrder slot-prop callback within method to handle promise, resolving with response from capture-order request -->// in App.vue (example)// in this example, in the created() hook we're retrieving a cart, setting the cart.id in the state, and adding a product to the cartname: 'app'{// retrieve the cart, and then add a product to the cartthis$commercecart}// when <chec-payment-form> is mounted and created this formData will be transformed into the proper formData schema with properties/*customer: {firstName: '',lastName: '',email: '',},shipping: {name: '',street: '',street2: '',townCity: '',countyState: '',country: 'US',postalZipCode: '',},billing: {name: '',street: '',street2: '',townCity: '',countyState: '',country: 'US',postalZipCode: '',},selectedShippingMethod: '',selectedGateway: ''card: {number: '', // if dev. mode, set dev friendly defaultsexpMonth: '',expYear: '',cvc: '',billingPostalZipcode: '',},*/// (Note, must be passed to form as <chec-payment-form :context.sync="formData"/>)formData: {} // 'formData' is an arbitrary property name, it can be any name so long it gets passed as the context.sync prop to <chec-payment-form> for it to be set-up if using slot.captureOrder// checkout token object, populated when <chec-payment-form> mounts and generates token, will be updated, and continuesly sync. with chec-payment-form (Note, must be passed to form as <chec-payment-form :checkout.sync="checkoutTokenObject"/>)checkout: {}cartId: ''methods:/*** custom captureOrder method*/{
Spin up the demo
cd
into the directory
Git clone this repo then cd commerce-components
Install all the dependencies
yarn install
Compile and minify a build of the package, serving the demo on localhost:7777
yarn build-lib && yarn demo:serve
http://localhost:7777/,
Play with the demo onbesure to create an .env
file with your Chec public API
key for the demo app to fully work.
VUE_APP_COMMERCEJS_PUBLIC_KEY=/* https://chec.io public API key */