The gfs-checkout
widget provides a rich user interface that interacts with the GFS Checkout service in order to provide a wide range of easily configured delivery options.
If it's place on the same page as the Carrier Information, Selected Drop Point and/or Delivery Address widgets, the Checkout widget will also assume control of them.
# via bower
$ bower install --save gfs-checkout-widget
- Import Web Components' polyfill:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
- Import Custom Element:
<link rel="import" href="bower_components/gfs-checkout-widget/gfs-checkout-widget.html">
- Include a google map API key where the element will be used.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&libraries=places"></script>
- Start using it!
<gfs-checkout
access-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJHRlNfaWRlbnRpdHlfc2VydmVyIiwiYXVkIjoiR0ZTX2lkZW50aXR5X3NlcnZlciIsImV4cCI6MTQ5MTQ5Mjg3NywibmJmIjoxNDkxNDg5Mjc3LCJjbGllbnRfaWQiOiJwcm92aWRlZF9ieV9HRlMiLCJsaXZlLWFwaS1rZXkiOiJwcm92aWRlZF9ieV9HRlMiLCJ0ZXN0LWFwaS1rZXkiOiJwcm92aWRlZF9ieV9HRlMiLCJzY29wZSI6WyJjaGVja291dC1hcGkiLCJyZWFkIl19.Cavb8IrFNq-ZZAqNL1JEGbBtC9tgngyYC2wMPk8TwGs"
gfs-data="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZGRyZXNzIjoiQ2VudHVyeSBIb3VzZSwgMTAwIFN0YXRpb24gUm9hZCwgSG9yc2hhbSwgV2VzdCBTdXNzZXgsIFJIMTMgNVVaIiwibmFtZSI6Ikdsb2JhbEZyZWlnaHRTb2x1dGlvbnMiLCJlbWFpbCI6ImRldnN1cHBvcnRAanVzdHNob3V0Z2ZzLmNvbSJ9.uRjj9mLjwbUEHzAUujJFZPd9pT1fZew-E73OWvLxbts"
initial-address="50 Mill Way, Southampton, SO40 7JF, United Kingdom"
currency-symbol="£"
default-delivery="Standard"
default-service="Standard"
default-carrier="YODEL"
default-carrier-code="ECO"
default-price="2.50"
default-min-delivery-time="1"
default-max-delivery-time="5">
</gfs-checkout>
More info, demo and all the available properties can be found at GFS widget portal