Как создать событие onClick для кнопки отправки формы, которое отправляет данные в Netlify и перенаправляет на Stripe Checkout?

Question

Код моего сайта размещен по https://github.com/CB-Essential-Services/adorable-chestnut/blob/staging-3/src/components/checkout.js

Я использую стек Netlify - Gatsby - StripeCheckout.

Проблема: мне нужен submitКнопка в коде ниже, чтобы и представить данные формы Netlify форм и с использованием " OnClick события" redirectToCheckout для обработки платежа с помощью Stripe.

       Checkout.js

         import React, { useState } from "react";
import { loadStripe } from "@stripe/stripe-js";

import _ from 'lodash';

function encode(data) {
    return Object.keys(data)
      .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
      .join('&')
  }

let stripePromise
const getStripe = () => {
  if (!stripePromise) {
    stripePromise = loadStripe("pk_test_RlvibjeKdvwY81acv2YLwvTM00I3UsWXIi")
  }
  return stripePromise
}

const Checkout = () => {
  const [loading, setLoading] = useState(false)

  const redirectToCheckout = async event => {
    event.preventDefault()
    setLoading(true)

    const stripe = await getStripe()
    const { error } = await stripe.redirectToCheckout({
      mode: "subscription",
      lineItems: [{ price: "price_1Gva5YAeKYVunD5viRkFzoR7", quantity: 1 }],
      successUrl: `http://localhost:8000/thanks/`,
      cancelUrl: `http://localhost:8000/404`,
    })

    if (error) {
      console.warn("Error:", error)
      setLoading(false)
    }
  }

  return (    
<form
    name="transfer"
    method="POST"
    content-type= "application/x-www-form-urlencoded"
    data-netlify-honeypot="bot-field"
    data-netlify="true"
    id="transfer"
    className="transfer"
>
    <p className="screen-reader-text">
        <label>Don't fill this out if you're human: <input name="bot-field" /></label>
    </p>
    <p className="form-row">
        <label htmlFor="transfer-name" className="form-label">Name</label>
        <input type="text" name="name" id="transfer-name" className="form-input" />
    </p>
    <p className="form-row">
        <label htmlFor="transfer-email" className="form-label">Email address</label>
        <input type="email" name="email" id="transfer-email" className="form-input" />
    </p>
    <input type="hidden" name="transfer" value="transfer" />
    <p className="form-row form-submit">
        <button type="submit" className="button" 
        disabled={loading}
      onClick={redirectToCheckout}>
          Pay
          </button>
    </p>
</form>
  )
}

export default Checkout

В redirectToCheckoutчасть работает нормально. Служба поддержки Stripe заявила, что я должен иметь возможность отправлять данные формы в Netlify -> начальный конво с Stripe вторичный конво с Stripe

Таким образом, поддержка разработчиков Stripe сказала: " Да, я могу использовать redirectToCheckoutв любой точке интерфейса. Например, отправьте данные формы в Netlify с помощью AJAX, затем при разрешении результата redirectToCheckout.

Это другой метод, чем то, что я делаю. Понятия не имею, как использовать AJAX!

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

Answer 1

Вам нужно расширить и перенаправить свой поток redirectToCheckout после завершения всех проверок.

Предполагая, что ваш redirectToCheckout функция правильно отправляет ваши данные в Stripe, вам нужно только передать ваши данные в Netlify и сделать простое перенаправление.

  const redirectToCheckout = async event => {
    event.preventDefault()
    setLoading(true)

   // form validations here. If passed the validation, send data to Stripe and Netlify

    const stripe = await getStripe()
    const { error } = await stripe.redirectToCheckout({
      mode: "subscription",
      lineItems: [{ price: "price_1Gva5YAeKYVunD5viRkFzoR7", quantity: 1 }],
      successUrl: `http://localhost:8000/thanks/`,
      cancelUrl: `http://localhost:8000/404`,
    })


    fetch(`/`, {
      method: `POST`,
      headers: {
        'Content-Type': `application/x-www-form-urlencoded`,
      },
      body: encode({
        'form-name': `transfer`,
        ...data, // here you need to pass your data object
      }),
    })
      .then(() => console.log(`OK`)) // navigate to desired page
      .catch(error => alert(error));
    };

    if (error) {
      console.warn("Error:", error)
      setLoading(false)
    }
  }

В приведенном выше фрагменте много всего. Прежде всего, убедитесь, что вы правильно проверили свои данные и создаете объект данных с key-value пары для всех ваших полей, прежде чем отправлять их в Stripe API или Netlify, вам необходимо предварительно проверить свою форму.

Затем вам нужно только создать асинхронный запрос, используя fetch (Встроенный JavaScript) или используя axios например. При работе с формами Netlify структура данных очень важна, и обязательно иметь именно ту информацию, которую нужно передать. Вы можете проверить эту статью для получения дополнительной информации.

Как только ваше обещание завершится успешно, вам нужно только изменить console.log(`OK`) для navigate("/your-page").