VTEX Payment Mocker

A boilerplate to develop and test a Payment Method to VTEX Smart Checkout, based on Pink.

We recommend you read the Guide to Design a Payment Method to VTEX Smart Checkout.

You can see an example of a Payment Method layout working in http://vtex.github.io/checkout-payment-ui/.

Features

The main features:

• Local server
• Less autocompile
• Livereload for any files changes
• Base of VTEX Smart Checkout HTML and CSS
• Internationalization for 4 idioms: FR, EN, PT-BR and ES

How it works

When you run grunt, it starts a server at http://localhost:8080/, compiles style.less file and begin watching changes in all files inside assets folder. Any change will reload the page or just reload css files, in case of style changes.

You can test your layout creating/modifying:

• src/partials/payment.html: HTML file
• src/assets/css/less/style.less: style file
• src/assets/img/: images folder
• src/i18n: internalization folder

Dependencies

1. Node.js
2. Grunt: run sudo npm i -g grunt-cli
3. Sass

Installation

1. Download or clone this repo
2. Install NPM dependencies: run npm i

Hands on!

Running

1. Run grunt
2. Go to http://localhost:8080/

Thank you! :)