Рубрики
Без рубрики

Оформление полосы с помощью следующего.js – Полное руководство

Привет, мир Меня зовут Ашик Чапагейн. Полный контент веб-разработчика с полным стеком … Tagged с JavaScript, Stripe, NextJS, Node.

Привет, мир

Меня зовут Ашик Чапагейн.

  • Полный веб-разработчик
  • Создатель контента
  • Студент колледжа
  • Непальский

Я проведу вас через весь процесс использования Оформление полосы с Next.js в этой статье.

Показатель

  • Вступление
  • Демо
  • Давайте построим
    • Установка
    • Уборка
    • Создание UI
    • Создание бэкэнда
    • Перенаправление на страницу оформления полосы
    • Отображение успеха и отмены сообщения
  • Файлы
  • Вывод

Вступление

Давайте посмотрим на краткое введение Полоса и Оформление полосы Анкет

Полоса : Полоса является онлайн -платформой обработки платежей и обработки кредитных карт для предприятий.

Оформление полосы : Оформление полосы предварительно построена, размещенная страница оплаты оптимизирована для конверсии.

Демо

Живой предварительный просмотр: https://stripe-checkout-next-js-demo.vercel.app/

GitHub: https://github.com/projectashik/stripe-checkout-next-js-demo

Давайте построим

Установка

Как упомянуто в заголовке, мы будем использовать Next.js Для построения этого.

Для Next.js Для работы нам нужно иметь Node.js и npm установлены.

Итак, сначала установите Node.js Если вы еще этого не сделали. Вы можете следовать следующим руководствам для установки Node.js Анкет

Необязательно: Если вы хотите использовать пряжа , установить его с помощью npm Анкет

npm install --global yarn

Теперь создайте новое приложение Next.js.

npx create-next-app stripe-checkout

yarn create next-app stripe-checkout

Я использовал Tailwindcss для стиля компонентов. Итак, установим Tailwindcss слишком.

yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Затем запустите следующую команду для создания файла конфигурации TailWindcss и файла конфигурации PostCSS.

npx tailwindcss init -p

Теперь откройте проект в вашем любимом текстовом редакторе или IDE (интегрированная среда разработки).

Для меня это Visual Studio Code Анкет

# Run the following command to open the project in VS Code.
code .

Теперь открыт tailwind.config.js и обновление чистка опция и добавить Режим: 'Jit' Анкет

// tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  mode: 'jit',
  ...
};

Затем открыть styles/globals.css и удалить весь контент и добавить следующий контент.

@tailwind base;
@tailwind utilities;
@tailwind components;

* Короткий метод: * Если вы хотите использовать короткий процесс. Просто запустите следующую команду.

npx create-next-app -e with-tailwindcss stripe-checkout
yarn create next-app -e with-tailwindcss stripe-checkout

Теперь запустите Dev Server и запустите кодирование.

yarn dev
npm run dev

Уборка

Удалите Главный и нижний колонтитул Теги из Страницы/index.js Анкет

Если вы хотите отредактировать Название и Описание в ярлык. Тогда ты можешь.

// pages/index.js
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    

      
        Stripe Checkout with Next.js
        
        
      
    

  );
}

И удалить все стили, кроме .контейнер в styles/home.module.css Анкет

/* styles/Home.module.css */
.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Создание UI

Во -первых, мы создадим индексную страницу, на которой у нас будет один элемент, который пользователи могут приобрести.

Давайте добавим подробности элемента в объект.

// pages/index.js

const [item, setItem] = useState({
    name: 'Apple AirPods',
    description: 'Latest Apple AirPods.',
    image:
      'https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80',
    quantity: 0,
    price: 999,
  });

Не забудьте импортировать USESTATE крюк.

import { useState } from 'react';

Поскольку мы используем UNSPLASH для изображений, поэтому нам нужно настроить Images.unsplash.com под изображения раздел в Next.config.js Анкет

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['images.unsplash.com'],
  },
};

Теперь давайте отобразим следующие детали в пользовательском интерфейсе и добавим кнопки, чтобы увеличить и уменьшить количество пользователей, которые хотят приобрести.

В, Страницы/index.js

...


  

    {item.name}
    
$ {item.price}

    
{item.name}

    
{item.description}

    
Quantity:

    

      
      
      
    

    
Total: ${item.quantity * item.price}

    
  



...

Теперь ваша страница должна выглядеть так.

Теперь давайте сделаем кнопку увеличить и уменьшить количество работы.

Теперь мы создадим onquantityplus и onquantityminus Функции для увеличения и уменьшения количества элемента на кнопке нажатия.

const changeQuantity = (value: number) => {
  // Don't allow the quantity less than 0, if the quantity is greater than value entered by user then the user entered quantity is used, else 0
  setItem({ ...item, quantity: Math.max(0, value) });
};

const onQuantityPlus = () => {
  changeQuantity(item.quantity + 1);
};

