bigcommerce / checkout-js Goto Github PK

I am building a custom checkout confirmation page. I am seeing on the order object that OrderConsignments is in an array when the response it gets back from the api is not in an array. This allows me to not have access to order.consignments.shipping since it thinks orderConsignments should be an array. and order.consignments[0].shipping is undefined.

the order object looks like this where OrderConsignments is in an array:

declare interface Order { baseAmount: number; billingAddress: BillingAddress; cartId: string; coupons: Coupon[]; consignments: OrderConsignment[]; currency: Currency; customerCanBeCreated: boolean; customerId: number; customerMessage: string; discountAmount: number; handlingCostTotal: number; hasDigitalItems: boolean; isComplete: boolean; isDownloadable: boolean; isTaxIncluded: boolean; lineItems: LineItemMap; orderAmount: number; orderAmountAsInteger: number; orderId: number; payments?: OrderPayments; giftWrappingCostTotal: number; shippingCostTotal: number; shippingCostBeforeDiscount: number; status: string; taxes: Tax[]; taxTotal: number; }
but the object we get back is like the one described here where consignments is not in an array so order. consignments[0] is undefined but order.consignments contains the shipping objects.

Can anyone pls explain, why we need Unix based console for building the app?

Not really an issue, but I strongly feel the Order Comments box should be a textarea element, as opposed to the input it currently is. This would be a much better user experience. I don't think the code change would be difficult.

Seeing the issue here

This code looks the same in the current github library as it does in ours. Here’s what we are encountering in a nutshell:

Before the code I link to above runs, we call some remote APIs that have await on them, which work and then forces a Checkout refresh to show those on the optimized checkout. So we call
await this.props.checkoutService.loadCheckout();
What we are seeing is inconsistent behavior from the Continue button on step 2:

