Я буду краток и прост.

Что будем делать?

Мы создадим кнопку PayPal Express Checkout для нашего веб-сайта Next.js

Что тебе нужно:

Наш компонент PaypalButton в конечном итоге будет выглядеть так. Если вы уже прочитали и поняли это, возможно, вам не нужно продолжать, я покажу все шаг за шагом.

1. Включите скрипт PayPal Checkout в свое приложение.

<script src="https://www.paypalobjects.com/api/checkout.js" />

Добавьте этот скрипт в свое приложение, я добавил свой в _documents.js ( если вы кодируете в обычном React, вы можете добавить его в свой index.html как обычный тег скрипта )

2. Создайте компонент PaypalButton.

Этот компонент будет использоваться для кнопки «Купить» PayPal. Мы будем использовать этот компонент, когда хотим отобразить кнопку оформления заказа, все остальные обработает сам PayPal.

  • Создайте свой компонент с именем PaypalButton.js или как хотите.

Приведенный выше код - это наш скелетный компонент. По сути, он отображает сообщение «Загрузка…» до тех пор, пока не будет вызван componentDidMounth () и для состояния isEnabled будет установлено значение true.

Поскольку Next.js - это SSR, а paypal-express-checkout - это клиентская библиотека, мы не можем использовать ее непосредственно при рендеринге. Мы должны дождаться загрузки страницы, конечно, используя componentDidMount ().

Проверьте этот базовый код в официальной документации PayPal, прежде чем переходить к следующему шагу: https://developer.paypal.com/demo/checkout/#/pattern/client

Теперь мы готовы создать нашу кнопку, мы уже включили скрипт PayPal в наше приложение. И я предполагаю, что вы проверили фрагмент кода по ссылке выше.

Теперь вы можете использовать метод paypal.Button.render (проверьте ссылку выше, если вы еще этого не сделали) внутри componentDidMount (). Последним кодом компонента будет код в самом начале этого поста. Просто используйте пример кода в документации PayPal, как это сделал я.

Заключение

Теперь у вас есть компонент кнопки оплаты, добавьте его на любую страницу и используйте. Кнопка оплаты PayPal будет автоматически сгенерирована и отображена в вашем div, и когда вы нажмете на нее, вы увидите это, как и ожидалось:

Не забывайте, что мы установили сумму платежа и валюту внутри нашего компонента как 1 доллар США, для большей гибкости используйте реквизиты для получения таких данных от компонента рендеринга. Я оставил эту часть тебе.

Спасибо за прочтение!

Не забывайте подписываться на меня, чтобы следить за новыми сообщениями в блоге.