const onQuantityMinus = () => {
  changeQuantity(item.quantity - 1);
};

Теперь добавьте эту функцию в событие соответствующих кнопок.

...

...

...

Теперь давайте добавим Onchange Событие в поле ввода, чтобы обновить значение количества элемента, а также не забудьте изменить DefaultValue к ценность .

...

...

Теперь давайте создадим OnInputChange функция

...
//
const onInputChange = (e) => {
    changeQuantity(parseInt(e.target.value));
};
...

Создание бэкэнда

Сначала мы начнем с установки полоса библиотека.

yarn add stripe
npm install stripe

Теперь давайте добавим необходимый переменные среды . Создать новый файл .env.local В корневом каталоге со следующими данными.

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=YOUR_STRIPE_PUBLISHABLE_KEY
STRIPE_SECRET_KEY=YOUR_STRIPE_SECRET_KEY

Вы можете получить эти учетные данные от Dashboard -> Разработчики -> Ключи API Анкет

Теперь нам нужно построить API, чтобы получить идентификатор сеанса, который требуется для перенаправления пользователя на страницу оформления заказа.

Создайте новый файл в api/create-strie-session.js Анкет И добавить следующее.

const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

export default async (req, res) => {
  const { item } = req.body;
};

Здесь мы получаем детали предмета с помощью метода POST, который мы позвоним в переднюю часть.

Создание формы для предмета, необходимого для полосы.

Существует особый тип объекта, который ожидает полоса, это объект. Вы должны использовать свою местную валюту вместо «доллара США», если хотите.

const transformedItem = {
    price_data: {
      currency: 'usd',
      product_data: {
        images: [item.image],
        name: item.name,
      },
      unit_amount: item.price * 100,
    },
    description: item.description,
    quantity: item.quantity,
  };

* Создание сеанса полосы в бэкэнде: *

Вам нужно будет создать объект сеанса полосы, где вам нужно определить некоторые данные.

const session = await stripe.checkout.sessions.create({
  payment_method_types: ['card'],
  line_items: [transformedItem],
  mode: 'payment',
  success_url: redirectURL + '?status=success',
  cancel_url: redirectURL + '?status=cancel',
  metadata: {
    images: item.image,
  },
});

res.json({ id: session.id });

  • платеж_method_type В этом мы добавляем методы оплаты, чтобы заплатить цену продукта. Нажмите здесь Чтобы узнать больше способов оплаты.

  • Успех_урль : В Успех_урль Вы определяете, куда пользователь будет успешным.

  • cancel_url : В cancel_url Вы определяете, куда будет идти пользователь, если пользователь нажимает кнопку Back. Это может быть страница отмены или страница оформления заказа.

  • Метаданные : В Метаданные , мы добавим изображения продукта, если вы хотите, вы можете добавить другие параметры.

Для других вариантов, Нажмите здесь знать.

Теперь финал Create-stripe-session.js Файл должен выглядеть так.

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

async function CreateStripeSession(req, res) {
  const { item } = req.body;

  const redirectURL =
    process.env.NODE_ENV === 'development'
      ? 'http://localhost:3000'
      : 'https://stripe-checkout-next-js-demo.vercel.app';

  const transformedItem = {
    price_data: {
      currency: 'usd',
      product_data: {
        images: [item.image],
        name: item.name,
      },
      unit_amount: item.price * 100,
    },
    description: item.description,
    quantity: item.quantity,
  };

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [transformedItem],
    mode: 'payment',
    success_url: redirectURL + '?status=success',
    cancel_url: redirectURL + '?status=cancel',
    metadata: {
      images: item.image,
    },
  });

  res.json({ id: session.id });
}

export default CreateStripeSession;

Теперь наш бэкэнд готов, теперь мы должны отправить запрос на сообщение в API, чтобы получить сеанс.

Перенаправление на страницу оформления полосы

Для перенаправления на страницу оформления полосы. Мы должны установить следующие библиотеки.

yarn add @stripe/stripe-js axios
npm install @stripe/stripe-js axios

Сначала мы сначала создадим StripePromise переменная.

const publishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
const stripePromise = loadStripe(publishableKey);

Теперь мы создадим CreateCheckoutsessessess Функция, чтобы получить сеанс полосы для оформления заказа.

const createCheckOutSession = async () => {
  const stripe = await stripePromise;
  const checkoutSession = await axios.post('/api/create-stripe-session', {
    item: item,
  });
  const result = await stripe.redirectToCheckout({
    sessionId: checkoutSession.data.id,
  });
  if (result.error) {
    alert(result.error.message);
  }
};

Не забудьте импортировать нагрузка и Аксиос .

import { loadStripe } from '@stripe/stripe-js';
import axios from 'axios';

Теперь мы должны вызвать эту функцию, пока пользователь нажимает Купить кнопка. И onclick = {createCheckoutsessessess}

Теперь давайте проверим кассу.

