Артём

opencart - уже сделанный магазин,
т. е. настолько просто, что как палец о палец не ударить

Большой псевдоэлемент с нужным скруглением.
И overflow родителю
https://jsfiddle.net/Ankhena/2paLqgkL/2/ - тут надо заменить div на псевдо. Это древний пример и немножко для других целей.

Альтернатива, которуя я больше люблю это радиальные градиенты. https://jsfiddle.net/Ankhena/upvxac29/
https://jsfiddle.net/Ankhena/0qxLo3us/

Еще одна: clip-path svg

по мне так и вот это -> previews.aspirity.com/danny идеальное резюме

Object.assign
Линк

var a = {a:1, b:2, c:3};
var b = {a:2, b:2};

console.log(Object.assign(a,b));   // result Object {a: 2, b: 2, c: 3}

Я так понимаю я могу просто взять какой-нибудь Unitpay, и использовать его? Будет просто происходить переход с моего сайта на сервис юнитпей и там можно будет оплатить?

да.

есть готовый компонент карты: https://github.com/amarofashion/react-credit-cards

Косметические правки

Если используется Redux или другая state-management библиотека, лучше ложить в store такие данные.

Если таких библиотек нет, и компоненты функциональные, можно написать хук.

Если class-компоненты, тогда можно и HOC создать.

Можно и Context создать, но поскольку страницы разные, этот вариант я бы не стал применять.

Вот смотрите. Класс, это шаблон по которому создаются объекты. Состояние класса, то есть его поля, уникальны для каждого экземпляра. Независимо от количества экземпляров класса, его методы всегда будут работать именно с его состоянием, так как они связанны контекстом. Другими словами логика находящаяся в методах связанна с объектом класса.

Так вот хуки это попытка реализовать поведение методов в функциях. То есть определяя хук вы привязываете его к жизненному циклу функционального компонента и его состоянию. Проще говоря для каждой копии функционального компонента создается отдельная копия хука.

Из этого следует что обращатся за данными на сервер в хуке нельзя, поскольку каждый компонент использующий ваш хук будет выполнять отдельный запрос к БД. Хук это не сервис. Хук это попытка реализации поведения методов в функциональных компонентах.

Когда разные компоненты нуждаются в одних и тех же данных их получение и хранение выносят на отдельный соответствующий слой(слои). Для реакта это redux/mobx.

Если у некоторых ваших компонентов много одинаковых методов, вы можете посмотреть в сторону HOC

Чем мне нравится BEM-naming, так это очень легко понять, где искать файл, в случае вопросов/проблем с вёрсткой. Особенно, это очень помогает, когда проект уже долго поддерживается и над ним начинают работать новенькие в команде.