• Sometimes it continues to step 4 (which makes sense because our tests have “Same as billing address” checked.
• Sometimes it doesn’t continue, it fires and seemingly times-out (with no errors in console that indicate what happened, in those cases, click continue again works fine).
• Sometimes it moves to step 3 (which makes no sense, because the billingSameAsShipping parameter is true when we test that) on this call:
  navigateNextStep(billingSameAsShipping);

Situation: I am now at https://***/embedded-checkout/?setCurrencyId=2 page.

And after calling navigateToOrderConfirmation it redirects to https://***/embedded-checkout/?setCurrencyId=2/order-confirmation. What is wrong. Must be https://***/embedded-checkout/order-confirmation/?setCurrencyId=2

how to change a city text field to dropdown select? Please advise

I download the checkout-js, did some changes, build it and then hosted the dist files under webdav/content/checkout folder, then update the checkout settings on backend.
After those steps, the custom checkout works for chrome, but it gives error on IE, after I fixed the errors, it shows the empty content, only has the site logo on page.

It would be nice to have digital wallets including Apple Pay as an express checkout option at the beginning of the checkout process like Shopify does it. That way the other checkout steps could be skipped. It would also support headless solutions better where the embedded checkout is used and Apple Pay currently can't be accessed.

Excited to work with the Optimized One Page Checkout source code finally - but had some trouble getting the package built & hosted correctly.

To test that my build/hosting process is correct, I made a few changes to Checkout.tsx - just a few custom console.logs and classNames to the React components as a sanity check to make sure that my changes were being applied.

I'm following the instructions from the BigCommerce Documentation:
https://developer.bigcommerce.com/stencil-docs/customizing-checkout/installing-custom-checkouts

To install a custom checkout on a store, follow these steps:

Navigate to Advanced Settings > Checkout in your store’s control panel.

Under Checkout Type, select Custom Checkouts.

Type the following in the Script URL field, replacing with the latest version number generated by running the npm run release command:

**webdav:checkout/auto-loader-<version>.js**

First thing to mention is that using npm release in this repo as the docs suggest does not work, and returns this error:

>echo 'Please do not relase locally, use CircleCi'

So, after looking at the dist folder, there was a file named auto-loader-1.104.1, so I used the following URL:

webdav:checkout/auto-loader-1.1014.1.js

When I logged into my live store, I saw the checkout, however my custom changes were missing completely. Now, it was still pulling something from WebDAV because when I changed the version number to something that did not exist, i.e. auto-loader-12345.js, the checkout page was blank and failed to load completely.

So, how I solved this was noticing that there is a file called auto-loader.js without any version #.

Using the following URL, my changes were able to load successfully:

webdav:checkout/auto-loader.js

So really, no version number is required when pointing to the auto-loader in the BigCommerce Control Panel, and that's quite confusing.

In addition, you guys may want to mention something about the build process not working at all on Windows, this may save people some headaches. I was running into cryptic npm errors and half-built dist/build folders until I switched to my MacOS laptop to give it a try.

Expected behavior

I am trying to update this behavior in CornerStone templates. I already created the issue but they told me to ask a question here.
bigcommerce/cornerstone#2142
At the moment I can see the JS error in the console when there is no coupon available it.

Actual behavior

It shows the JS error log.

Steps to reproduce behavior

Add the items into cart and proceed to checkout page, and click 'Coupon/Gift Certificate' link.

I checked the template/pages/checkout.html but it has this code.

{{{ checkout.checkout_content }}}

How can I update the {{{ checkout.checkout_content }}} and where is it?

Hi There,

I want to add a dropdown/text field with extra options for extra options using the custom checkout, which later will be attached as meta fields in the order.

I am trying to customize the very minimum to make sure the checkout will keep the PCI compliance and also would be easier to update with newer versions from big commerce.

I forked this repository and currently implementing this new field and also customizing the UI/design of the checkout. Once it's done I am planning to check regularly for updates on this original repository to update my private fork.

Does anyone have done something similar or have any advice to give?

Thanks

Please help. After a build, the custom checkout page is blank with the following error.

loader.ts:40 Uncaught (in promise) ReferenceError: MANIFEST_JSON is not defined
at _ (loader.ts:40)
at auto-loader.ts:29
at tslib.es6.js:99
at Object.next (tslib.es6.js:80)
at tslib.es6.js:73
at new Promise ()
at i (tslib.es6.js:69)
at auto-loader.ts:21
at auto-loader.ts:21
at auto-loader.ts:21

I am testing my store and custom checkout locally.
When checking out I can't proceed past the Shipping step.
In network I see an error:
405 Method Not Allowed
For PUT request:
http://localhost:3000/api/storefront/checkouts/myCheckoutId/consignments/myConsignmentId?include=consignments.availableShippingOptions%2Ccart.lineItems.physicalItems.options%2Ccart.lineItems.digitalItems.options%2Ccustomer%2Cpromotions.banners%2C0
From API docs I see this request should be valid.
Any help will be appreciated

Hello, I am customizing my bigcommerce store's custom checkout parts via this Checkout-js.
By the way, I see this error when I run "npm run build" command.

Please let me know about this issue reason. thanks your help.

Expected behavior

'Subscribe to newsletter' checkbox should stay checked throughout filling in checkout fields.

Actual behavior

'Subscribe to newsletter' checkbox becomes unchecked when moving to the next section of the form.

Steps to reproduce behavior

1. Enter an email address.
2. Tick the checkbox to subscribe to the newsletter.
3. Click checkout as a guest.
4. Once shipping is highlighted click on Edit from the first step (Customer).
5. The newsletter checkbox is no longer checked.

Description

When we are running npm run build and attach it to the store, the styles are being overwritten by the styles coming from this url: https://cdn11.bigcommerce.com/shared/microapp/checkout/dist/checkout-756acae0.css.

Is there a way to disable loading of this file and just use the css that is built out of our repository?

Occasionally after making some edits to the checkout, when I try to build I'll get the error message Error: Cannot find module '.../checkout/dist/manifest.json' . I know the dist folder gets removed immediately, so a new manifest must be created and it's not being created, but there's no logging as to what's causing it not be created. I fixed this once by removing some custom SCSS on RockBottomGolf's checkout (again, not sure what the problem was, just commented out my changes till I narrowed it down), and it removed the vague error. It does compile in /build while in dev mode though.

Here's what I get in my terminal when running npm run build

`Using 1 worker with 2048MB memory limit
Error: Cannot find module '/mnt/c/Users/18-5/stencil/checkout/dist/manifest.json' Require stack:

• /mnt/c/Users/18-5/stencil/checkout/webpack.config.js
• /mnt/c/Users/18-5/stencil/checkout/node_modules/webpack-cli/bin/utils/convert-argv.js - /mnt/c/Users/18-5/stencil/checkout/node_modules/webpack-cli/bin/cli.js - /mnt/c/Users/18-5/stencil/checkout/node_modules/webpack/bin/webpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15) at Function.Module._load (internal/modules/cjs/loader.js:690:27) at Module.require (internal/modules/cjs/loader.js:852:19)
  at require (/mnt/c/Users/18-5/stencil/checkout/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
  at EventEmitter. (/mnt/c/Users/18-5/stencil/checkout/webpack.config.js:231:67) at EventEmitter.emit (events.js:210:5)
  at onDone (/mnt/c/Users/18-5/stencil/checkout/webpack.config.js:124:42) at AsyncSeriesHook.eval [as callAsync] (eval at create (/mnt/c/Users/18-5/stencil/checkout/node_modules/tapable/lib/HookCodeFactory.js:33:10), :36:1) at AsyncSeriesHook.lazyCompileHook (/mnt/c/Users/18-5/stencil/checkout/node_modules/tapable/lib/Hook.js:154:20)
  at onCompiled (/mnt/c/Users/18-5/stencil/checkout/node_modules/webpack/lib/Compiler.js:271:21) at /mnt/c/Users/18-5/stencil/checkout/node_modules/webpack/lib/Compiler.js:671:15 at eval (eval at create (/mnt/c/Users/18-5/stencil/checkout/node_modules/tapable/lib/HookCodeFactory.js:33:10), :11:1) at callback (/mnt/c/Users/18-5/stencil/checkout/node_modules/stylelint-webpack-plugin/lib/run-compilation.js:57:5)
  at AsyncSeriesHook.eval [as callAsync] (eval at create (/mnt/c/Users/18-5/stencil/checkout/node_modules/tapable/lib/HookCodeFactory.js:33:10), :7:1) at AsyncSeriesHook.lazyCompileHook (/mnt/c/Users/18-5/stencil/checkout/node_modules/tapable/lib/Hook.js:154:20)
  at /mnt/c/Users/18-5/stencil/checkout/node_modules/webpack/lib/Compiler.js:668:31 at AsyncSeriesHook.eval [as callAsync] (eval at create (/mnt/c/Users/18-5/stencil/checkout/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1) at AsyncSeriesHook.lazyCompileHook (/mnt/c/Users/18-5/stencil/checkout/node_modules/tapable/lib/Hook.js:154:20)
  at /mnt/c/Users/18-5/stencil/checkout/node_modules/webpack/lib/Compilation.js:1385:35 at AsyncSeriesHook.eval [as callAsync] (eval at create (/mnt/c/Users/18-5/stencil/checkout/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1) at AsyncSeriesHook.lazyCompileHook (/mnt/c/Users/18-5/stencil/checkout/node_modules/tapable/lib/Hook.js:154:20)
  at /mnt/c/Users/18-5/stencil/checkout/node_modules/webpack/lib/Compilation.js:1376:32 at eval (eval at create (/mnt/c/Users/18-5/stencil/checkout/node_modules/tapable/lib/HookCodeFactory.js:33:10), :13:1) npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! @bigcommerce/[email protected] build: rm -rf dist && webpack --mode production npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the @bigcommerce/[email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in:
  npm ERR! /home/stevenrng/.npm/_logs/2020-01-23T15_55_15_489Z-debug.log `

Someone have a problem? When use npm ci , packeages doesnt download, and send a error npm ERR! gyp verb check python checking for Python executable "python" in the PATH , seems like this repo didnt work

When loading the development version of checkout-js the styles are added to the end of the head while in production the stylesheet link is added at the start of the head. This means that during local development the checkout-js styles have higher priority then the theme provided optimized-checkout.css while on production the optimized-checkout.css styles have higher priority then the checkout-js css file.

Ideally in both environments the optimized-checkout.css file should have a higher priority (placed afterwards in the head) then the checkout-js styles.

Hi @bc-peng & everyone,

I am having a web application in React/NextJS, which consuming storefront apis for data/products.

Now I'm having my own UI for checkout, but i want to utilize bigcommerce checkout sdk to achive the complete checkout functionality, so can someone help me how i can achive this without using the apis!

Thanks

Is there any workaround for this or recommendations on steps to using a Unix console on Windows?

Originally posted by @arosesiejdev in #485 (comment)

Node 14 is headed towards EOL and will stop receiving security updates in 6 months.

This project should support and enforce with the engines property in package.json the current LTS version of Node which is 16.18.

I've tried swapping out Node 14 for 16 but am getting a node-gyp compilation error about node-sass when npm installing:

npm ERR! make: *** [Release/obj.target/binding/src/binding.o] Error 1
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/Users/loanlaux/Development/bigcommerce-checkout/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 21.5.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/Users/loanlaux/Development/bigcommerce-checkout/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /Users/loanlaux/Development/bigcommerce-checkout/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.17.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok 
npm ERR! Build failed with error code: 1

The developers behind node-sass are recommending to use dart-sass or sass instead as node-sass is deprecated. These are drop-in replacements. However, when I tried to replace node-sass with one or the other, I hit a wall with sudden peer dependency version mismatches which prevented me from going further.

I imagine no one will be stocked about diving into node-gyp and peer dependency versions, but we need a volunteer! I've unfortunately wasted too much time going down the rabbit hole and can't do any more progress on this. Good luck to the brave soul who graciously takes on this task.

I will add that Node 16.18 is also the first LTS to officially support Apple Silicon processors (the current Node 14 requires emulation through Rosetta). Updating to Node 16 will hence significantly improve the experience for devs using M1/M2 Mac computers.

I am getting below error
Node - v18.7.0
Npm - 8.15.0
Python 3.10.6

Just cloned the repo and ran npm ci as instructed, but seeing a bunch of errors (using M1 Mac on Ventura 13.0):

npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   '/Users/user/.nvm/versions/node/v16.9.1/bin/node',
npm ERR! gyp verb cli   '/Users/user/company/repos/custom-bigcommerce-checkout/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "/Users/user/.pyenv/shims/python2" in the PATH
npm ERR! gyp verb `which` succeeded /Users/user/.pyenv/shims/python2 /Users/user/.pyenv/shims/python2
npm ERR! gyp verb check python version `/Users/user/.pyenv/shims/python2 -c "import sys; print "2.7.18
npm ERR! gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 16.9.1
npm ERR! gyp verb command install [ '16.9.1' ]
npm ERR! gyp verb install input version string "16.9.1"
npm ERR! gyp verb install installing version: 16.9.1
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 16.9.1
npm ERR! gyp verb build dir attempting to create "build" dir: /Users/user/company/repos/custom-bigcommerce-checkout/node_modules/node-sass/build
npm ERR! gyp verb build dir "build" dir needed to be created? /Users/user/company/repos/custom-bigcommerce-checkout/node_modules/node-sass/build
npm ERR! gyp verb build/config.gypi creating config file
npm ERR! gyp verb build/config.gypi writing out config file: /Users/user/company/repos/custom-bigcommerce-checkout/node_modules/node-sass/build/config.gypi
npm ERR! (node:30630) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp verb config.gypi checking for gypi file: /Users/user/company/repos/custom-bigcommerce-checkout/node_modules/node-sass/config.gypi
npm ERR! gyp verb common.gypi checking for gypi file: /Users/user/company/repos/custom-bigcommerce-checkout/node_modules/node-sass/common.gypi
npm ERR! gyp verb gyp gyp format was not specified; forcing "make"
npm ERR! gyp info spawn /Users/user/.pyenv/shims/python2
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/Users/user/company/repos/custom-bigcommerce-checkout/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/user/company/repos/custom-bigcommerce-checkout/node_modules/node-sass/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/user/company/repos/custom-bigcommerce-checkout/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/user/.node-gyp/16.9.1/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/user/.node-gyp/16.9.1',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/user/company/repos/custom-bigcommerce-checkout/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/user/.node-gyp/16.9.1/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/user/company/repos/custom-bigcommerce-checkout/node_modules/node-sass',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp verb command build []
npm ERR! gyp verb build type Release
npm ERR! gyp verb architecture arm64
npm ERR! gyp verb node dev dir /Users/user/.node-gyp/16.9.1
npm ERR! gyp verb `which` succeeded for `make` /usr/bin/make
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'V=1', 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../src/libsass/src/ast.cpp:2:
npm ERR! ../src/libsass/src/ast.hpp:1614:25: warning: loop variable 'numerator' creates a copy from type 'const std::string' [-Wrange-loop-construct]
npm ERR!         for (const auto numerator : numerators)
npm ERR!                         ^
npm ERR! ../src/libsass/src/ast.hpp:1614:14: note: use reference type 'const std::string &' to prevent copying
npm ERR!         for (const auto numerator : numerators)
npm ERR!              ^~~~~~~~~~~~~~~~~~~~~~
npm ERR!                         &
npm ERR! ../src/libsass/src/ast.hpp:1616:25: warning: loop variable 'denominator' creates a copy from type 'const std::string' [-Wrange-loop-construct]
npm ERR!         for (const auto denominator : denominators)
npm ERR!                         ^
npm ERR! ../src/libsass/src/ast.hpp:1616:14: note: use reference type 'const std::string &' to prevent copying
npm ERR!         for (const auto denominator : denominators)
npm ERR!              ^~~~~~~~~~~~~~~~~~~~~~~~
npm ERR!                         &
npm ERR! 2 warnings generated.
npm ERR! In file included from ../src/libsass/src/ast_fwd_decl.cpp:1:
npm ERR! ../src/libsass/src/ast.hpp:1614:25: warning: loop variable 'numerator' creates a copy from type 'const std::string' [-Wrange-loop-construct]
npm ERR!         for (const auto numerator : numerators)
npm ERR!                         ^
npm ERR! ../src/libsass/src/ast.hpp:1614:14: note: use reference type 'const std::string &' to prevent copying
npm ERR!         for (const auto numerator : numerators)
npm ERR!              ^~~~~~~~~~~~~~~~~~~~~~
npm ERR!                         &
npm ERR! ../src/libsass/src/ast.hpp:1616:25: warning: loop variable 'denominator' creates a copy from type 'const std::string' [-Wrange-loop-construct]
npm ERR!         for (const auto denominator : denominators)
npm ERR!                         ^
npm ERR! ../src/libsass/src/ast.hpp:1616:14: note: use reference type 'const std::string &' to prevent copying
npm ERR!         for (const auto denominator : denominators)
npm ERR!              ^~~~~~~~~~~~~~~~~~~~~~~~
npm ERR!                         &

File attached with the full response after running.
build-errors.txt

To be honest I don't even know where to start with this. I've tried switching Python versions 1-3 - no joy.

In the customers.mock.ts file, there's a line item for the id/name of the Customer's group membership:

Since it's not already implemented in the project, what's the best way to go about getting this information into the checkout flow? I realize that it would be fairly simple to tack it onto the existing customer data, say in CustomerInfo.tsx, but I'd like to have that data available for the whole Checkout process, in order to conditionally show some messages to certain customer groups, and not others.

It looks like it was implemented in the checkout-sdk-js awhile back. As I'm stumbling my way through Typescript on this trying to make it work, I've been relatively successful, but it seemed like this was the place to ask to get it implemented the right way.

I have already thrown some data into a file named CustomerGroup.tsx (based on CustomerInfo.tsx), and am able to pull the customer group info now, but exporting a component is clunky. I'd really like to be able to use the state info in other files in the repo: (truncated, but you get the idea)

...

interface WithCheckoutCustomerGroupProps {
  group: string;
}

const CustomerGroup: FunctionComponent<CustomerGroupProps & WithCheckoutCustomerGroupProps> = ({
  group,
  isSignedIn,
}) => {

  return (
    <>
      { isSignedIn && <>
        { group }
      </> }
    </>
  );
};

function mapToWithCheckoutCustomerGroupProps(
  { checkoutService, checkoutState }: CheckoutContextProps
): WithCheckoutCustomerGroupProps | null {
  const {
    data: { getCheckout, getCustomer },
    statuses: { isSigningOut },
  } = checkoutState;

 ...

  const { customerGroup } = customer;

  const group = (() => {
    if (customerGroup) {
      const { name } = customerGroup;
      if (name) {
        return name;
      } else {
        return '';
      }
    } else {
      return 'No Group';
    }
  })();

  return {
    group,
    methodId,
    isSignedIn: canSignOut(customer, checkout, methodId),
    isSigningOut: isSigningOut(),
    signOut: checkoutService.signOutCustomer,
  };
}

Thoughts on the best way to get this group info propagated across the project, for use in other places? It seems like the ability to get the group data exported on WithCheckout(CustomerGroup) is where the magic needs to happen.

Thanks.

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli '/Users/riovo/.nvm/versions/node/v14.21.2/bin/node',
1 verbose cli '/Users/riovo/.nvm/versions/node/v14.21.2/bin/npm',
1 verbose cli 'run',
1 verbose cli 'dev'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle @bigcommerce/[email protected]predev: @bigcommerce/[email protected]
6 info lifecycle @bigcommerce/[email protected]dev: @bigcommerce/[email protected]
7 verbose lifecycle @bigcommerce/[email protected]dev: unsafe-perm in lifecycle true
8 verbose lifecycle @bigcommerce/[email protected]dev: PATH: /Users/riovo/.nvm/versions/node/v14.21.2/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/riovo/Public/polygroup/checkout-js/node_modules/.bin:/Users/riovo/.nvm/versions/node/v14.21.2/bin:/Users/riovo/Public/google-cloud-sdk/bin:/Users/riovo/.yarn/bin:/Users/riovo/.config/yarn/global/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/VMware Fusion.app/Contents/Public:/usr/local/go/bin:/Library/Apple/usr/bin:/Users/riovo/Public/google-cloud-sdk/bin:/Users/riovo/miniconda3/bin:/Users/riovo/miniconda3/condabin:/Users/riovo/.yarn/bin:/Users/riovo/.config/yarn/global/node_modules/.bin:/Users/riovo/.cargo/bin:/Users/riovo/Public/flutter/bin:/Users/riovo/Library/Android/sdk/emulator:/Users/riovo/Library/Android/sdk/tools:/Users/riovo/Library/Android/sdk/tools/bin:/Users/riovo/Library/Android/sdk/platform-tools:/Users/riovo/Public/flutter/bin:/Users/riovo/Library/Android/sdk/emulator:/Users/riovo/Library/Android/sdk/tools:/Users/riovo/Library/Android/sdk/tools/bin:/Users/riovo/Library/Android/sdk/platform-tools:/Users/riovo/.nvm/versions/node/v14.21.2:/Users/riovo/Library/Android/sdk/emulator:/Users/riovo/Library/Android/sdk/tools:/Users/riovo/Library/Android/sdk/tools/bin:/Users/riovo/Library/Android/sdk/platform-tools
9 verbose lifecycle @bigcommerce/[email protected]dev: CWD: /Users/riovo/Public/polygroup/checkout-js
10 silly lifecycle @bigcommerce/[email protected]dev: Args: [ '-c', 'nx run core:dev' ]
11 silly lifecycle @bigcommerce/[email protected]dev: Returned: code: 1 signal: null
12 info lifecycle @bigcommerce/[email protected]dev: Failed to exec dev script
13 verbose stack Error: @bigcommerce/[email protected] dev: nx run core:dev
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/Users/riovo/.nvm/versions/node/v14.21.2/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:400:28)
13 verbose stack at ChildProcess. (/Users/riovo/.nvm/versions/node/v14.21.2/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:400:28)
13 verbose stack at maybeClose (internal/child_process.js:1088:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:296:5)
14 verbose pkgid @bigcommerce/[email protected]
15 verbose cwd /Users/riovo/Public/polygroup/checkout-js
16 verbose Darwin 21.6.0
17 verbose argv "/Users/riovo/.nvm/versions/node/v14.21.2/bin/node" "/Users/riovo/.nvm/versions/node/v14.21.2/bin/npm" "run" "dev"
18 verbose node v14.21.2
19 verbose npm v6.14.17
20 error code ELIFECYCLE
21 error errno 1
22 error @bigcommerce/[email protected] dev: nx run core:dev
22 error Exit status 1
23 error Failed at the @bigcommerce/[email protected] dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

I'm currently trying to read some environment variables within the checkout but I can't seem to access my environment variable.
I have tried using REACT_APP_ as a prefix before the env, and it didn't work. Is this even possible, if yes, how should I do it?

Expected behavior

Payment fields would be accessible on iPhone regardless of whether user has Display Zoom enabled in Settings

Actual behavior

When a user on iPhone has Display Zoom enabled, payment fields are "cut off" on the right side of the screen and not accessible

It appears that this prevents any user with Display Zoom enabled, from completing a purchase on our site

Steps to reproduce behavior

Using a physical iPhone, go to settings -> display + brightness -> Display Zoom -> select Larger Text
iPhone will restart, after which Display Zoom will be enabled
Navigate to checkout page -> payment information

Note: this issue appears (and the above screenshot was taken ) when vanilla Cornerstone (with no customizations) is the theme on our site

The taxes_text field is not customizable by the lang.json files.
My shop is written in German and I want to change the taxes field from "Tax" to "Davon Steuern".

So I made it customizable in the code. I will create a PR for it.
On the other side the standard entry for subtotal_text is wrong. In german it is called "Zwischensumme".
The circumstance that there stands "Gesamtbetrag (netto)" breaks my whole shop logic, because brutto stands for "exclusive taxes" but my shop lists the prices incl. taxes because I set it so in the settings.

File does not exist. Even the folder "generated" does not exist. I just pulled the latest version today.

How to capture the value of the product within one in bigcommerce?

I’m attempting to create a "Custom Checkout" based on this repo. Could someone point me in the right direction regarding the setup of a local development environment?

I've found articles on how to install etc. here, but I find that process prohibitive as it's done on a live environment, and worse, the build file is cached restricting any iterative changes.

I imagine a sandbox environment with some mock data would work for just the checkout process, but curious how are other developers dealing with this?

Any help is appreciated.

Thanks,
Ron

New Address being save in Address Book even though shouldSaveAddress is false either by unchecking the tickbox or altering shouldSaveAddress data to false

Video Reference: Demo Link

Hi, i have some problem.
I use instruction to install: https://github.com/bigcommerce/checkout-js, don`t change any, step by step
OS: Windows, use node: 14, npm: 6.

I am using "Paymetric" payment method and enabled "Enable stored credit cards with Paymetric"
When I go to payment step, it gives error

And I am using Custom Checkout

->npm ci working well.
->npm run build generates error => ERROR: Something went wrong in @nrwl/run-commands - Command failed: webpack --mode production
-> npm run build command runs successfully in mac machine but throws error in windows 10 machine.

There's an issue with the customer.customerGroup data being stale as returned by checkoutState.data.getCustomer().

To reproduce the error:

1. [back-office] ensure setting for "guest" customers is "-- No Group --"
2. [checkout] login via the Customer step
3. [checkout] once logged in, click the "Sign Out" button back at the Customer step
4. [checkout] the customer.customerGroup data will now be stale (the previously logged in user's customer group will still be the value)

When the new state is merged into the existing customer object, if customerGroup is undefined it will leave the previous value there, causing our state to become stale / inaccurate.

When Guest customers have a customer group assigned the key gets updated correctly... this is because the customerGroup value for those users is defined. The merging of old state into new has no problem in this case.

This is likely an SDK issue, sorry if this is the wrong location repo to post within.

The value for "reedemable.toggle_action" in our "en.json" file reads: "Enter Discount / Coupon Code"
The production website reads: "Coupon/Gift Certificate"

We do not offer Gift Certificates, we have that functionality overridden. However, the Production Site is pulling a different value that we haven't set.

Hi,

I've followed this instruction here to try the custom checkout script on local but encounter this error when going to /checkout page

loader.ts?de6e:40 Uncaught (in promise) ReferenceError: MANIFEST_JSON is not defined
    at loadFiles (loader.ts?de6e:40)
    at eval (auto-loader.ts?5227:29)
    at step (tslib.es6.js?9ab4:100)
    at Object.eval [as next] (tslib.es6.js?9ab4:81)
    at eval (tslib.es6.js?9ab4:74)
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js?9ab4:70)
    at autoLoad (auto-loader.ts?5227:21)
    at eval (auto-loader.ts?5227:21)
    at Module../src/app/auto-loader.ts (auto-loader-dev.js:8031)

Is there anything that I miss in the steps?

The script URL is http://127.0.0.1:8081/auto-loader-dev.js

How could I run dev in Windows?

I have got the error when I fire the command npm run build. I have tried many times to clean npm cache but it still gets the error. Can you please help me to solve this issue? Here is the below error code.

[171] (webpack)/buildin/module.js 552 bytes {0} {1} [built]
[174] ./src/app/common/bundler/index.ts 71 bytes [built]
[175] ./src/app/common/utility/index.ts 180 bytes [built]
[176] ./src/app/auto-loader.ts 1.31 KiB {0} [built]
[177] ./src/app/common/utility/emptyData.ts 276 bytes [built]
[178] ./src/app/common/utility/parseAnchor.ts 396 bytes [built]
[179] ./src/app/common/utility/retry.ts 1.26 KiB [built]
    + 171 hidden modules
 npm ERR! code ELIFECYCLE 
 npm ERR! errno 2
 npm ERR! @bigcommerce/[email protected] build: `rm -rf dist && webpack --mode production`
 npm ERR! Exit status 2
 npm ERR!
 npm ERR! Failed at the @bigcommerce/[email protected] build script.
 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

 npm ERR! A complete log of this run can be found in:
 npm ERR!     C:\Users\rapidadmin\AppData\Roaming\npm-cache\_logs\2020-10-19T10_21_38_252Z-debug.log

We have noticed that some of our clients' stores now have some styling issues with the step headers on the checkout. This seems to be a common occurrence on any site where we increased the font size of the step headers.

Example

I believe this was introduced in the following commit: 1f14515

I believe the root cause is that for some reason the height attribute on the figure is setting the height of the step header, resulting in a broken look when the header font is larger than the set height. Perhaps a fix is to change height to min-height?

Hi,

Hope you are doing well.
I'm an engineer at fabricwarehouse.com (one of your clients). For many reasons, we want to use this code as our main checkout app instead of the default checkout app.

Our question: Is this project updated regularly following the BigCommerce system's update? Is it fully tested?

Currently, we only use PayPal as a payment method.

Thank you!

The webpack is not watching and re-compiling the file changes after it has been initialized and hence requires us to hit the command npm run dev every time any changes are made. This makes local development time-consuming and frustrating as the initial command npm run dev takes about 10-15 mins to complete and get running, so doing this every time we make a small change is not ideal.

Is there anything we can do to fix this issue and is anyone else facing the same?
Any help would be highly appreciated.

const fetchCartData = async () => {
try {
const response = await fetch('https://api.bigcommerce.com/stores/{aherf0o3nw}/v3/carts/{1c0f378e-754d-4d0e-9725-47b6b63eb43a}', {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-Auth-Token': '7bbfqce4j84ony1hvxyvqwp8qcaex9a',
'X-Auth-Client': '8nvp8k6y09jvbxxfxqkfij2oc4zdqho'
},
mode: 'no-cors'

  });

  const data = await response.json();
  setCartData(data);
} catch (error) {
  console.error(error);
}

};

