Полосатая кнопка пожертвования на стороне клиента с React

Я хотел добавить кнопку пожертвования на свой веб-сайт React https://localpdf.tech. Stripes Client-Only-Checkout идеально подходит для этого, потому что вам не нужен сервер.

Включить только интеграцию Stripe Client

Во-первых, вам нужно добавить Test-Product в Stripe. Убедитесь, что вы активировали Просмотр тестовых данных:

После этого создайте простой Test-Product, чтобы позже протестировать нашу кнопку Donation. После того, как вы создали продукт, мы можем включить интеграцию только с клиентом. Перейдите в раздел Настройки › Настройки оформления заказа и включите интеграцию только с клиентом.

Затем введите домен для вашего веб-сайта, чтобы его можно было использовать в режиме реального времени. В моем случае это localpdf.tech.

Теперь вы настроены на сторону Stripe, и мы можем приступить к созданию кнопки React Donation.

Реагировать кнопку пожертвования

Чтобы использовать Stripe, установите пакет Stripe NPM:

npm install @stripe/stripe-js

После этого получите свой Ключ для публикации и с его помощью запустите библиотеку Stripe:

import { loadStripe } from "@stripe/stripe-js";
const stripePromise = loadStripe(
      "pk_test_51IUqMCJ2iOysJZvP3vrQpEoV2l1SpF9PzkycqVdKjmC3RYuDC3AqTvRfBDcsDwDmtxJlkUyip4GQOb8Akt0lF3O100RSHVPfch"
    );

Чтобы начать оформление заказа с помощью интеграции только с клиентом, вам нужно вызвать redirectToCheckout:

const stripe = await stripePromise;
stripe
  .redirectToCheckout({
    lineItems: [{ price: itemID, quantity: 1 }],
    mode: "payment",
    successUrl: window.location.protocol + "//localpdf.tech/merge",
    cancelUrl: window.location.protocol + "//localpdf.tech/merge",
    submitType: "donate",
  })
  .then(function (result) {
    if (result.error) {
      console.log(result);
    }
  });

Установите price в ProductID созданного Test-Product на Stripe-Dashboard. Затем установите successUrl и cancelUrl в нужное место. Вы можете установить submitType слишком auto, если вы не хотите, чтобы платеж был пожертвованием.

Вот полный код кнопки пожертвования React:

import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";
import { loadStripe } from "@stripe/stripe-js";
const stripePromise = loadStripe(
  "pk_test_51IUqMCJ2iOysJZvP3vrQpEoV2l1SpF9PzkycqVdKjmC3RYuDC3AqTvRfBDcsDwDmtxJlkUyip4GQOb8Akt0lF3O100RSHVPfch"
);
const DonationButton = ({ itemID, ammount }) => {
  const handleClick = async (event) => {
    const stripe = await stripePromise;
    stripe
      .redirectToCheckout({
        lineItems: [{ price: itemID, quantity: 1 }],
        mode: "payment",
        successUrl: window.location.protocol + "//localpdf.tech/merge",
        cancelUrl: window.location.protocol + "//localpdf.tech/merge",
        submitType: "donate",
      })
      .then(function (result) {
        if (result.error) {
          console.log(result);
        }
      });
  };
  return (
    <button
      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"
      onClick={handleClick}
    >
      Donate {ammount}$
    </button>
  );
};
export default function App() {
  return (
    <>
      <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
        <DonationButton
          ammount={"5.00"}
          itemID="price_1IUx1FJ2iOysJZvP1LD3EzTR"
        ></DonationButton>
      </div>
    </>
  );
}