feat(payment): INT-2118 adding amazon pay option

[deov31]

INT-2118
INT-2188

What?

• I added new component to handle a new version of amazon pay in the checkout. I also modified the behavior of this new amazonpay so it renders a static hosted widget where only shows a payment descriptor sent by amazon and a disconnect link.

• I modified the Shipping component due to a requirement of Amazon. When a merchant is using amazonv2 (amazonpay) a billing address might be sent from amazon depending on if the merchant account is whitelisted. So in that case we need to show that billing address in the billing step instead of the shipping address. On the other hand, if no billing address is sent, we will show the same static message used for amazonv1 in the billing step.

---

---

• I added a new component called StaticAddressEditable to handle a needed behavior in amazonv2. There's a scenario where the address selected in amazon page when starting checkout process might not be valid, so after returning to the checkout page and showing the static address there's no way to change it but only editing shopping cart. To solve that we added a new Edit Button to handle that change. In the PR #866 we added a new shipping strategy to bind the new button with the ChangeAction in Amazon and be able to edit the shipping address on amazon end.

Why?

Per requeriment of this new amazonpay version it has to show static addresses on bigcommerce side because that step is made in an amazon page.

Testing / Proof

Demos Links

https://drive.google.com/open?id=1vOGKZCzkVa981zwpn4HbpjJ0ydXKhmi7

THIS PR DEPENDS ON ANOTHER PR IN CHECKOUT-SDK-JS #866

@bigcommerce/checkout @bigcommerce/apex-integrations

[clopezh]

Hey @deov31 I have some comments for you, Could you please take a look and if you have any question please let me know. Also please fix the tests that are failing in circle ci 🔴 ♻️

[deov31]

Hi @clopezh, thanks for your comments. Can you please take a look again? Also, build continue failing due a missing field in CustomerInitializeOptions and PaymentInitializeOptions in checkout sdk side, tests are passing. ♻️

[clopezh]

LGTM :+1

[ghost]

💚 Tested

QA Details:

• Test suite to verify payment option for amazon works correctly

[clopezh]

@deov31 Hello Fanny! I only have one comment, Could you please take a look?

[deov31]

Hi @clopezh I addressed your new comment. Can you please take a look again? ♻️ Thanks for the review.

[clopezh]

All looks good! Thank you for addressing my requests 👍

[lpschz]

@deov31 could you please take a look at the build errors? thanks!

[deov31]

Hi @capsula4 the build error is caused due to the missing types on the current version of sdk on master. We created a new PR in sdk code but it points to a feature branch called amazon_maxo. I think we have two ways to fix this:

1. Adding the amazon_maxo feature branch version in package.json to retrieve needed dependencies to fix the build, but we cannot merge this until the sdk code is merged as I mentioned in the description due to the dependency. Also, if this was possible, after merging the feature branch version into master I will change again the version in the package.json

2. Is there any way I can point to a specific version of checkout-sdk on the circle CI build job? Or any env variable I could change in the circle CI configuration?

The build error is

ERROR in /home/circleci/repo/src/app/payment/paymentMethod/AmazonPayV2PaymentMethod.tsx(35,9):
   TS2345: Argument of type '{ amazonpay: { container: string; }; amazon?: AmazonPayCustomerInitializeOptions | undefined; braintreevisacheckout?: BraintreeVisaCheckoutCustomerInitializeOptions | undefined; ... 8 more ...; params?: {} | undefined; }' is not assignable to parameter of type 'CustomerInitializeOptions'.
     Object literal may only specify known properties, and 'amazonpay' does not exist in type 'CustomerInitializeOptions'

If you have any observation or recommendation, please let me know.

[deov31]

Hi @capsula4, thanks for the review. I addressed your comments, can you please take a look again? ♻️

[lpschz]

Thanks for addressing the feedback! Looking better! Just one outstanding question around syncing the billing address to the API with the same information that the API actually returned.

[deov31]

Thanks again for the new comments @capsula4. I updated the PR based on your feedback. Can you please take a look again? ♻️

[mauricio-sg]

Hi @capsula4, I also made some changes to this PR because of the dependency with SDK, let us know any question you could have. Thanks!

[deov31]

Hi @capsula4 I addressed your latest suggestions. Can you review again? ♻️

[ghost]

💚 Tested

QA Details: Re-testing to validate changes from comments in PR. A couple of test cases where added.

• Test suite to verify payment option for amazon works correctly

[mauricio-sg]

@deov31 @rodna-bc @capsula4 I had to do one more commit because of the last suggested changes on SDK. With this change, CircleCI will not pass because of the new isShippingStepPending selector.