# Checkout JS

Checkout JS is a browser-based application providing a seamless UI for BigCommerce shoppers to complete their checkout. It is also known as [Optimized One-Page Checkout](https://support.bigcommerce.com/s/article/Optimized-Single-Page-Checkout), which is currently the recommended checkout option for all BigCommerce stores.

## Requirements

In order to build from the source code, you must have the following set up in your development environment.

- Node >= v10.
- NPM >= v3.
- Unix-based operating system.

One of the simplest ways to install Node is using [NVM](https://github.com/nvm-sh/nvm#installation-and-update). You can follow their instructions to set up your environment if it is not already set up.

## Development

Once you have cloned the repository and set up your environment, you can start developing with it.

First, you have to pull in the dependencies required for the application.

```sh
npm ci
```

After that, you can make changes to the source code and run the following command to build it.

```sh
npm run build  // build production
npm run build:staging // build staging
npm run build:dev // build dev
```

If you are developing the application locally and want to build the source code in watch mode, you can run the following command:

```sh
npm run dev
```

## Custom Checkout installation

Follow [this guide](https://developer.bigcommerce.com/stencil-docs/customizing-checkout/installing-custom-checkouts) for instructions on how to fork and install this app as a Custom Checkout in your store.

If you want to test your checkout implementation, you can run:

```sh
npm run server
```

And enter the local URL for `auto-loader-1.0.0.js` in Checkout Settings, e.g `http://127.0.0.1:8080/auto-loader-1.0.0.js`

## Deploy & Custom B3 Checkout

1. Choose the `Advanced Settings` -> `Checkout`
2. Checked `Custom Checkout` of `Checkout Type` 
3. Input the `Script Url` of `Custom Checkout` with `https://cdn.bundleb2b.net/prod/checkout/auto-loader-1.0.0.js`
4. Other configurations are based on your own.

- Also you can build your own customized checkout and deploy on your own server, but you'll rebase our latest code by yourself every time

### Usage

There're some special fields you can use to customize your checkout simply.Just do like this:

- store management -> Storefront -> Script Manager -> create a script

```js
window.b3CheckoutConfig = {
  // to override the text
  tips: {
    'b3.login.failed': 'Login Failed.',
    'b3.salesRep.notMasquerading': 'Please select a company.',
    'b3.addresses.search': 'Search addresses',
    'b3.addresses.addressLabel': 'Address Label',
    'b3.addresses.enterNew': 'Enter a new address',
    'b3.addresses.select': 'Select an address',
    'b3.multiShipping.address.edit': 'Edit',
    'b3.multiShipping.address.remove': 'Remove',
    'b3.multiShipping.shipped.toAddress': 'can be shipped to another address.',
    'b3.poNumber.label': 'PO Number / Reference Number',
    'b3.label.optional': '(Optional)',
    'b3.poNumber.required': 'PO Number / Reference Number is required.',
  },
}
```
### Migration

1. Delete the outdated checkout configs in `Storefront/Script Manager` 
2. Delete the outdated checkout configs in your theme  
   - delete the config of `templates/pages/checkout.html`
   ```js
   - <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
   - <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
   - <script>
   - window.b3cartId = '{{cart_id}}';
   - </script>
   - <script src="https://cdn.bundleb2b.net/checkout.2.10.0.js"></script>
   ``` 
   - delete the config of `templates/pages/order-confirmation.html`
   ```js
   - <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
   - <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
   - <script>
   - window.b3checkoutId = '{{checkout.order.id}}';
   - </script>
   - <script src="https://cdn.bundleb2b.net/order-confirmations.2.10.0.js"></script>
   ```