Run npm audit --production on the latest version "version": "1.291.0"

Below are the results:

                                                                                
                       === npm audit security report ===                        
                                                                                
# Run  npm install [email protected]  to resolve 2 vulnerabilities
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ The `size` option isn't honored after following a redirect   │
│               │ in node-fetch                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ node-fetch                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ formik                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ formik > create-react-context > fbjs > isomorphic-fetch >    │
│               │ node-fetch                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://github.com/advisories/GHSA-w7rc-rwvf-8q5r            │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ node-fetch is vulnerable to Exposure of Sensitive            │
│               │ Information to an Unauthorized Actor                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ node-fetch                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ formik                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ formik > create-react-context > fbjs > isomorphic-fetch >    │
│               │ node-fetch                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://github.com/advisories/GHSA-r683-j2x4-v87g            │
└───────────────┴──────────────────────────────────────────────────────────────┘


# Run  npm install [email protected]  to resolve 1 vulnerability
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Critical      │ Prototype Pollution in property-expr                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ property-expr                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ yup                                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ yup > property-expr                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://github.com/advisories/GHSA-6fw4-hr69-g3rv            │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Critical      │ Prototype Pollution in property-expr                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ property-expr                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.0.3                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ @bigcommerce/checkout-sdk                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ @bigcommerce/checkout-sdk > yup > property-expr              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://github.com/advisories/GHSA-6fw4-hr69-g3rv            │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 4 vulnerabilities (1 low, 1 high, 2 critical) in 336 scanned packages
  3 vulnerabilities require semver-major dependency updates.
  1 vulnerability requires manual review. See the full report for details.

Could you please fix the vulnerabilities ?

On refresh/navigating to the checkout page after adding the shipping address and selecting the shipping method, the shipping sections get expanded and after it's going to the payment section