# Afterpay または Clearpay の支払いを受け付ける

アメリカ、カナダ、イギリス、オーストラリア、ニュージーランドで、Afterpay (イギリスでは Clearpay とも呼ばれている) による支払い方法を受け付ける方法をご紹介します。

> Stripe は、通貨、支払い方法の制限、その他のパラメーターを評価することで、適切な支払い方法を顧客に自動的に提示できます。
> 
> - [決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted)ガイドに従って、[動的な決済手段](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)を使用するチェックアウトの統合機能を構築します。
- 動的な決済手段を使用しない場合は、チェックアウトの導入で、決済方法を手動で設定するために以下のステップに従ってください。

Afterpay は、[使用が 1 回限り](https://docs.stripe.com/payments/payment-methods.md#usage)の[即時通知型](https://docs.stripe.com/payments/payment-methods.md#payment-notification)の決済手段であり、顧客は支払いの[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)を求められます。顧客は Afterpay のサイトにリダイレクトされ、そこで分割払いプランの規約に同意します。顧客が規約に同意すると、Afterpay により顧客への資金提供が保証され、お客様の Stripe アカウントに送金されます。顧客は一定の期間で直接 Afterpay に返済します。

> 連携を始める前に、[決済手段の設定](https://dashboard.stripe.com/settings/payment_methods)に移動して、アカウントが Afterpay の対象であることを確認してください。

## 互換性を判断する

**顧客の居住地**: Australia, Canada, New Zealand, UK, US

**対応可能な通貨**: `aud, cad, nzd, gbp, usd`

**取引通貨**: `aud, cad, nzd, gbp, usd`

**支払いモード**: Yes

**セットアップモード**: No

**サブスクリプションモード**: No

Afterpay 支払いに対応するには、Checkout セッションが次の条件をすべて満たしている必要があります。

- 使用できるのは単一の項目だけです (継続的な*サブスクリプション* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis)プランには対応していません)。
- *価格* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions)は国内通貨で示す必要があります。

## 支払いを受け付ける

> このガイドは、Checkout の基本的な[支払いの受け付け](https://docs.stripe.com/payments/accept-a-payment.md?ui=stripe-hosted)の実装が存在することを前提として作成されています。

このガイドでは、Afterpay を有効にする方法について手順を追って説明し、動的決済手段を使用して決済を受け付ける場合と決済手段を手動で設定する場合の違いを示します。

### 支払い方法として Afterpay を有効にする

新しい [Checkout セッション](https://docs.stripe.com/api/checkout/sessions.md)を作成する際は、以下を行う必要があります。

1. `afterpay_clearpay` を `payment_method_types` のリストに追加します。
1. すべての `line_items` で国内通貨を使用し、合計金額が Afterpay の[取引金額制限](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule)を超えないようにしてください。
1. オプションとして、`shipping_address_collection[allowed_countries]` を使用して、Checkout で配送先として指定できる国を指定します。

#### Stripe ホスト型ページ

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=afterpay_clearpay" \
  -d "shipping_address_collection[allowed_countries][0]=AU" \
  -d "shipping_address_collection[allowed_countries][1]=CA" \
  -d "shipping_address_collection[allowed_countries][2]=GB" \
  -d "shipping_address_collection[allowed_countries][3]=NZ" \
  -d "shipping_address_collection[allowed_countries][4]=US" \
  --data-urlencode "success_url=https://example.com/success"
```

#### 組み込みフォーム

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=afterpay_clearpay" \
  --data-urlencode "return_url=https://example.com/return" \
  -d "shipping_address_collection[allowed_countries][0]=AU" \
  -d "shipping_address_collection[allowed_countries][1]=CA" \
  -d "shipping_address_collection[allowed_countries][2]=GB" \
  -d "shipping_address_collection[allowed_countries][3]=NZ" \
  -d "shipping_address_collection[allowed_countries][4]=US" \
  -d ui_mode=embedded_page
```

Checkout で配送先住所を収集しない場合は、`payment_intent_data[shipping]` を使用して配送先住所を指定することもできます。そうすることで、ローンの承認率が向上します。

#### Stripe ホスト型ページ

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_intent_data[shipping][name]=Jenny Rosen" \
  -d "payment_intent_data[shipping][address][line1]=1234 Main Street" \
  -d "payment_intent_data[shipping][address][city]=San Francisco" \
  -d "payment_intent_data[shipping][address][state]=CA" \
  -d "payment_intent_data[shipping][address][country]=US" \
  -d "payment_intent_data[shipping][address][postal_code]=94111" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=afterpay_clearpay" \
  --data-urlencode "success_url=https://example.com/success"
```

#### 組み込みフォーム

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_intent_data[shipping][name]=Jenny Rosen" \
  -d "payment_intent_data[shipping][address][line1]=1234 Main Street" \
  -d "payment_intent_data[shipping][address][city]=San Francisco" \
  -d "payment_intent_data[shipping][address][state]=CA" \
  -d "payment_intent_data[shipping][address][country]=US" \
  -d "payment_intent_data[shipping][address][postal_code]=94111" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=afterpay_clearpay" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### 注文を実行する

顧客が支払いステータスページに戻ることに依存せずに、[Webhook のような方法を使用して](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks)注文の*フルフィルメント* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected)を行います。

支払いのステータスに変化があると、以下のイベントが送信されます。

| イベント名                                                                                                                  | 説明                                                                                   | 次のステップ                          |
| ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------- |
| [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed)       | 顧客が Checkout フォームを送信して、支払いのオーソリを正常に完了しました。                                           | 支払いが成功するか、失敗するまで待ちます。           |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)           | 顧客の支払いが成功しました。`PaymentIntent` は `succeeded` に移行します。                                  | 顧客が購入した商品またはサービスの発送を行います。       |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) | 顧客の支払いが拒否されたか、その他の理由で失敗しました。`PaymentIntent` のステータスは `requires_payment_method` に戻ります。 | 顧客にメールで連絡して、新たに注文するように依頼してください。 |

詳しくは、[注文のフルフィルメントの実行](https://docs.stripe.com/checkout/fulfillment.md)をご覧ください。

## 組み込みをテストする

Checkout の組み込みをテストする際は、支払い方法として Afterpay を選択して、**支払い**ボタンをクリックします。

テスト API キーを使用して Afterpay の組み込みをテストするには、リダイレクトページを表示します。リダイレクトページで支払いを認証することにより、支払い成功のケースをテストできます。PaymentIntent は `requires_action` から `succeeded` に変化します。

ユーザが認証に失敗するケースをテストするには、テスト API キーを使用してリダイレクトページを表示します。リダイレクトページで**テスト支払い失敗**をクリックします。PaymentIntent は、`requires_action` から `requires_payment_method`に変化します。

テスト環境で PaymentIntents を[手動でキャプチャ](https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment.md#manual-capture)する場合、キャプチャされていない PaymentIntent は、認証が成功してから 10 分後に自動的に期限切れになります。

## 失敗した支払い

Afterpay は、取引を受け付けるか拒否するかを決定する際に複数の要因を考慮します (買い手が Afterpay を使用している期間、顧客が返済する必要のある未払い額、現在の注文の値など)。

Afterpay による支払いは多くの決済手段よりも支払い拒否の確立が高いため、チェックアウトフローには常に `card` などの他の支払いオプションを提示する必要があります。このような場合、[PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) は解除され、[PaymentInten](https://docs.stripe.com/api/payment_intents/object.md)オブジェクトのステータスは自動的に `requires_payment_method` に変わります。

Afterpay の [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) のステータスが `requires_action` の場合、顧客は Afterpay のサイトにリダイレクトされてから 3 時間以内に支払いを完了する必要があります (拒否された支払いには適用されません)。3 時間以内にアクションが実行されなければ、[PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) の関連付けが解除され、[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) のステータスは自動的に `requires_payment_method` に移行します。

このような場合、決済フローに表示される別の支払いオプションで再試行するように顧客に通知します。

## エラーコード

一般的なエラーコードと対応する推奨アクションは以下のとおりです。

| エラーコード                                   | 推奨される対応                                                                                                                             |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Afterpay Checkout が失敗したことを示す一般的な失敗。決済の失敗エラーコードとして表示されない決済の失敗も考えられます。                                                                |
| `payment_method_provider_decline`        | Afterpay が顧客の支払いを拒否しました。次のステップとして、顧客から Afterpay に詳細を問い合わせる必要があります。                                                                  |
| `payment_intent_payment_attempt_expired` | 顧客が Afterpay の決済ページで支払いを完了しなかったため、支払いセッションの有効期限が切れました。Stripe では、決済が正常に行われなかった PaymentIntent は、最初のチェックアウト作成から 3 時間後に自動的に有効期限切れとなります。 |
| `payment_method_not_available`           | Afterpay でサービス関連のエラーが発生したため、リクエストを完了できません。後で再試行してください。                                                                              |
| `amount_too_small`                       | Afterpay の国別の[デフォルトの取引限度額](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule)以内の金額を入力してください。                |
| `amount_too_large`                       | Afterpay の国別の[デフォルトの取引限度額](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule)以内の金額を入力してください。                |

## See also

- [Afterpay の詳細](https://docs.stripe.com/payments/afterpay-clearpay.md)
- [Checkout のフルフィルメント](https://docs.stripe.com/checkout/fulfillment.md)
- [Checkout をカスタマイズする](https://docs.stripe.com/payments/checkout/customization.md)

# Checkout Sessions API

> This is a Checkout Sessions API for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment?payment-ui=elements&api-integration=checkout.

ビジネス ニーズに合った API を判断するには、[比較ガイド](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md) を参照してください。

[Payment Element](https://docs.stripe.com/payments/payment-element.md) を使用して、ウェブサイトまたはアプリケーションにカスタムの Stripe 決済フォームを埋め込み、顧客に決済手段を提供します。高度な設定とカスタマイズについては、[決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md)に関する導入ガイドをご覧ください。

## 互換性の判断

**顧客の居住地**: Australia, Canada, New Zealand, UK, US

**対応可能な通貨**: `aud, cad, nzd, gbp, usd`

**取引通貨**: `aud, cad, nzd, gbp, usd`

**支払いモード**: Yes

**セットアップモード**: No

**サブスクリプションモード**: No

Afterpay 支払いに対応するには、Checkout セッションが次の条件をすべて満たしている必要があります。

- 使用できるのは単一の項目だけです (継続的な*サブスクリプション* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis)プランには対応していません)。
- *価格* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions)は国内通貨で示す必要があります。

## サーバーを設定する [サーバー側]

Stripe の公式ライブラリを使用して、アプリケーションから API にアクセスします。

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Checkout Session を作成する [サーバー側]

[Checkout セッション](https://docs.stripe.com/api/checkout/sessions/create.md)を作成し、その [client secret](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) をフロントエンドに返すエンドポイントをサーバーに追加します。Checkout セッションは、顧客が 1 回限りの購入またはサブスクリプションの支払いを行う際のセッションを表します。Checkout セッションは作成後 24 時間で期限切れになります。

[動的な決済手段](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)を使用して、各顧客に最も適した決済手段を動的に表示してコンバージョンを最大化しましょう。Stripe ではこの方法をお勧めしています。[決済手段を手動で一覧表示](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually)することもできますが、その場合、動的決済手段は無効になります。

#### ダッシュボードで決済手段を管理する

#### TypeScript

```javascript
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1099,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});
```

#### 決済手段を手動で一覧表示する

#### TypeScript

```javascript
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1099,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    payment_method_types: ['afterpay_clearpay'],
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});
```

## フロントエンドを設定する [クライアント側]

#### HTML + JS

HTML ファイルの `head` に Stripe.js スクリプトを追加し、チェックアウトページに含めます。PCI への準拠を維持するために、常に js.stripe.com から Stripe.js を直接読み込んでください。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

最新の Stripe.js バージョンであることをご確認の上、以下のスクリプトタグ `<script src=“https://js.stripe.com/dahlia/stripe.js”></script>` を読み込んでください。詳しくは[Stripe.js バージョン管理](https://docs.stripe.com/sdks/stripejs-versioning.md)をご覧ください。

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