Поскольку мы обновили Next.config.js и добавил .env.local Файл, поэтому перезапустите сервер Dev.

yarn dev
npm run dev

Теперь результат должен выглядеть так.

Отображение успеха и отмены сообщения

Если вы, ребята, помните, то мы использовали ? Статус = Параметр запроса в Успех_урль и cancel_url Анкет

// pages/api/create-stripe-session.js
...
const session = await stripe.checkout.sessions.create({
    ...
    success_url: redirectURL + '?status=success',
    cancel_url: redirectURL + '?status=cancel',
    ...
  });

...

Итак, с этим параметром запроса мы узнаем, является ли платеж успешным или отменен. И покажите соответствующее сообщение.

Во -первых, давайте возьмем статус.

// pages/index.js

import { useRouter } from 'next/router';

...
const router = useRouter();
const { status } = router.query;

Теперь добавьте следующее ниже стартового основного тега, чтобы отобразить сообщение.

// pages/index.js

{status && status === 'success' && (
  

    Payment Successful
  

)}
{status && status === 'cancel' && (
  

    Payment Unsuccessful
  

)}

Теперь результат должен быть таким.

Наше приложение потребовалось некоторое время, чтобы назначить сеанс полосы. Итак, в течение этого времени давайте отобразить Обработка... вместо Купить Внутри кнопки, как показано в демонстрации.

Для этого, Создайте новое состояние с именем загрузки со значением по умолчанию ложный Анкет

const [loading, setLoading] = useState(false);

Затем обновление загрузка значение для Верно , при создании сеанса полосы. и снова обновление загрузка значение для ложный Когда сеанс полосы создается.

const createCheckOutSession = async () => {
  setLoading(true);
  ...
  setLoading(false);
};

А теперь обновите Купить Кнопка.

Здесь мы отключаем кнопку при загрузке и отображении Обработка... во время загрузки.

Теперь результат должен быть следующим:

Все сделано.

Файлы

Наконец, ваш Страницы/index.js Файл должен выглядеть ниже:

import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { useState } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import axios from 'axios';
import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();
  const { status } = router.query;

  const [loading, setLoading] = useState(false);

  const [item, setItem] = useState({
    name: 'Apple AirPods',
    description: 'Latest Apple AirPods.',
    image:
      'https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80',
    quantity: 0,
    price: 999,
  });

  const changeQuantity = (value) => {
    // Don't allow the quantity less than 0, if the quantity is greater than value entered by user then the user entered quantity is used, else 0
    setItem({ ...item, quantity: Math.max(0, value) });
  };

  const onInputChange = (e) => {
    changeQuantity(parseInt(e.target.value));
  };

  const onQuantityPlus = () => {
    changeQuantity(item.quantity + 1);
  };

  const onQuantityMinus = () => {
    changeQuantity(item.quantity - 1);
  };

  const publishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
  const stripePromise = loadStripe(publishableKey);
  const createCheckOutSession = async () => {
    setLoading(true);
    const stripe = await stripePromise;
    const checkoutSession = await axios.post('/api/create-stripe-session', {
      item: item,
    });
    const result = await stripe.redirectToCheckout({
      sessionId: checkoutSession.data.id,
    });
    if (result.error) {
      alert(result.error.message);
    }
    setLoading(false);
  };
  return (
    

      
        Stripe Checkout with Next.js
        
        
      
      

        {status && status === 'success' && (
          

            Payment Successful
          

        )}
        {status && status === 'cancel' && (
          

            Payment Unsuccessful
          

        )}
        

          {item.name}
          
$ {item.price}

          
{item.name}

          
{item.description}

          
Quantity:

          

            
            
            
          

          
Total: ${item.quantity * item.price}

          
        

      

    

  );
}

И Страницы/API/Create-stripe-sessoin.js должен выглядеть так.

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

async function CreateStripeSession(req, res) {
  const { item } = req.body;

  const redirectURL =
    process.env.NODE_ENV === 'development'
      ? 'http://localhost:3000'
      : 'https://stripe-checkout-next-js-demo.vercel.app';

  const transformedItem = {
    price_data: {
      currency: 'usd',
      product_data: {
        images: [item.image],
        name: item.name,
      },
      unit_amount: item.price * 100,
    },
    description: item.description,
    quantity: item.quantity,
  };

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [transformedItem],
    mode: 'payment',
    success_url: redirectURL + '?status=success',
    cancel_url: redirectURL + '?status=cancel',
    metadata: {
      images: item.image,
    },
  });

  res.json({ id: session.id });
}

export default CreateStripeSession;

Вывод

Итак, мы подошли к концу. Надеюсь, вам понравится эта статья. Пожалуйста, подумайте о том, чтобы дать отзыв о моем письме.

Важные ссылки

Кредиты

Связаться со мной:

Оригинал: “https://dev.to/byteslash/stripe-checkout-with-next-js-the-complete-guide-3i1”

Читайте ещё по теме: