React Stripe.js リファレンス

React Stripe.js は、Stripe Elements を囲むシンラッパーです。これにより、あらゆる React アプリに Elements を追加できるようになります。

The Stripe.js reference covers complete Elements customization details.

Elements を任意の Stripe プロダクトとともに使用することで、オンライン支払いを回収できます。お客様のビジネスに適した導入パスについては、Stripe のドキュメントをご覧ください。

はじめに

このガイドは、React の基本的な実践知識があること、また、React プロジェクトがすでに設定されていることを前提としています。React を初めて使用する場合は、先に進む前に React のクイックスタートガイドをお読みになることをお勧めします。

設定

npm install --save @stripe/react-stripe-js @stripe/stripe-js

Checkout provider

The CheckoutProvider allows you to use Element components and access the Stripe object in any nested component. Render a CheckoutProvider at the root of your React app so that it’s available everywhere you need it.

To use the CheckoutProvider, call loadStripe from @stripe/stripe-js with your publishable key. The loadStripe function asynchronously loads the Stripe.js script and initializes a Stripe object. Pass the returned Promise to the CheckoutProvider.

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

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

export default function App() {
  const fetchClientSecret = () => {
    return fetch('/create-checkout-session', {method: 'POST'})
      .then((response) => response.json())
      .then((json) => json.checkoutSessionClientSecret)
  };

  return (
    <CheckoutProvider stripe={stripePromise} options={{fetchClientSecret}}>
      <CheckoutForm />
    </CheckoutProvider>
  );
};

Element コンポーネント

Element components allow you to securely collect payment information in your React app and place the Elements wherever you want on your checkout page. You can also customize the appearance.

You can mount individual Element components inside of your CheckoutProvider tree. You can only mount one of each type of Element in a single <CheckoutProvider>.

import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      <PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;

使用可能な Element コンポーネント

You can use several different kinds of Elements for collecting information on your checkout page. These are the available Elements:

useCheckout hook

useCheckout(): Checkout | null

Use the useCheckout hook in your components to get the Checkout object, which contains data from the Checkout Session, and methods to update and confirm the Session.

import {useCheckout, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkout = useCheckout();

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    const result = await checkout.confirm();

    if (result.type === 'error') {
      // Show error to your customer (for example, payment details incomplete)
      console.log(result.error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button>Submit</button>
    </form>
  )
};

export default CheckoutForm;

カスタマイズとスタイリング

Each element is mounted in an iframe, which means that Elements probably won’t work with any existing styling and component frameworks that you have. Despite this, you can still configure Elements to match the design of your site. Customizing Elements consists of responding to events and configuring Elements with the appearance option. The layout of each Element stays consistent, but you can modify colors, fonts, borders, padding, and so on.