> Stripe では npm パッケージをご用意しており、これを使用して Stripe.js をモジュールとして読み込むことができます。[GitHub のプロジェクト](https://github.com/stripe/stripe-js)をご覧ください。バージョン [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) 以降が必要です。

stripe.js の初期化

```js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
  '<<YOUR_PUBLISHABLE_KEY>>',
);
```

#### React

npm のパブリックレジストリーから [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) と [Stripe.js ローダー](https://www.npmjs.com/package/@stripe/stripe-js)をインストールします。バージョン 5.0.0 以上の React Stripe.js と、バージョン 8.0.0 以上の Stripe.js ローダーが必要です。

```bash
npm install --save @stripe/react-stripe-js@^5.0.0 @stripe/stripe-js@^8.0.0
```

公開可能キーを使用してフロントエンドで `stripe` インスタンスを初期化します。

```javascript
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");
```

## Checkout を初期化する [クライアント側]

#### HTML + JS

[initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init) を呼び出し、`clientSecret` を渡します。

`initCheckoutElementsSdk` は、Checkout Session のデータとそれを更新するメソッドを含む [Checkout](https://docs.stripe.com/js/custom_checkout) オブジェクトを返します。

[actions.getSession()](https://docs.stripe.com/js/custom_checkout/session) から `total` と `lineItems` を読み取り、UI に表示します。これにより、コードの変更を最小限に抑えて新機能を有効にできます。たとえば、[手動通貨価格](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md)を追加する場合、`total` を表示すれば UI を変更する必要はありません。

```html
<div id="checkout-container"></div>
```

```javascript
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');

  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
```

#### React

[CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) コンポーネントでアプリケーションをラップし、`clientSecret` と `stripe` インスタンスを渡します。

```jsx
import React from 'react';
import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const App = () => {
  return (
    <CheckoutElementsProvider
      stripe={stripe}options={{clientSecret}}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

`useCheckout()` フックを使用して、CheckoutForm コンポーネントの [Checkout](https://docs.stripe.com/js/custom_checkout) オブジェクトにアクセスします。`Checkout` オブジェクトには、決済セッションからのデータと、それを更新するメソッドが含まれます。

`Checkout` オブジェクトから `lineItems` と `lineItems` を読み取り、UI に表示します。これにより、コードの変更を最小限に抑えて機能を有効にできます。たとえば、[手動通貨価格](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md)を追加する場合、`total` を表示すると UI を変更する必要はありません。

```jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js/checkout';

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

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>{JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
    </form>
  );
};
```

## 顧客のメールアドレスを収集する [クライアント側]

#### HTML + JS

Checkout Session を完了するには、有効な顧客のメールアドレスを指定する必要があります。

これらの手順では、メールアドレス入力欄を作成し、`Checkout` オブジェクトの [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) を使用します。

または、以下を実行してください。

- Checkout Session の作成時に、[customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email)、[customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (顧客設定の `Account` オブジェクトとして表される顧客の場合)、または [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (`Customer` オブジェクトとして表される顧客の場合) を渡します。Stripe はこの方法で提供されたメールアドレスを検証します。
- [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm) で既に検証済みのメールアドレスを渡します。

```html
<input type="text" id="email" />
<div id="email-errors"></div>
```

```javascript
const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

Checkout Session を完了するには、有効な顧客のメールアドレスを指定する必要があります。

これらの手順では、メールアドレス入力欄を作成し、`Checkout` オブジェクトの [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) を使用します。

または、以下を実行してください。

- Checkout Session の作成時に、[customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email)、[customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (顧客設定の `Account` オブジェクトとして表される顧客の場合)、または [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (`Customer` オブジェクトとして表される顧客の場合) を渡します。Stripe はこの方法で提供されたメールアドレスを検証します。
- [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm) で既に検証済みのメールアドレスを渡します。

```jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js/checkout';

const EmailInput = () => {
  const checkoutState = useCheckout();
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState(null);

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => {
      if (result.type === 'error') {
        setError(result.error);
      }
    })
  };

  const handleChange = (e) => {
    setError(null);
    setEmail(e.target.value);
  };

  return (
    <div>
      <label htmlFor="checkout-form-email">Email</label>
      <input
        id="checkout-form-email"
        type="email"
        value={email}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {error && <div>{error.message}</div>}
    </div>
  );
};

export default EmailInput;
```

## 支払い情報を収集する [クライアント側]

[Payment Element](https://docs.stripe.com/payments/payment-element.md) を使用して、クライアントで支払い情報を収集します。Payment Element は、さまざまな決済手段で支払い情報の収集を簡略化する事前構築済みの UI コンポーネントです。

Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。

iframe を使用して Apple Pay または Google Pay を受け付けたい場合は、iframe の [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) 属性を `"payment *"` と等しく設定する必要があります。

構築済みのシステムを機能させるには、決済ページのアドレスの先頭を `http://` ではなく `https://` にする必要があります。HTTPS を使用しなくてもシステムをテストできますが、本番環境で決済を受け付ける準備が整ったら、必ず、HTTPS を[有効](https://docs.stripe.com/security/guide.md#tls)にしてください。

#### HTML + JS

まず、コンテナーの DOM 要素を作成して、[Payment Element](https://docs.stripe.com/payments/payment-element.md) をマウントします。次に、[checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) を使用して `Payment Element` のインスタンスを作成し、[element.mount](https://docs.stripe.com/js/element/mount) を呼び出してマウントし、CSS セレクターまたはコンテナーの DOM 要素を指定します。

```html
<div id="payment-element"></div>
```

```javascript
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');
```

対応しているオプションについては、[Stripe.js のドキュメント](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) をご覧ください。

フロントエンドで Checkout を初期化するときに [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) を渡すことで、すべての Elements の[デザインをカスタマイズ](https://docs.stripe.com/payments/checkout/customization/appearance.md)できるようになります。

#### React

[CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) 内に [Payment Element](https://docs.stripe.com/payments/payment-element.md) コンポーネントをマウントします。

```jsx
import React from 'react';import {PaymentElement, useCheckout} from '@stripe/react-stripe-js/checkout';

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

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>

      {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
<PaymentElement options={{layout: 'accordion'}}/>
    </form>
  );
};

export default CheckoutForm;
```

対応しているオプションについては、[Stripe.js のドキュメント](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) をご覧ください。

[elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) を [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) に渡すことで、すべての Elements の[外観をカスタマイズ](https://docs.stripe.com/payments/checkout/customization/appearance.md)できます。

## 決済を送信する [クライアント側]

#### HTML + JS

`Checkout` インスタンスから [確定](https://docs.stripe.com/js/custom_checkout/confirm) を呼び出す**支払う** ボタンをレンダリングして、決済を送信します。

```html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
```

```js
const checkout = stripe.initCheckoutElementsSdk({clientSecret});

checkout.on('change', (session) => {
  document.getElementById('pay-button').disabled = !session.canConfirm;
});

const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

[useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) から [confirm](https://docs.stripe.com/js/custom_checkout/confirm) を呼び出して決済を送信する **Pay** ボタンをレンダリングします。

```jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js/checkout';

const PayButton = () => {
  const checkoutState = useCheckout();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  if (checkoutState.type !== "success") {
    return null;
  }

  const handleClick = () => {
    setLoading(true);checkoutState.checkout.confirm().then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={!checkoutState.checkout.canConfirm || loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;
```

## 構築したシステムをテストする

実装内容をテストするには、決済手段を選択して**支払う**をタップします。*サンドボックス* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes)では、テスト決済ページにリダイレクトされ、そこで決済を承認または拒否できます。

本番環境では、**支払う**をタップすると、Afterpay のウェブサイトにリダイレクトされます。Afterpay で支払いを承認または拒否するオプションはありません。


# Payment Intents API

> This is a Payment Intents API for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment?payment-ui=elements&api-integration=paymentintents.

ビジネス ニーズに合った API を判断するには、[比較ガイド](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md) を参照してください。

[Payment Element](https://docs.stripe.com/payments/payment-element.md) を使用して、ウェブサイトまたはアプリケーションにカスタムの Stripe 決済フォームを埋め込み、顧客に決済手段を提供します。高度な設定とカスタマイズについては、[決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md)に関する導入ガイドをご覧ください。

## Stripe を設定する [サーバー側]

開始するには、[Stripe アカウントを作成](https://dashboard.stripe.com/register)を作成します。

アプリケーションから Stripe APIにアクセスするには、公式ライブラリを使用してください。

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## 支払い情報を収集する [クライアント側]

Payment Element を使用してクライアントで支払い詳細を収集する準備ができました。Payment Element は事前構築された UI コンポーネントであり、多様な支払い方法の支払い詳細の収集を容易にします。

Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。決済手段によっては、支払い確認のために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。

実装を機能させるには、決済ページのアドレスの先頭を `http://` ではなく `https://` にする必要があります。HTTPS を使用せずに実装をテストすることはできますが、本番環境で支払いを受け付ける準備が整ったら、忘れずに[有効にしてください](https://docs.stripe.com/security/guide.md#tls)。

#### HTML + JS

### Stripe.js を設定する

Payment Element は Stripe.js の機能として自動的に使用できるようになります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの `head` にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI 準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

購入ページで次の JavaScript を使用して、Stripe のインスタンスを作成します。

```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');
```

### Payment Element を決済ページに追加する

決済ページに Payment Element を配置する場所が必要です。決済フォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。

```html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
```

#### ダッシュボードから決済手段を管理する

上記のフォームが読み込まれたら、`mode`、`amount`、`currency` を指定して Elements インスタンスを作成します。これらの値によって、顧客に表示される決済手段が決まります。フォームで新しい決済手段を指定するには、必ず[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で有効にしてください。

```javascript
const options = {mode:'payment',
  amount:1099,
  currency: 'usd',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```

#### 支払い方法を手動で一覧表示する

使用可能にしたい決済方法を手動でリストするには、それぞれを `paymentMethodTypes` に追加してください。

次に、Payment Element のインスタンスを作成し、コンテナーの DOM ノードにマウントします。

```javascript
const options = {mode:'payment',
  amount:1099,
  currency: 'usd',
  paymentMethodTypes: ['afterpay_clearpay'],
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```

#### React

### Stripe.js を設定する

npm パブリックレジストリーから [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) と [Stripe.js ローダー](https://www.npmjs.com/package/@stripe/stripe-js)をインストールします。

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

### Elements プロバイダーを決済ページに追加して設定する

Payment Element コンポーネントを使用するには、購入ページコンポーネントを [Elements プロバイダー](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)でラップします。公開可能キーを使用して `loadStripe` を呼び出し、返された `Promise` を `Elements` プロバイダーに渡します。

#### ダッシュボードから決済手段を管理する

`Elements` プロバイダーは、`mode`、`amount`、`currency` も受け入れます。これらの値によって、顧客に表示される決済手段が決まります。フォームで新しい決済手段を指定するには、[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で有効にしてください。

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

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

function App() {
  const options = {mode:'payment',
    amount:1099,
    currency: 'usd',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

ReactDOM.render(<App />, document.getElementById('root'));
```

#### 支払い方法を手動で一覧表示する

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

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

function App() {
  const options = {mode:'payment',
    amount:1099,
    currency: 'usd',
    paymentMethodTypes: ['afterpay_clearpay'],
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

ReactDOM.render(<App />, document.getElementById('root'));
```

### Payment Element コンポーネントを追加

`PaymentElement` コンポーネントを使用して、フォームを構築します。

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

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

export default CheckoutForm;
```

`Elements` プロバイダーを作成する際に [Appearance (デザイン) オブジェクト](https://docs.stripe.com/elements/appearance-api.md) を `options` に渡すことで、サイトのデザインに合わせて Payment Element をカスタマイズできます。

### 住所を収集

デフォルトでは、Payment Element は必要な請求住所の詳細のみを収集します。[税金の計算](https://docs.stripe.com/api/tax/calculations/create.md)、配送先情報を入力するなどの一部の動作では、顧客の完全な住所が必要です。次のように対応できます。

- [Address Element](https://docs.stripe.com/elements/address-element.md) を使用して、オートコンプリートとローカリゼーションの機能を利用して、顧客の完全な住所を収集します。これにより、最も正確な税金計算が可能になります。
- 独自のカスタムフォームを使用して住所の詳細を収集する。

## PaymentIntent を作成する [サーバー側]

> #### 支払い確定の直前にカスタムのビジネスロジックを実行する
> 
> 支払いの確定ガイドの[ステップ 5](https://docs.stripe.com/payments/finalize-payments-on-the-server.md?platform=web&type=payment#submit-payment) に移動して、支払い確定の直前にカスタムのビジネスロジックを実行します。または、以下のステップに従って既存のシステムをシンプルにします。ここでは、クライアント側で `stripe.confirmPayment` を使用して、支払いの確定と次のアクションの処理の両方を行います。

#### ダッシュボードから決済手段を管理する

顧客が支払いフォームを送信したら、*PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) を使用して確認と支払いのプロセスを適切に管理します。`amount` と `currency` を指定してサーバー側で PaymentIntent を作成します。悪意のある顧客が独自の価格を選択できないように、請求金額はクライアント側ではなく、常にサーバー側 (信頼できる環境) で決定してください。

`PaymentIntent` には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。Stripe.js がこの値を使用して決済プロセスを安全に完了できるように、この値をクライアントに返します。

#### Accounts v2

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent' do
  intent = client.v1.payment_intents.create({
    # To allow saving and retrieving payment methods, provide the customer's Account ID.
    customer_account: "{{CUSTOMER_ACCOUNT_ID}}",
    amount: 1099,
    currency: 'usd',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Customers v1

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent' do
  intent = client.v1.payment_intents.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 1099,
    currency: 'usd',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### 支払い方法を手動で一覧表示する

顧客が決済フォームを送信したら、*PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) を使用して確認と決済のプロセスがスムーズに進むようにします。`amount`、`currency`、および `payment_method_types` で 1 つ以上の決済手段を指定して、サーバーで PaymentIntent を作成します。悪意のある顧客が価格を操作できないように、請求金額はクライアント側ではなく、常にサーバー側 (信頼できる環境) で決定してください。

PaymentIntent には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。 この値をクライアントに返し、Stripe.js がこれを使用して支払いプロセスを安全に完了できるようにします。

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent' do
  intent = client.v1.payment_intents.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 1099,
    currency: 'usd',
    payment_method_types: ['afterpay_clearpay'],
  })
  {client_secret: intent.client_secret}.to_json
end
```

## Stripe に支払いを送信する [クライアント側]

[stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を使用して、Payment Element の詳細を使って支払いを完了します。

この関数に [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を指定して、支払い完了後に Stripe がユーザーをリダイレクトする場所を示します。ユーザーは、最初に銀行の認証ページなどの中間サイトにリダイレクトされてから、`return_url` にリダイレクトされる場合があります。カード支払いでは、支払いが成功するとすぐに `return_url` にリダイレクトされます。

支払い完了後にカード支払いのリダイレクトを行わない場合は、[redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) を `if_required` に設定できます。これにより、リダイレクトベースの決済手段で購入した顧客のみがリダイレクトされます。

#### HTML + JS

```javascript

const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

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

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch("/create-intent", {
    method: "POST",
  });

  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent using the details collected by the Payment Element
  const {error} = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

```

#### React

```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

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

  const handleError = (error) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

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

    if (!stripe) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    setLoading(true);

    // Trigger form validation and wallet collection
    const {error: submitError} = await elements.submit();
    if (submitError) {
      handleError(submitError);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch("/create-intent", {
      method: "POST",
    });

    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent using the details collected by the Payment Element
    const {error} = await stripe.confirmPayment({
      elements,
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      handleError(error);
    } else {
      // Your customer is redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer is redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe || loading}>
        Submit Payment
      </button>
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
}
```

## Optional: 支払い後のイベントを処理する

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。

## Optional: オーソリとキャプチャーを分離する

オーソリとキャプチャーを分離して支払いを今すぐ作成し、後で売上をキャプチャーできます。7 日間の期間中に支払いがキャプチャーされなかった場合でも、Stripe は PaymentIntent をキャンセルし、[payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) イベントを送信します。

支払いをキャプチャーできないことが確実な場合は、7 日間が経過するのを待つのではなく [PaymentIntent をキャンセルする](https://docs.stripe.com/refunds.md#cancel-payment)ことをお勧めします。

### オーソリのみを行うよう Stripe に指示する

オーソリとキャプチャーの分離をを指定するには、PaymentIntent の作成時に、[capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) を `manual` に設定します。このパラメーターは、顧客の Afterpay アカウントの金額のみをオーソリするよう Stripe に指示します。

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d confirm=true \
  -d currency=usd \
  -d "payment_method_types[]=afterpay_clearpay" \
  -d "payment_method_data[type]=payment_method" \
  -d capture_method=manual \
  --data-urlencode "return_url=https://www.example.com/checkout/done"
```

### 売上をキャプチャーする

オーソリが成功すると、[PaymentIntent ステータス](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status)が `requires_capture` に移行します。オーソリされた売上をキャプチャーするには、PaymentIntent [キャプチャー](https://docs.stripe.com/api/payment_intents/capture.md)リクエストを実行します。

```curl
curl -X POST https://api.stripe.com/v1/payment_intents/{PAYMENT_INTENT_ID}/capture \
  -u "<<YOUR_SECRET_KEY>>:"
```

Stripe はオーソリされた合計金額をデフォルトでキャプチャーしますが、`amount_to_capture` を合計金額またはそれ以下に指定することもできます。

### (任意)オーソリをキャンセルする

オーソリを取り消す必要がある場合は、[PaymentIntent をキャンセル](https://docs.stripe.com/api/payment_intents/cancel.md)できます。

## 構築したシステムをテストする

実装内容をテストするには、決済手段を選択して**支払う**をタップします。*サンドボックス* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes)では、テスト決済ページにリダイレクトされ、そこで決済を承認または拒否できます。

本番環境では、**支払う**をタップすると、Afterpay のウェブサイトにリダイレクトされます。Afterpay で支払いを承認または拒否するオプションはありません。

## エラーコード

次の表に、一般的なエラーコードと推奨される対応の詳細を示します。

| エラーコード                                                    | 推奨される対応                                                                                                                                                                                                                                               |
| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_invalid_currency`                         | 対応している通貨を入力してください。                                                                                                                                                                                                                                    |
| `missing_required_parameter`                              | 必須パラメーターの詳細については、エラーメッセージをご確認ください。                                                                                                                                                                                                                    |
| `payment_intent_payment_attempt_failed`                   | このコードは、PaymentIntent の [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) フィールドに表示されることがあります。エラーメッセージで、エラーの詳細な理由とエラー処理に関する提案を確認してください。                                    |
| `payment_intent_authentication_failure`                   | このコードは、PaymentIntent の[last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) フィールドに表示されることがあります。エラーメッセージで、詳細な失敗理由とエラー処理に関する推奨事項を確認してください。このエラーは、統合のテスト時に失敗を手動でトリガーした場合に発生します。 |
| `payment_intent_redirect_confirmation_without_return_url` | PaymentIntent を確定する際は、`return_url` を指定します。                                                                                                                                                                                                            |


> このセクションには*レガシー* (Technology that's no longer recommended)プロダクトについてのコンテンツが含まれています。最新の導入パスについては、代わりに[決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md)のガイドを使用する必要があります。Stripe はこのプロダクトを引き続きサポートしていますが、プロダクトが非推奨になった場合にはサポートが終了する可能性があります。

Stripe ユーザは、[Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) (サポートされている方法を使用して支払いを作成するための単一の導入パス) を使用して、以下の国の顧客から [Afterpay](https://www.afterpay.com/) による支払いを受け付けることができます。

- オーストラリア
- カナダ
- ニュージーランド
- イギリス
- アメリカ

Afterpay は、[使用が 1 回限り](https://docs.stripe.com/payments/payment-methods.md#usage)の[即時通知型](https://docs.stripe.com/payments/payment-methods.md#payment-notification)の決済手段であり、顧客は支払いの[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)を求められます。顧客は Afterpay のサイトにリダイレクトされ、そこで分割払いプランの規約に同意します。顧客が規約に同意すると、売上が保証され、お客様の Stripe アカウントに送金されます。顧客は一定の期間で直接 Afterpay に返済します。

> 連携を始める前に、[決済手段の設定](https://dashboard.stripe.com/settings/payment_methods)に移動して、アカウントが Afterpay の対象であることを確認してください。

## Stripe を設定する [サーバ側]

まず、Stripe アカウントが必要です。[今すぐ登録](https://dashboard.stripe.com/register)してください。

アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## PaymentIntent を作成する [サーバ側]

[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルをステージごとに追跡します。まず、サーバーで `PaymentIntent` を作成し、回収する金額と通貨を指定します。[Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) を使用した組み込みをすでにお持ちの場合には、`afterpay_clearpay` を `PaymentIntent` の[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。

決済手段は[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で管理できます。Stripeは取引額、通貨、決済フローなどの要素に基づいて、適切な決済手段が返されるように処理します。以下の例では、[automatic_payment_methods](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-automatic_payment_methods-enabled) 属性を使用していますが、[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)を使用して `afterpay_clearpay` を一覧表示することができます。最新バージョンのAPIでは `automatic_payment_methods` パラメーターの指定は必須ではありません。この機能はデフォルトで有効になっています。いずれのオプションを選択する場合でも、必ず[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で Afterpay Clearpay を有効にしてください。

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d "shipping[name]=Jenny Rosen" \
  -d "shipping[address][line1]=1234 Main Street" \
  -d "shipping[address][city]=San Francisco" \
  -d "shipping[address][state]=CA" \
  -d "shipping[address][country]=US" \
  -d "shipping[address][postal_code]=94111"
```

### client secret を取得する

PaymentIntent には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

#### 1 ページのアプリケーション

ブラウザーの `fetch` 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

その後、クライアント側で JavaScript を使用して client secret を取得します。

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### サーバ側のレンダリング

サーバーからクライアントに client secret を渡します。この方法は、アプリケーションがブラウザーへの送信前に静的なコンテンツをサーバーで生成する場合に最適です。

決済フォームに [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を追加します。サーバー側のコードで、PaymentIntent から client secret を取得します。

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

### その他の詳細情報による決済成功率の向上

オプションで、[配送](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping)先の詳細を渡して購入完了率を向上させます。この導入では、顧客が決済方法を選択した後にクライアントから配送先の詳細を渡します。

配送先住所を送信する場合は、`line1`、`city`、`state`、`postal_code`、`country`の有効な値を含める必要があります。

### その他の支払い方法オプション

`PaymentIntent`の[決済手段オプション](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-afterpay_clearpay-reference)で、決済の内部注文IDを設定するオプションの`reference`パラメーターを指定できます。これは通常、企業や消費者のいずれにも表示されませんが、Afterpayの内部サポートチームは、手動サポートリクエスト中にこのパラメーターにアクセスできます。IDは128文字以内で、文字、数字、アンダースコア、バックスラッシュ、ダッシュのみを使用できます。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \
  // Shipping address is optional but recommended to pass in.
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"="CA" \
  -d "shipping[address][country]"="US" \
  -d "shipping[address][postal_code]"=94111 \-d "payment_method_options[afterpay_clearpay][reference]"="order_123"
```

## Stripe に支払いを送金する [クライアント側]

このステップでは、[Stripe.js](https://docs.stripe.com/payments/elements.md) を使用してクライアントで Afterpay の支払いを完了します。

### Stripe.js を設定する

顧客が Afterpay での支払いをクリックしたときは、Stripe.js を使用してその支払いを Stripe に送信することをお勧めします。Stripe.js は、支払いフローを構築するための Stripe の基本的な JavaScript ライブラリです。これにより、以下で説明するリダイレクトなどの複雑な処理が自動的に行われ、今後、組み込みを他の支払い方法に簡単に拡張できます。Stripe.js スクリプトを HTML ファイルの先頭に追加することで、決済ページにこのスクリプトを含めます。

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

決済ページで以下の JavaScript を使用して、Stripe.js のインスタンスを作成します。

```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
var stripe = Stripe(
  '<<YOUR_PUBLISHABLE_KEY>>',
);
```

PaymentIntent オブジェクト全体をクライアントに送信するのではなく、[ステップ 2](https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment.md#web-create-payment-intent) で得た [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を使用します。これは、Stripe API リクエストを認証する API キーとは異なります。

client secret は支払いを確定できるため、慎重に取り扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。

[stripe.confirmAfterpayClearpayPayment](https://docs.stripe.com/js/payment_intents/confirm_afterpay_clearpay_payment) を使用して、お客様のページからのリダイレクトを処理して支払いを完了します。この機能に [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を追加し、ユーザが Afterpay のウェブサイトまたはモバイルアプリで支払いを完了した後に Stripe がユーザをリダイレクトする場所を指示します。

```javascript
// Redirects away from the client
const {error} = await stripe.confirmAfterpayClearpayPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      billing_details: {
        email: 'jenny@rosen.com',
        name: 'Jenny Rosen',
        address: {
          line1: '1234 Main Street',
          city: 'San Francisco',
          state: 'CA',
          country: 'US',
          postal_code: '94111',
        },
      },
    },
    return_url: 'https://example.com/checkout/complete',
  }
);
if (error) {
  // Inform the customer that there was an error.
}
```

顧客が支払いを送信すると、Stripe は顧客を `return_url` にリダイレクトし、以下の URL クエリーパラメーターを含めます。返品ページでは、これらを使用して PaymentIntent のステータスを取得し、顧客に支払いステータスを表示できます。

`return_url` を指定する際に、返品ページで使用する独自のクエリパラメーターを追加することもできます。

| パラメーター                         | 説明                                                                                                                                                                                                                                                                                                             |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent`               | `PaymentIntent` の一意の識別子。                                                                                                                                                                                                                                                                                       |
| `payment_intent_client_secret` | `PaymentIntent` オブジェクトの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret)。サブスクリプションの実装の場合、この client_secret は [`confirmation_secret`](https://docs.stripe.com/api/invoices/object.md#invoice_object-confirmation_secret) を通じて `Invoice` オブジェクトでも公開されます |

顧客が自社のサイトにリダイレクトされたら、`payment_intent_client_secret` を使用して PaymentIntent をクエリし、顧客に取引ステータスを表示できます。

## Optional: PaymentIntent にラインアイテムを追加する

オプションで項目データを受け入れて、Afterpay により多くのリスクシグナルを提供できます。この機能は現在プライベートベータです。アクセスをリクエストする場合は、[Stripe サポート](https://support.stripe.com)のフォームからお問い合わせください。

## Optional: オーソリとキャプチャの分離

[カード支払いでのオーソリとキャプチャーの分離](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md)とは異なり、Afterpay ではオーソリ時点で分割払いの初回の金額を顧客に請求します。その後、オーソリから最長 13 日間以内であれば、残りの支払いをキャプチャーすることができます。この期間に支払いがキャプチャーされない場合、初回分の分割払いが顧客に返金され、それ以降の分割払いは請求されません。この場合、Stripe は PaymentIntent もキャンセルし、[payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) イベントを送信します。

支払いをキャプチャーできないと分かっている場合は、13 日間が経過するのを待つのではなく [PaymentIntent をキャンセル](https://docs.stripe.com/refunds.md#cancel-payment)することをお勧めします。先を見越して PaymentIntent をキャンセルすると、すぐに最初の分割払いが顧客に返金され、顧客の明細書上の支払いに関して混乱が生じるのを避けられます。

### オーソリのみ行うように Stripe に指示する

オーソリとキャプチャーを分離することを指定するには、PaymentIntent の作成時に、[capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) を `manual` に設定します。このパラメーターは、顧客の Afterpay アカウントの金額のみをオーソリするよう Stripe に指示します。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \
  -d "capture_method"="manual" \
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"="CA" \
  -d "shipping[address][country]"="US" \
  -d "shipping[address][postal_code]"=94111
```

オーソリが成功すると、Stripe は [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated) イベントを送信します。この機能については、[イベントガイド](https://docs.stripe.com/api/events.md)でご確認ください。

### 売上をキャプチャする

オーソリが成功すると、PaymentIntent の [status](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) が `requires_capture` に移行します。オーソリされた売上をキャプチャーするために、PaymentIntent [capture](https://docs.stripe.com/api/payment_intents/capture.md) リクエストを実行します。デフォルトでは、オーソリされた合計金額がキャプチャーされます。これを超える金額のキャプチャーはできませが、これ未満でしたらキャプチャーできます。

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount_to_capture=750
```

### (任意)オーソリをキャンセルする

オーソリを取り消す必要がある場合は、[PaymentIntent をキャンセル](https://docs.stripe.com/refunds.md#cancel-payment)できます。

## Optional: Afterpay のリダイレクトを手動で処理する

クライアント側で `confirmAfterpayClearpayPayment` を使用して Afterpay のリダイレクトおよび支払いを処理するには、Stripe.js を使用することをお勧めします。Stripe.js を使用すると、他の決済手段にも対応するように実装を拡張できます。ただし、以下の手順に従って、お客様のサーバーに顧客を手動でリダイレクトすることもできます。

- タイプが `afterpay_clearpay` の [PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) を作成し、確定します。Afterpay で必要な `payment_method_data.billing_details` プロパティを指定する必要があります。`payment_intent.shipping` はオプションですが、認証率を上げるために推奨されます。`payment_method_data` を指定すると、Stripe によって *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) が作成され、この PaymentIntent ですぐに使用されます。

  また、顧客が支払いを完了した後にリダイレクトされる先の URL を `return_url` フィールドに指定する必要があります。独自のクエリパラメータをこの URL に指定することもできます。これらのパラメータは、リダイレクトフロー完了時の最終的な URL に含められます。

  #### curl

  ```bash
  curl https://api.stripe.com/v1/payment_intents \
    -u <<YOUR_SECRET_KEY>>: \
    -d "amount"=1099 \
    -d "currency"="usd" \
    -d "confirm"="true" \
    -d "payment_method_types[]"="afterpay_clearpay" \
    -d "shipping[name]"="Jenny Rosen" \
    -d "shipping[address][line1]"="1234 Main Street" \
    -d "shipping[address][city]"="San Francisco" \
    -d "shipping[address][state]"="CA" \
    -d "shipping[address][country]"="US" \
    -d "shipping[address][postal_code]"=94111 \
    -d "payment_method_data[billing_details][name]"="Jenny Rosen" \
    -d "payment_method_data[billing_details][email]"="jenny@example.com" \
    -d "payment_method_data[billing_details][address][line1]"="1234 Main Street" \
    -d "payment_method_data[billing_details][address][city]"="San Francisco" \
    -d "payment_method_data[billing_details][address][state]"="CA" \
    -d "payment_method_data[billing_details][address][country]"="US" \
    -d "payment_method_data[billing_details][address][postal_code]"=94111 \
    -d "payment_method_data[type]"="afterpay_clearpay" \
    -d "return_url"="https://example.com/checkout/complete"
  ```

  作成される `PaymentIntent` のステータスは `requires_action` であり、`next_action` のタイプは `redirect_to_url` です。

  #### Json

  ```json
  {"status": "requires_action",
    "next_action": {
      "type": "redirect_to_url",
      "redirect_to_url": {
        "url": "https://hooks.stripe.com/...",
        "return_url": "https://example.com/checkout/complete"
      }
    },
    "id": "pi_1G1sgdKi6xqXeNtkldRRE6HT",
    "object": "payment_intent",
    "amount": 1099,
    "client_secret": "pi_1G1sgdKi6xqXeNtkldRRE6HT_secret_h9B56ObhTN72fQiBAuzcVPb2E",
    "confirmation_method": "automatic",
    "created": 1579259303,
    "currency": "usd",
    "livemode": true,
    "charges": {
      "data": [],
      "object": "list",
      "has_more": false,
      "url": "/v1/charges?payment_intent=pi_1G1sgdKi6xqXeNtkldRRE6HT"
    },
    "payment_method_options": {
      "afterpay_clearpay": {}
    },
    "payment_method_types": [
      "afterpay_clearpay"
    ]
  }
  ```

- `next_action.redirect_to_url.url` プロパティで指定した URL に顧客をリダイレクトします。ここに示すコード例はおおまかなものであり、リダイレクト方法は、ご使用のウェブフレームワークによって異なる場合があります。

  #### Ruby

  ```ruby
  if payment_intent.status == 'requires_action' && payment_intent.next_action.type == 'redirect_to_url'
    url = payment_intent.next_action.redirect_to_url.url
    redirect(url)
  end
  ```

決済プロセスを完了した顧客は、ステップ 1 で設定した `return_url` に送られます。`payment_intent` と `payment_intent_client_secret` の URL クエリパラメーターが含まれています。上記のように独自のクエリパラメーターを渡すこともできます。

支払いのステータスを確認するには、[Webhook を利用](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks)することをお勧めします。

## Optional: 支払い後のイベントを処理する

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。

## Optional: Afterpay の組み込みをテストする

テスト API キーを使用して Afterpay の組み込みをテストするには、リダイレクトページを表示します。リダイレクトページで支払いを認証することにより、支払い成功のケースをテストできます。PaymentIntent は `requires_action` から `succeeded` に変化します。

ユーザが認証に失敗するケースをテストするには、テスト API キーを使用してリダイレクトページを表示します。リダイレクトページで**テスト支払い失敗**をクリックします。PaymentIntent は、`requires_action` から `requires_payment_method`に変化します。

テスト環境で PaymentIntents を[手動でキャプチャ](https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment.md#manual-capture)する場合、キャプチャされていない PaymentIntent は、認証が成功してから 10 分後に自動的に期限切れになります。

## Optional: ウェブサイトに支払い方法のメッセージを表示する

[Payment Method Messaging Element](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging) は、顧客が購入時に商品、カート、支払いの各ページから、利用できる後払いの決済オプションを直接確認できるようにする、埋め込み可能な UI コンポーネントです。

ウェブサイトに Payment Method Messaging Element を追加するには、[決済手段のメッセージを表示する](https://docs.stripe.com/elements/payment-method-messaging.md)をご覧ください。

## 失敗した支払い

Afterpay は、取引を受け付けるか拒否するかを決定する際に複数の要因を考慮します (買い手が Afterpay を使用している期間、顧客が返済する必要のある未払い額、現在の注文の値など)。

Afterpay による支払いは多くの決済手段よりも支払い拒否の確立が高いため、チェックアウトフローには常に `card` などの他の支払いオプションを提示する必要があります。このような場合、[PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) は解除され、[PaymentInten](https://docs.stripe.com/api/payment_intents/object.md)オブジェクトのステータスは自動的に `requires_payment_method` に変わります。

Afterpay の [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) のステータスが `requires_action` の場合、顧客は Afterpay のサイトにリダイレクトされてから 3 時間以内に支払いを完了する必要があります (拒否された支払いには適用されません)。3 時間以内にアクションが実行されなければ、[PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) の関連付けが解除され、[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) のステータスは自動的に `requires_payment_method` に移行します。

このような場合、決済フローに表示される別の支払いオプションで再試行するように顧客に通知します。

## エラーコード

一般的なエラーコードと対応する推奨アクションは以下のとおりです。

| エラーコード                                   | 推奨される対応                                                                                                                             |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Afterpay Checkout が失敗したことを示す一般的な失敗。決済の失敗エラーコードとして表示されない決済の失敗も考えられます。                                                                |
| `payment_method_provider_decline`        | Afterpay が顧客の支払いを拒否しました。次のステップとして、顧客から Afterpay に詳細を問い合わせる必要があります。                                                                  |
| `payment_intent_payment_attempt_expired` | 顧客が Afterpay の決済ページで支払いを完了しなかったため、支払いセッションの有効期限が切れました。Stripe では、決済が正常に行われなかった PaymentIntent は、最初のチェックアウト作成から 3 時間後に自動的に有効期限切れとなります。 |
| `payment_method_not_available`           | Afterpay でサービス関連のエラーが発生したため、リクエストを完了できません。後で再試行してください。                                                                              |
| `amount_too_small`                       | Afterpay の国別の[デフォルトの取引限度額](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule)以内の金額を入力してください。                |
| `amount_too_large`                       | Afterpay の国別の[デフォルトの取引限度額](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule)以内の金額を入力してください。                |

# iOS

> This is a iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment?payment-ui=mobile&platform=ios.

アプリで Afterpay を受け付けるには、顧客が支払いを認証するための Webview を表示します。その後、顧客はアプリに戻り、お客様は支払いが成功したか失敗したかをすぐに*確認* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects)できます。

> 連携を始める前に、[決済手段の設定](https://dashboard.stripe.com/settings/payment_methods)に移動して、アカウントが Afterpay の対象であることを確認してください。

## Stripe を設定する [サーバ側] [クライアント側]

まず、Stripe アカウントが必要です。[今すぐ登録](https://dashboard.stripe.com/register)してください。

### サーバ側

この組み込みには、サーバ上に Stripe API と通信するエンドポイントが必要です。サーバから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

### クライアント側

[Stripe iOS SDK](https://github.com/stripe/stripe-ios) はオープンソースです。[詳細なドキュメントが提供されており](https://stripe.dev/stripe-ios/index.html)、iOS 13 以降をサポートするアプリと互換性があります。

#### Swift Package Manager

SDK をインストールするには、以下のステップに従います。

1. Xcode で、**File (ファイル)** > **Add Package Dependencies… (パッケージ依存関係を追加)** を選択し、リポジトリー URL として `https://github.com/stripe/stripe-ios-spm` を入力します。
1. [リリースページ](https://github.com/stripe/stripe-ios/releases)から最新のバージョン番号を選択します。
1. **StripePaymentsUI** 製品を[アプリのターゲット](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app)に追加します。

#### CocoaPods

1. まだインストールしていない場合は、[CocoaPods](https://guides.cocoapods.org/using/getting-started.html) の最新バージョンをインストールします。
1. 既存の [Podfile](https://guides.cocoapods.org/syntax/podfile.html) がない場合は、以下のコマンドを実行して作成します。
   ```bash
   pod init
   ```
1. この行を `Podfile` に追加します。
   ```podfile
   pod 'StripePaymentsUI'
   ```
1. 以下のコマンドを実行します。
   ```bash
   pod install
   ```
1. これ以降は、Xcode でプロジェクトを開く際に、`.xcodeproj` ファイルではなく、必ず `.xcworkspace` ファイルを使用するということを忘れないでください。
1. 今後、SDK の最新バージョンに更新するには、以下を実行します。
   ```bash
   pod update StripePaymentsUI
   ```

#### Carthage

1. まだインストールしていない場合は、[Carthage](https://github.com/Carthage/Carthage#installing-carthage) の最新バージョンをインストールします。
1. この行を `Cartfile` に追加します。
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. [Carthage のインストール手順](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos)に従います。必ず、[こちら](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking)にリストされている必要なフレームワークのすべてを埋め込んでください。
1. 今後、SDK の最新バージョンに更新するには、以下のコマンドを実行します。
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### 手動のフレームワーク

1. Stripe の [GitHub リリースページ](https://github.com/stripe/stripe-ios/releases/latest)に移動して、**Stripe.xcframework.zip** をダウンロードして解凍します。
1. **StripePaymentsUI.xcframework** を、Xcode プロジェクトの **General (一般) ** 設定の **Embedded Binaries (埋め込みバイナリー)** セクションにドラッグします。**Copy items if needed (必要に応じてアイテムをコピーする)** を必ず選択してください。
1. [こちら](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking)にリストされている必要なフレームワークのすべてに対して、ステップ 2 を繰り返します。
1. 今後、Stripe の SDK の最新バージョンに更新するには、ステップ 1 から 3 を繰り返します。

> SDK の最新リリースおよび過去バージョンの詳細については、GitHub の [Releases (リリース)](https://github.com/stripe/stripe-ios/releases) ページをご覧ください。リポジトリの[リリースをウォッチ](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository)して、新しいリリースの公開時に通知を受け取ることも可能です。

アプリの起動時に Stripe [公開可能キー](https://dashboard.stripe.com/test/apikeys)を使用して SDK を設定します。これにより、アプリが Stripe API にリクエストを送信できるようになります。

#### Swift

```swift
import UIKitimportStripePaymentsUI

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<<YOUR_PUBLISHABLE_KEY>>"
        // do any other necessary launch configuration
        return true
    }
}
```

> テストおよび開発時には[テストキー](https://docs.stripe.com/keys.md#obtain-api-keys)を使用し、アプリの公開時には[本番環境](https://docs.stripe.com/keys.md#test-live-modes)キーを使用します。

## PaymentIntent を作成する [サーバ側] [クライアント側]

[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルをステージごとに追跡します。

### サーバ側

まず、サーバーで `PaymentIntent` を作成し、回収する金額と通貨を指定します。[Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) を使用した組み込みをすでにお持ちの場合には、`afterpay_clearpay` を `PaymentIntent` の[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay"
```

### その他の支払い方法オプション

`PaymentIntent`の[決済手段オプション](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-afterpay_clearpay-reference)で、決済の内部注文IDを設定するオプションの`reference`パラメーターを指定できます。これは通常、企業や消費者のいずれにも表示されませんが、Afterpayの内部サポートチームは、手動サポートリクエスト中にこのパラメーターにアクセスできます。IDは128文字以内で、文字、数字、アンダースコア、バックスラッシュ、ダッシュのみを使用できます。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \-d "payment_method_options[afterpay_clearpay][reference]"="order_123"
```

### クライアント側

返される PaymentIntent には *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれ、これを使用することでクライアント側は、PaymentIntent オブジェクト全体を渡すことなく安全に決済プロセスを完了できます。クライアントで、サーバの PaymentIntent をリクエストし、その client secret を保存します。

#### Swift

```swift
import UIKit
import StripePayments

class CheckoutViewController: UIViewController {
  var paymentIntentClientSecret: String?

  func startCheckout() {
      // Request a PaymentIntent from your server and store its client secret
  }
}
```

## 支払い方法の詳細を収集する [クライアント側]

Afterpay で支払いを成功させるには請求先情報が提示されている必要があります。アプリで、必要な請求先情報を顧客から収集します。

- 氏名 (姓と名)
- メールアドレス
- 請求先住所

これらの詳細を使用して、[STPPaymentMethodParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentMethodParams.html) オブジェクトを作成します。

また、配送先情報は必須ではありませんが、認証率の向上に役立ちます。配送先情報を収集するには、以下を顧客から収集します。

- 氏名
- 詳細な配送先住所

これらの詳細を使用して、[STPPaymentIntentShippingDetailsAddressParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentIntentShippingDetailsAddressParams.html) を作成します。

#### Swift

```swift
// Billing details
let billingDetails = STPPaymentMethodBillingDetails()
billingDetails.name = "Jane Doe"
billingDetails.email = "email@email.com"
let billingAddress = STPPaymentMethodAddress()
billingAddress.line1 = "510 Townsend St."
billingAddress.postalCode = "94102"
billingAddress.country = "US"
billingDetails.address = billingAddress

// Afterpay PaymentMethod params
let afterpayParams = STPPaymentMethodParams(afterpayClearpay: STPPaymentMethodAfterpayClearpayParams(),
                                                                             billingDetails: billingDetails,
                                                                             metadata: nil)

// Shipping details
// Shipping details are optional but recommended to pass in.
let shippingAddress = STPPaymentIntentShippingDetailsAddressParams(line1: "510 Townsend St.")
shippingAddress.country = "US"
shippingAddress.postalCode = "94102"
let shippingDetails = STPPaymentIntentShippingDetailsParams(address: shippingAddress, name: "Jane Doe")
```

## Stripe に支払いを送金する [クライアント側]

ステップ 2 で作成した PaymentIntent から client secret を取得し、[STPPaymentHandler confirmPayment:](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:) メソッドを呼び出します。これにより、WebView が表示され、顧客はそこで支払いを完了できます。完了後、支払い結果とともに、完了ブロックが呼び出されます。

#### Swift

```swift
let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret)
paymentIntentParams.paymentMethodParams = afterpayParams
// Shipping details are optional but recommended to pass in.
paymentIntentParams.shipping = shippingDetails

STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (handlerStatus, paymentIntent, error) in
    switch handlerStatus {
    case .succeeded:
        // Payment succeeded

    case .canceled:
        // Payment was canceled

    case .failed:
        // Payment failed

    @unknown default:
        fatalError()
    }
}
```

## Optional: PaymentIntent にラインアイテムを追加する

オプションで項目データを受け入れて、Afterpay により多くのリスクシグナルを提供できます。この機能は現在プライベートベータです。アクセスをリクエストする場合は、[Stripe サポート](https://support.stripe.com)のフォームからお問い合わせください。

## Optional: オーソリとキャプチャの分離

[カード支払いでのオーソリとキャプチャーの分離](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md)とは異なり、Afterpay ではオーソリ時点で分割払いの初回の金額を顧客に請求します。その後、オーソリから最長 13 日間以内であれば、残りの支払いをキャプチャーすることができます。この期間に支払いがキャプチャーされない場合、初回分の分割払いが顧客に返金され、それ以降の分割払いは請求されません。この場合、Stripe は PaymentIntent もキャンセルし、[payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) イベントを送信します。

支払いをキャプチャーできないと分かっている場合は、13 日間が経過するのを待つのではなく [PaymentIntent をキャンセル](https://docs.stripe.com/refunds.md#cancel-payment)することをお勧めします。先を見越して PaymentIntent をキャンセルすると、すぐに最初の分割払いが顧客に返金され、顧客の明細書上の支払いに関して混乱が生じるのを避けられます。

### オーソリのみ行うように Stripe に指示する

オーソリとキャプチャーを分離することを指定するには、PaymentIntent の作成時に、[capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) を `manual` に設定します。このパラメーターは、顧客の Afterpay アカウントの金額のみをオーソリするよう Stripe に指示します。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \
  -d "capture_method"="manual" \
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"="CA" \
  -d "shipping[address][country]"="US" \
  -d "shipping[address][postal_code]"=94111
```

オーソリが成功すると、Stripe は [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated) イベントを送信します。この機能については、[イベントガイド](https://docs.stripe.com/api/events.md)でご確認ください。

### 売上をキャプチャする

オーソリが成功すると、PaymentIntent の [status](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) が `requires_capture` に移行します。オーソリされた売上をキャプチャーするために、PaymentIntent [capture](https://docs.stripe.com/api/payment_intents/capture.md) リクエストを実行します。デフォルトでは、オーソリされた合計金額がキャプチャーされます。これを超える金額のキャプチャーはできませが、これ未満でしたらキャプチャーできます。

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount_to_capture=750
```

### (任意)オーソリをキャンセルする

オーソリを取り消す必要がある場合は、[PaymentIntent をキャンセル](https://docs.stripe.com/refunds.md#cancel-payment)できます。

## Optional: 支払い後のイベントを処理する

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。

## Optional: Afterpay の組み込みをテストする

テスト API キーを使用して Afterpay の組み込みをテストするには、リダイレクトページを表示します。リダイレクトページで支払いを認証することにより、支払い成功のケースをテストできます。PaymentIntent は `requires_action` から `succeeded` に変化します。

ユーザが認証に失敗するケースをテストするには、テスト API キーを使用してリダイレクトページを表示します。リダイレクトページで**テスト支払い失敗**をクリックします。PaymentIntent は、`requires_action` から `requires_payment_method`に変化します。

テスト環境で PaymentIntents を[手動でキャプチャ](https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment.md#manual-capture)する場合、キャプチャされていない PaymentIntent は、認証が成功してから 10 分後に自動的に期限切れになります。

## 失敗した支払い

Afterpay は、取引を受け付けるか拒否するかを決定する際に複数の要因を考慮します (買い手が Afterpay を使用している期間、顧客が返済する必要のある未払い額、現在の注文の値など)。

Afterpay による支払いは多くの決済手段よりも支払い拒否の確立が高いため、チェックアウトフローには常に `card` などの他の支払いオプションを提示する必要があります。このような場合、[PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) は解除され、[PaymentInten](https://docs.stripe.com/api/payment_intents/object.md)オブジェクトのステータスは自動的に `requires_payment_method` に変わります。

Afterpay の [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) のステータスが `requires_action` の場合、顧客は Afterpay のサイトにリダイレクトされてから 3 時間以内に支払いを完了する必要があります (拒否された支払いには適用されません)。3 時間以内にアクションが実行されなければ、[PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) の関連付けが解除され、[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) のステータスは自動的に `requires_payment_method` に移行します。

このような場合、決済フローに表示される別の支払いオプションで再試行するように顧客に通知します。

## エラーコード

一般的なエラーコードと対応する推奨アクションは以下のとおりです。

| エラーコード                                   | 推奨される対応                                                                                                                             |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Afterpay Checkout が失敗したことを示す一般的な失敗。決済の失敗エラーコードとして表示されない決済の失敗も考えられます。                                                                |
| `payment_method_provider_decline`        | Afterpay が顧客の支払いを拒否しました。次のステップとして、顧客から Afterpay に詳細を問い合わせる必要があります。                                                                  |
| `payment_intent_payment_attempt_expired` | 顧客が Afterpay の決済ページで支払いを完了しなかったため、支払いセッションの有効期限が切れました。Stripe では、決済が正常に行われなかった PaymentIntent は、最初のチェックアウト作成から 3 時間後に自動的に有効期限切れとなります。 |
| `payment_method_not_available`           | Afterpay でサービス関連のエラーが発生したため、リクエストを完了できません。後で再試行してください。                                                                              |
| `amount_too_small`                       | Afterpay の国別の[デフォルトの取引限度額](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule)以内の金額を入力してください。                |
| `amount_too_large`                       | Afterpay の国別の[デフォルトの取引限度額](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule)以内の金額を入力してください。                |


# Android

> This is a Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment?payment-ui=mobile&platform=android.

アプリで Afterpay を受け付けるには、顧客が支払いを認証するための Webview を表示します。その後、顧客はアプリに戻り、お客様は支払いが成功したか失敗したかをすぐに*確認* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects)できます。

> 連携を始める前に、[決済手段の設定](https://dashboard.stripe.com/settings/payment_methods)に移動して、アカウントが Afterpay の対象であることを確認してください。

## Stripe を設定する [サーバ側] [クライアント側]

まず、Stripe アカウントが必要です。[今すぐ登録](https://dashboard.stripe.com/register)してください。

### サーバ側

この組み込みには、サーバ上に Stripe API と通信するエンドポイントが必要です。サーバから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

### クライアント側

[Stripe Android SDK](https://github.com/stripe/stripe-android) はオープンソースであり、[詳細なドキュメントが提供されています](https://stripe.dev/stripe-android/)。

SDK をインストールするには、[app/build.gradle](https://developer.android.com/studio/build/dependencies) ファイルの `dependencies` ブロックに `stripe-android` を追加します。

#### Kotlin

```kotlin
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Stripe Android SDK
  implementation("com.stripe:stripe-android:23.3.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:23.3.0")
}
```

> SDK の最新リリースおよび過去バージョンの詳細については、GitHub の [Releases](https://github.com/stripe/stripe-android/releases) ページをご覧ください。新しいリリースの公開時に通知を受け取るには、[リポジトリのリリースを確認](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository)してください。

Stripe の[公開可能キー](https://dashboard.stripe.com/apikeys)を使用して SDK を設定し、 `Application` サブクラスなどで、Stripe API へのリクエストを実行できるようにします。

#### Kotlin

```kotlin
import com.stripe.android.PaymentConfiguration

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        PaymentConfiguration.init(
            applicationContext,
            "<<YOUR_PUBLISHABLE_KEY>>"
        )
    }
}
```

> テストおよび開発時には[テストキー](https://docs.stripe.com/keys.md#obtain-api-keys)を使用し、アプリの公開時には[本番環境](https://docs.stripe.com/keys.md#test-live-modes)キーを使用します。

Stripe サンプルでは、サーバへの HTTP リクエストの作成に、[OkHttp](https://github.com/square/okhttp) および [GSON](https://github.com/google/gson) も使用します。

## PaymentIntent を作成する [サーバ側] [クライアント側]

[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルをステージごとに追跡します。

### サーバ側

まず、サーバーで `PaymentIntent` を作成し、回収する金額と通貨を指定します。[Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) を使用した組み込みをすでにお持ちの場合には、`afterpay_clearpay` を `PaymentIntent` の[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay"
```

### その他の支払い方法オプション

`PaymentIntent`の[決済手段オプション](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-afterpay_clearpay-reference)で、決済の内部注文IDを設定するオプションの`reference`パラメーターを指定できます。これは通常、企業や消費者のいずれにも表示されませんが、Afterpayの内部サポートチームは、手動サポートリクエスト中にこのパラメーターにアクセスできます。IDは128文字以内で、文字、数字、アンダースコア、バックスラッシュ、ダッシュのみを使用できます。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \-d "payment_method_options[afterpay_clearpay][reference]"="order_123"
```

### クライアント側

返される PaymentIntent には *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれ、これを使用することでクライアント側は、PaymentIntent オブジェクト全体を渡すことなく安全に決済プロセスを完了できます。クライアントで、サーバの PaymentIntent をリクエストし、その client secret を保存します。

#### Kotlin

```kotlin
class AfterpayPaymentActivity: AppCompatActivity() {
    private lateinit var paymentIntentClientSecret: String

    override fun onCreate(savedInstanceState: Bundle?) {
        // ...
        startCheckout()
    }


    private fun startCheckout() {
        // Request a PaymentIntent from your server and store its client secret
    }
}
```

## 支払い方法の詳細を収集する [クライアント側]

Afterpay で支払いを成功させるには請求先情報が提示されている必要があります。アプリで、必要な請求先情報を顧客から収集します。

- 氏名 (姓と名)
- メールアドレス
- 請求先住所

これらの詳細を使用して、[PaymentMethodCreateParams](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method-create-params/index.html) を作成します。

また、配送先情報は必須ではありませんが、認証率の向上に役立ちます。配送先情報を収集するには、以下を顧客から収集します。

- 氏名
- 詳細な配送先住所

これらの詳細を使用して、[ConfirmPaymentIntentParams.Shipping](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-confirm-payment-intent-params/-shipping/index.html) を作成します。

#### Kotlin

```kotlin
val billingDetails = PaymentMethod.BillingDetails(
  name = "Jenny Rosen",
  email = "jenny@rosen.com",
  address = Address.Builder()
    .setLine1("1234 Market St")
    .setCity("San Francisco")
    .setState("CA")
    .setCountry("US")
    .setPostalCode("94111")
    .build()
)
val paymentMethodCreateParams = PaymentMethodCreateParams.createAfterpayClearpay(billingDetails)

// Shipping details are optional but recommended to pass in.
val shippingDetails = ConfirmPaymentIntentParams.Shipping(
  name = "Jenny Rosen",
  address = Address.Builder()
    .setLine1("1234 Market St")
    .setCity("San Francisco")
    .setState("CA")
    .setCountry("US")
    .setPostalCode("94111")
    .build()
)
```

## Stripe に支払いを送金する [クライアント側]

ステップ 2 で作成した PaymentIntent から client secret を取得し、[PaymentLauncher confirm](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690) メソッドを呼び出します。これにより、顧客が銀行のウェブサイトやアプリ上で支払いを完了できるウェブビューが表示されます。支払い完了後、onActivityResult が呼び出され、支払い結果が返されます。

#### Kotlin

```kotlin

class AfterpayPaymentActivity : AppCompatActivity() {
    // ...
    private lateinit var paymentIntentClientSecret: String
    private val paymentLauncher: PaymentLauncher by lazy {
        val paymentConfiguration = PaymentConfiguration.getInstance(applicationContext)
        PaymentLauncher.Companion.create(
            this,
            paymentConfiguration.publishableKey,
            paymentConfiguration.stripeAccountId,
            ::onPaymentResult
        )
    }

    private fun startCheckout() {
        // ...

        // Shipping details are optional but recommended to pass in.
        val confirmParams = ConfirmPaymentIntentParams
            .createWithPaymentMethodCreateParams(
                paymentMethodCreateParams = paymentMethodCreateParams,
                clientSecret = paymentIntentClientSecret,
                shipping = shippingDetails
            )
        paymentLauncher.confirm(confirmParams)
    }

    private fun onPaymentResult(paymentResult: PaymentResult) {
        when (paymentResult) {
            is PaymentResult.Completed -> {
                // show success UI
            }
            is PaymentResult.Canceled -> {
                // handle cancel flow
            }
            is PaymentResult.Failed -> {
                // handle failures
                // (for example, the customer may need to choose a new payment
                // method)
            }
        }
    }
}
```

## Optional: PaymentIntent にラインアイテムを追加する

オプションで項目データを受け入れて、Afterpay により多くのリスクシグナルを提供できます。この機能は現在プライベートベータです。アクセスをリクエストする場合は、[Stripe サポート](https://support.stripe.com)のフォームからお問い合わせください。

## Optional: オーソリとキャプチャの分離

[カード支払いでのオーソリとキャプチャーの分離](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md)とは異なり、Afterpay ではオーソリ時点で分割払いの初回の金額を顧客に請求します。その後、オーソリから最長 13 日間以内であれば、残りの支払いをキャプチャーすることができます。この期間に支払いがキャプチャーされない場合、初回分の分割払いが顧客に返金され、それ以降の分割払いは請求されません。この場合、Stripe は PaymentIntent もキャンセルし、[payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) イベントを送信します。

支払いをキャプチャーできないと分かっている場合は、13 日間が経過するのを待つのではなく [PaymentIntent をキャンセル](https://docs.stripe.com/refunds.md#cancel-payment)することをお勧めします。先を見越して PaymentIntent をキャンセルすると、すぐに最初の分割払いが顧客に返金され、顧客の明細書上の支払いに関して混乱が生じるのを避けられます。

### オーソリのみ行うように Stripe に指示する

オーソリとキャプチャーを分離することを指定するには、PaymentIntent の作成時に、[capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) を `manual` に設定します。このパラメーターは、顧客の Afterpay アカウントの金額のみをオーソリするよう Stripe に指示します。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \
  -d "capture_method"="manual" \
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"="CA" \
  -d "shipping[address][country]"="US" \
  -d "shipping[address][postal_code]"=94111
```

オーソリが成功すると、Stripe は [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated) イベントを送信します。この機能については、[イベントガイド](https://docs.stripe.com/api/events.md)でご確認ください。

### 売上をキャプチャする

オーソリが成功すると、PaymentIntent の [status](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) が `requires_capture` に移行します。オーソリされた売上をキャプチャーするために、PaymentIntent [capture](https://docs.stripe.com/api/payment_intents/capture.md) リクエストを実行します。デフォルトでは、オーソリされた合計金額がキャプチャーされます。これを超える金額のキャプチャーはできませが、これ未満でしたらキャプチャーできます。

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount_to_capture=750
```

### (任意)オーソリをキャンセルする

オーソリを取り消す必要がある場合は、[PaymentIntent をキャンセル](https://docs.stripe.com/refunds.md#cancel-payment)できます。

## Optional: 支払い後のイベントを処理する

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。

## Optional: Afterpay の組み込みをテストする

テスト API キーを使用して Afterpay の組み込みをテストするには、リダイレクトページを表示します。リダイレクトページで支払いを認証することにより、支払い成功のケースをテストできます。PaymentIntent は `requires_action` から `succeeded` に変化します。

ユーザが認証に失敗するケースをテストするには、テスト API キーを使用してリダイレクトページを表示します。リダイレクトページで**テスト支払い失敗**をクリックします。PaymentIntent は、`requires_action` から `requires_payment_method`に変化します。

テスト環境で PaymentIntents を[手動でキャプチャ](https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment.md#manual-capture)する場合、キャプチャされていない PaymentIntent は、認証が成功してから 10 分後に自動的に期限切れになります。

## 失敗した支払い

Afterpay は、取引を受け付けるか拒否するかを決定する際に複数の要因を考慮します (買い手が Afterpay を使用している期間、顧客が返済する必要のある未払い額、現在の注文の値など)。

Afterpay による支払いは多くの決済手段よりも支払い拒否の確立が高いため、チェックアウトフローには常に `card` などの他の支払いオプションを提示する必要があります。このような場合、[PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) は解除され、[PaymentInten](https://docs.stripe.com/api/payment_intents/object.md)オブジェクトのステータスは自動的に `requires_payment_method` に変わります。

Afterpay の [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) のステータスが `requires_action` の場合、顧客は Afterpay のサイトにリダイレクトされてから 3 時間以内に支払いを完了する必要があります (拒否された支払いには適用されません)。3 時間以内にアクションが実行されなければ、[PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) の関連付けが解除され、[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) のステータスは自動的に `requires_payment_method` に移行します。

このような場合、決済フローに表示される別の支払いオプションで再試行するように顧客に通知します。

## エラーコード

一般的なエラーコードと対応する推奨アクションは以下のとおりです。

| エラーコード                                   | 推奨される対応                                                                                                                             |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Afterpay Checkout が失敗したことを示す一般的な失敗。決済の失敗エラーコードとして表示されない決済の失敗も考えられます。                                                                |
| `payment_method_provider_decline`        | Afterpay が顧客の支払いを拒否しました。次のステップとして、顧客から Afterpay に詳細を問い合わせる必要があります。                                                                  |
| `payment_intent_payment_attempt_expired` | 顧客が Afterpay の決済ページで支払いを完了しなかったため、支払いセッションの有効期限が切れました。Stripe では、決済が正常に行われなかった PaymentIntent は、最初のチェックアウト作成から 3 時間後に自動的に有効期限切れとなります。 |
| `payment_method_not_available`           | Afterpay でサービス関連のエラーが発生したため、リクエストを完了できません。後で再試行してください。                                                                              |
| `amount_too_small`                       | Afterpay の国別の[デフォルトの取引限度額](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule)以内の金額を入力してください。                |
| `amount_too_large`                       | Afterpay の国別の[デフォルトの取引限度額](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule)以内の金額を入力してください。                |


# React Native

> This is a React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment?payment-ui=mobile&platform=react-native.

> このセクションには*レガシー* (Technology that's no longer recommended)プロダクトについてのコンテンツが含まれています。最新の導入パスについては、代わりに[決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md)のガイドを使用する必要があります。Stripe はこのプロダクトを引き続きサポートしていますが、プロダクトが非推奨になった場合にはサポートが終了する可能性があります。

Stripe ユーザは、[Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) (サポートされている方法を使用して支払いを作成するための単一の導入パス) を使用して、以下の国の顧客から [Afterpay](https://www.afterpay.com/) による支払いを受け付けることができます。

- オーストラリア
- カナダ
- ニュージーランド
- イギリス
- アメリカ

Afterpay は、[使用が 1 回限り](https://docs.stripe.com/payments/payment-methods.md#usage)の[即時通知型](https://docs.stripe.com/payments/payment-methods.md#payment-notification)の決済手段であり、顧客は支払いの[認証](https://docs.stripe.com/payments/payment-methods.md#customer-actions)を求められます。顧客は Afterpay のサイトにリダイレクトされ、そこで分割払いプランの規約に同意します。顧客が規約に同意すると、売上が保証され、お客様の Stripe アカウントに送金されます。顧客は一定の期間で直接 Afterpay に返済します。

> 連携を始める前に、[決済手段の設定](https://dashboard.stripe.com/settings/payment_methods)に移動して、アカウントが Afterpay の対象であることを確認してください。

## Stripe を設定する [サーバ側] [クライアント側]

### サーバ側

この組み込みには、Stripe API と通信するエンドポイントがサーバ上に必要です。Stripe の公式ライブラリを使用して、サーバから Stripe API にアクセスします。

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

### クライアント側

[React Native SDK](https://github.com/stripe/stripe-react-native) はオープンソースであり、詳細なドキュメントが提供されています。内部では、[ネイティブの iOS](https://github.com/stripe/stripe-ios) および [Android](https://github.com/stripe/stripe-android) の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーによって異なる) 次のいずれかのコマンドを実行します。

#### yarn

```bash
yarn add @stripe/stripe-react-native
```

#### npm

```bash
npm install @stripe/stripe-react-native
```

次に、その他の必要な依存関係をインストールします。

- iOS の場合は、**ios** ディレクトリに移動して `pod install` を実行し、必要なネイティブ依存関係もインストールします。
- Android の場合は、依存関係をインストールする必要はありません。

> [公式の TypeScript ガイド](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project)に従って TypeScript のサポートを追加することをお勧めします。

### Stripe の初期化

React Native アプリで Stripe を初期化するには、決済画面を `StripeProvider` コンポーネントでラップするか、`initStripe` 初期化メソッドを使用します。`publishableKey` の API [公開可能キー](https://docs.stripe.com/keys.md#obtain-api-keys)のみが必要です。次の例は、`StripeProvider` コンポーネントを使用して Stripe を初期化する方法を示しています。

```jsx
import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}
```

> テストおよび開発時には API の[テストキー](https://docs.stripe.com/keys.md#obtain-api-keys)を使用し、アプリの公開時には[本番環境](https://docs.stripe.com/keys.md#test-live-modes)キーを使用します。

## PaymentIntent を作成する [サーバ側] [クライアント側]

[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルをステージごとに追跡します。

### サーバ側

まず、サーバーで `PaymentIntent` を作成し、回収する金額と通貨を指定します。[Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) を使用した組み込みをすでにお持ちの場合には、`afterpay_clearpay` を `PaymentIntent` の[決済手段タイプ](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types)のリストに追加します。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay"
```

### クライアント側

返される PaymentIntent には *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれ、これを使用することでクライアント側は、PaymentIntent オブジェクト全体を渡すことなく安全に決済プロセスを完了できます。クライアントで、サーバの PaymentIntent をリクエストし、その client secret を保存します。

```javascript
const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      currency: 'usd',
      payment_method_types: ['afterpay_clearpay'],
    }),
  });
  const {clientSecret, error} = await response.json();

  return {clientSecret, error};
};
```

## 支払い方法の詳細を収集する [クライアント側]

Afterpay で支払いを成功させるには請求先情報が提示されている必要があります。アプリで、必要な請求先情報を顧客から収集します。

- 氏名 (姓と名)
- メールアドレス
- 請求先住所

また、配送先情報は必須ではありませんが、認証率の向上に役立ちます。配送先情報を収集するには、以下を顧客から収集します。

- 氏名
- 詳細な配送先住所

```javascript
export default function AfterpayClearpayPaymentScreen() {
  const [email, setEmail] = useState('');

  const handlePayPress = async () => {
    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      email,
      phone: '+48888000888',
      addressCity: 'Houston',
      addressCountry: 'US',
      addressLine1: '1459  Circle Drive',
      addressLine2: 'Texas',
      addressPostalCode: '77063',
      name: 'Jenny Rosen',
    };

    // Shipping details are optional but recommended to pass in.
    const shippingDetails: PaymentMethodCreateParams.ShippingDetails = {
      addressLine1: '1459  Circle Drive',
      addressCountry: 'US',
      addressPostalCode: '77063',
      name: 'Jenny Rosen',
    };

    // ...
  };

  return (
    <Screen>
      <TextInput
        placeholder="E-mail"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
    </Screen>
  );
}
```

## Stripe に支払いを送金する [クライアント側]

作成した PaymentIntent から client secret を取得し、`confirmPayment` を呼び出します。client secret を使用して支払いを完了できるため、慎重に取り扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。

```javascript
export default function AfterpayClearpayPaymentScreen() {
  const [email, setEmail] = useState('');

  const handlePayPress = async () => {
    // ...

    const {error, paymentIntent} = await confirmPayment(clientSecret, {
      paymentMethodType: 'AfterpayClearpay',
      paymentMethodData: {
        billingDetails,
        // Shipping details are optional but recommended to pass in.
        shippingDetails,
      },
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (paymentIntent) {
      Alert.alert(
        'Success',
        `The payment was confirmed successfully! currency: ${paymentIntent.currency}`,
      );
    }
  };

  return <Screen>{/* ... */}</Screen>;
}
```

## Optional: ディープリンクを処理する

顧客がアプリを終了すると (Safari やバンキングアプリで認証するなど)、自動的にアプリに戻るための方法を提供します。多くの決済手段タイプで、戻り先 URL の指定が「必須」です。戻り先 URL を有効にしていても、指定がされていないと、戻り先 URL が必要な決済手段をユーザーに提示できません。

戻り先 URL を指定するには、以下のようにします。

1. カスタム URL を[登録](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app#Register-your-URL-scheme)します。ユニバーサルリンクはサポートされていません。
1. カスタム URL を[設定](https://reactnative.dev/docs/linking) します。
1. 以下のように、URL を Stripe SDK に転送するようにルートコンポーネントを設定します。

> Expo を使用している場合は、`app.json` ファイルで[スキームを設定](https://docs.expo.io/guides/linking/#in-a-standalone-app)します。

```jsx
import { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}
```

ネイティブ URL スキームの詳細については、[Android](https://developer.android.com/training/app-links/deep-linking) および [iOS](https://developer.apple.com/documentation/xcode/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app) のドキュメントをご覧ください。

## Optional: PaymentIntent にラインアイテムを追加する

オプションで項目データを受け入れて、Afterpay により多くのリスクシグナルを提供できます。この機能は現在プライベートベータです。アクセスをリクエストする場合は、[Stripe サポート](https://support.stripe.com)のフォームからお問い合わせください。

## Optional: オーソリとキャプチャの分離

[カード支払いでのオーソリとキャプチャーの分離](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md)とは異なり、Afterpay ではオーソリ時点で分割払いの初回の金額を顧客に請求します。その後、オーソリから最長 13 日間以内であれば、残りの支払いをキャプチャーすることができます。この期間に支払いがキャプチャーされない場合、初回分の分割払いが顧客に返金され、それ以降の分割払いは請求されません。この場合、Stripe は PaymentIntent もキャンセルし、[payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) イベントを送信します。

支払いをキャプチャーできないと分かっている場合は、13 日間が経過するのを待つのではなく [PaymentIntent をキャンセル](https://docs.stripe.com/refunds.md#cancel-payment)することをお勧めします。先を見越して PaymentIntent をキャンセルすると、すぐに最初の分割払いが顧客に返金され、顧客の明細書上の支払いに関して混乱が生じるのを避けられます。

### オーソリのみ行うように Stripe に指示する

オーソリとキャプチャーを分離することを指定するには、PaymentIntent の作成時に、[capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) を `manual` に設定します。このパラメーターは、顧客の Afterpay アカウントの金額のみをオーソリするよう Stripe に指示します。

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \
  -d "capture_method"="manual" \
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"="CA" \
  -d "shipping[address][country]"="US" \
  -d "shipping[address][postal_code]"=94111
```

オーソリが成功すると、Stripe は [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated) イベントを送信します。この機能については、[イベントガイド](https://docs.stripe.com/api/events.md)でご確認ください。

### 売上をキャプチャする

オーソリが成功すると、PaymentIntent の [status](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) が `requires_capture` に移行します。オーソリされた売上をキャプチャーするために、PaymentIntent [capture](https://docs.stripe.com/api/payment_intents/capture.md) リクエストを実行します。デフォルトでは、オーソリされた合計金額がキャプチャーされます。これを超える金額のキャプチャーはできませが、これ未満でしたらキャプチャーできます。

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount_to_capture=750
```

### (任意)オーソリをキャンセルする

オーソリを取り消す必要がある場合は、[PaymentIntent をキャンセル](https://docs.stripe.com/refunds.md#cancel-payment)できます。

## Optional: 支払い後のイベントを処理する

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。

## Optional: Afterpay の組み込みをテストする

テスト API キーを使用して Afterpay の組み込みをテストするには、リダイレクトページを表示します。リダイレクトページで支払いを認証することにより、支払い成功のケースをテストできます。PaymentIntent は `requires_action` から `succeeded` に変化します。

ユーザが認証に失敗するケースをテストするには、テスト API キーを使用してリダイレクトページを表示します。リダイレクトページで**テスト支払い失敗**をクリックします。PaymentIntent は、`requires_action` から `requires_payment_method`に変化します。

テスト環境で PaymentIntents を[手動でキャプチャ](https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment.md#manual-capture)する場合、キャプチャされていない PaymentIntent は、認証が成功してから 10 分後に自動的に期限切れになります。

## 失敗した支払い

Afterpay は、取引を受け付けるか拒否するかを決定する際に複数の要因を考慮します (買い手が Afterpay を使用している期間、顧客が返済する必要のある未払い額、現在の注文の値など)。

Afterpay による支払いは多くの決済手段よりも支払い拒否の確立が高いため、チェックアウトフローには常に `card` などの他の支払いオプションを提示する必要があります。このような場合、[PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) は解除され、[PaymentInten](https://docs.stripe.com/api/payment_intents/object.md)オブジェクトのステータスは自動的に `requires_payment_method` に変わります。

Afterpay の [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) のステータスが `requires_action` の場合、顧客は Afterpay のサイトにリダイレクトされてから 3 時間以内に支払いを完了する必要があります (拒否された支払いには適用されません)。3 時間以内にアクションが実行されなければ、[PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) の関連付けが解除され、[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) のステータスは自動的に `requires_payment_method` に移行します。

このような場合、決済フローに表示される別の支払いオプションで再試行するように顧客に通知します。

## エラーコード

一般的なエラーコードと対応する推奨アクションは以下のとおりです。

| エラーコード                                   | 推奨される対応                                                                                                                             |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Afterpay Checkout が失敗したことを示す一般的な失敗。決済の失敗エラーコードとして表示されない決済の失敗も考えられます。                                                                |
| `payment_method_provider_decline`        | Afterpay が顧客の支払いを拒否しました。次のステップとして、顧客から Afterpay に詳細を問い合わせる必要があります。                                                                  |
| `payment_intent_payment_attempt_expired` | 顧客が Afterpay の決済ページで支払いを完了しなかったため、支払いセッションの有効期限が切れました。Stripe では、決済が正常に行われなかった PaymentIntent は、最初のチェックアウト作成から 3 時間後に自動的に有効期限切れとなります。 |
| `payment_method_not_available`           | Afterpay でサービス関連のエラーが発生したため、リクエストを完了できません。後で再試行してください。                                                                              |
| `amount_too_small`                       | Afterpay の国別の[デフォルトの取引限度額](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule)以内の金額を入力してください。                |
| `amount_too_large`                       | Afterpay の国別の[デフォルトの取引限度額](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule)以内の金額を入力してください。                |