# External payment methods

Add external payment methods to the Payment Element.

> We created a [custom payment methods](https://docs.stripe.com/payments/payment-element/custom-payment-methods.md) feature that allows you to extend your payment integration with payment methods processed outside of Stripe. We recommend using it for your integration instead of external payment methods.

The [Payment Element](https://docs.stripe.com/payments/payment-element.md) can display external payment methods that you support in addition to the payment methods processed through Stripe. Integrating external payment methods requires additional integration work, because external payment method transactions are processed and finalized outside of Stripe.

> #### External payment methods disclaimer
> 
> When customers choose an external payment method, they’re redirected to a URL you configured for the external payment method. Learn about [what you’re responsible for and the ongoing availability of external payment methods](https://docs.stripe.com/payments/external-payment-methods.md#external-payment-methods-disclaimer).

This guide adds an external payment method, Divido, using the HTML/JS example from the [Payment Element quickstart](https://docs.stripe.com/payments/quickstart.md).

## Before you begin

1. [Create a Stripe account](https://dashboard.stripe.com/register) or [sign in](https://dashboard.stripe.com/login).
1. Follow the [Payment Element quickstart](https://docs.stripe.com/payments/quickstart.md) to complete a payments integration.
1. For each external payment method you want to add, ensure you’ve completed the integration with each external payment method and confirmed that it’s working in the region that you want to enable them in.

## Add external payment method types

In your `checkout.js` file, where you [initialize Stripe Elements](https://docs.stripe.com/payments/quickstart.md#init-elements), specify the external payment methods you want to add to the Payment Element. This example adds Divido:

```js
elements = stripe.elements({
    clientSecret: clientSecret,externalPaymentMethodTypes: ['external_divido']
  });
```

## Handle payment method selection listener

There are two ways to handle the redirect to the external payment method:

- Replace the action of the Stripe **Pay now** button to redirect to the external payment method.
- Replace the Stripe **Pay now** button with the external payment method provider’s button.

#### Replace action

This listener replaces the action of the Stripe **Pay now** button to redirect the customer to the Divido checkout page where they can complete the transaction. In `checkout.js`, add the listener code after the `paymentElement.mount` call:

```js
paymentElement.mount("#payment-element");// Track selected payment method
let selectedPaymentMethod;
paymentElement.on('change', (event) => {
  selectedPaymentMethod = event?.value?.type;
});
```

Update the `handleSubmit` function to redirect to the Divido checkout page:

```js
async function handleSubmit(e) {if (selectedPaymentMethod === 'external_divido') {
    // Redirect customer to the Divido checkout page to complete the transaction
    const dividoRedirectUrl = "<< fill the Divido redirect URL here >>";
    window.location.href = dividoRedirectUrl;
  } else {
    ...
  }
```

#### Replace button

This listener replaces the Stripe **Pay Now** button with the **Buy with Divido** button when the customer chooses the Divido payment method. In `checkout.js`, add the listener code after the `paymentElement.mount` call.

- The Stripe **Pay now** button has the ID `submit`.
- The **Pay with Divido** button has the ID `divido-button-container`.

```js
// Track Selected Payment Method
paymentElement.on('change', (event) => {
  const selectedPaymentMethod = event?.value?.type;
  if (selectedPaymentMethod === 'external_divido') {
    document.querySelector("#submit").style.display = "none";
    document.querySelector("#divido-button-container").style.display = "inline-block";
  } else {
    document.querySelector("#submit").style.display = "inline-block";
    document.querySelector("#divido-button-container").style.display = "none";
  }
});
```

#### Payment form reference 

For reference, this example uses the following HTML payment form:

```html
<!-- Display a payment form -->
<form id="payment-form">
  <div id="payment-element">
    <!--Stripe.js injects the Payment Element-->
  </div>
  <button id="submit">
    <div class="spinner hidden" id="spinner"></div>
    <span id="button-text">Pay now</span>
  </button>
  <!-- Display divido button; hidden by default -->
  <div id="divido-button-container" style="display: none"></div>
  <div id="payment-message" style="display: none"></div>
</form>
```

## Optional: Position external payment methods

External payment methods aren’t intelligently ranked by Stripe’s smart ordering logic as Stripe doesn’t have context on these payment methods. You can use [paymentMethodOrder](https://docs.stripe.com/js/elements_object/update_payment_element#payment_element_update-options-paymentMethodOrder) to explicitly position the external payment method in the Payment Element. The Stripe-supported payment methods following the external payment method are still intelligently ranked. This example configures Divido in the second position after cards.

> When setting up your payment methods, you can’t set external payment methods as the default selection. When placed first, external payment methods appear from the second slot onwards.

```js
const paymentElement = elements.create("payment", {
      paymentMethodOrder: ['card', 'external_divido']
  });
```

## Test your integration

1. Go through your checkout flow and verify that the Payment Element displays Divido. This example configures Divido in the second position after cards.![Screenshot of what Payment Element looks like when Divido is added](https://b.stripecdn.com/docs-statics-srv/assets/display-divido.cbee45d770b63f3938f71ad6682f3ecd.png)
   
   Payment Element with Divido

1. Choose the Divido payment method to verify messaging about the next step redirecting to Divido.![Screenshot of what Payment Element looks like when Divido is selected](https://b.stripecdn.com/docs-statics-srv/assets/select-divido.f695a72908b8e4b97d37c5bc89e9a2ba.png)
   
1. Click **Pay now** to test your existing Divido integration. Verify that you’re redirected to Divido to complete the transaction and any post-payment actions (for example, display a confirmation page, success message, or failure message) still work with your Divido integration.

## ダッシュボードに関する考慮事項

外部の支払い方法の提供業者に対する [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) は Stripe ダッシュボードでは、`incomplete` ステータスになります。Stripe は外部の支払い方法による取引に関与しないため、これらの取引のステータスを特定できません。

[インテントを作成する前に支払いの詳細を収集する](https://docs.stripe.com/payments/accept-a-payment-deferred.md)場合、外部の支払い方法の提供業者で処理された取引に対して、Stripe ダッシュボードに `incomplete` 取引は表示されません。

## 外部の支払い方法の免責事項

Stripe Payment Element を使用して、Stripe では対応していないがお客様が直接実装している外部の支払い方法をいくつか表示できます。顧客は、外部の支払い方法を選択すると、外部の支払い方法用にお客様が設定した URL にリダイレクトされます。お客様は以下を承認するものとします。

1. 外部の支払い方法が提供されても、Stripe で対応してもいません。外部の支払い方法の運用とサポートは外部の支払い方法の提供業者によって提供されます。
1. 外部の支払い方法の提供業者との直接実装の保守はお客様自身で行う必要があります。
1. お客様は外部の支払い方法の提供業者との契約を維持する必要があり、各提供業者との契約を遵守する責任があります。
1. 決済機能内で外部の支払い方法の提供業者のマークとロゴを使用するのに必要なすべての権利は、お客様がこれらのドキュメントの記載に従って取得する必要があります。
1. Stripe は、いかなる外部の支払い方法の提供業者とのいかなる取引 (支払い、返金、不審請求の申請、売上処理、資金フローなど) も処理する責任を負いません。
1. 顧客が外部の支払い方法を選択した後で、たとえば注文の確定や注文の照合などを含む、注文の購入フローを完了する責任は、お客様または外部の支払い方法の提供業者にあります。
1. 外部の支払い方法へのリダイレクト URL は、お客様自身の責任で正しく設定する必要があります。
1. 外部の支払い方法の提供業者との契約が終了するか、Stripe が外部の支払い方法を利用不可にした場合、お客様はすぐに外部の支払い方法を削除する必要があります。
1. Payment Element に実装して提示できる外部の支払い方法は、このガイドのリストにあるものに限られます。
1. 買い手が指定の外部の支払い方法に正しくリダイレクトされるようにする作業は、お客様単独の責任で行う必要があります。

### 外部の支払い方法の継続的な利用可能性

Stripe は、いつでも外部の支払い方法として任意の支払い方法を利用不可にすることを決定できます。お客様が使用している外部の支払い方法が利用不可になる場合は Stripe から通知されるため、コードで外部の支払い方法をすぐに削除する必要があります。これに失敗すると、外部の支払い方法が顧客に表示されなくなります。

## 利用可能な外部の支払い方法

以下の外部の支払い方法を表示できます。該当する外部の支払い方法タイプをコード内でお使いください。

| 地域         | 決済手段          | 外部の支払い方法タイプ                         |
| ---------- | ------------- | ----------------------------------- |
| AMER       | Interac       | `external_interac`                  |
| APAC       | au PAY        | `external_au_pay`                   |
| APAC       | atone         | `external_atone`                    |
| APAC       | Touch’n Go    | `external_tng_ewallet`              |
| APAC       | ソフトバンクまとめて支払い | `external_softbank_carrier_payment` |
| APAC       | Toss Pay      | `external_toss_pay`                 |
| APAC       | Laybuy        | `external_laybuy`                   |
| APAC       | Bank Pay      | `external_bank_pay`                 |
| APAC       | auかんたん決済      | `external_au_easy_payment`          |
| APAC       | BitCash       | `external_bitcash`                  |
| APAC       | Azupay        | `external_azupay`                   |
| APAC       | d払い           | `external_dbarai`                   |
| APAC       | FamiPay       | `external_famipay`                  |
| APAC       | GCash         | `external_gcash`                    |
| APAC       | GrabPay Later | `external_grabpay_later`            |
| APAC       | MoMo          | `external_momo`                     |
| APAC       | NET CASH      | `external_net_cash`                 |
| APAC       | Octopus       | `external_octopus`                  |
| APAC       | Paidy         | `external_paidy`                    |
| APAC       | PayPay        | `external_paypay`                   |
| APAC       | PlanPay       | `external_planpay`                  |
| APAC       | ペイジー          | `external_pay_easy`                 |
| APAC       | 楽天ペイ          | `external_rakuten_pay`              |
| APAC       | メルペイ          | `external_merpay`                   |
| APAC       | WebMoney      | `external_webmoney`                 |
| APAC、ヨーロッパ | Shopback Pay  | `external_shopback_pay`             |
| ヨーロッパ      | Aplazame      | `external_aplazame`                 |
| ヨーロッパ      | Bizum         | `external_bizum`                    |
| ヨーロッパ      | Divido        | `external_divido`                   |
| ヨーロッパ      | Fonix         | `external_fonix`                    |
| ヨーロッパ      | Iwocapay      | `external_iwocapay`                 |
| ヨーロッパ      | KBC           | `external_kbc`                      |
| ヨーロッパ      | Nexi Pay      | `external_nexi_pay`                 |
| ヨーロッパ      | Oney          | `external_oney`                     |
| ヨーロッパ      | Payconiq      | `external_payconiq`                 |
| ヨーロッパ      | PayPo         | `external_paypo`                    |
| ヨーロッパ      | Sofinco       | `external_sofinco`                  |
| ヨーロッパ      | Postepay      | `external_postepay`                 |
| ヨーロッパ      | PostFinance   | `external_postfinance`              |
| ヨーロッパ      | Scalapay      | `external_scalapay`                 |
| ヨーロッパ      | TrueLayer     | `external_truelayer`                |
| ヨーロッパ      | Walley        | `external_walley`                   |
| ヨーロッパ      | YounitedPay   | `external_younited_pay`             |
| グローバル      | LINE Pay      | `external_line_pay`                 |
| グローバル      | PaySafeCard   | `external_paysafecard`              |
| グローバル      | Samsung Pay   | `external_samsung_pay`              |
| グローバル      | Sezzle        | `external_sezzle`                   |
| LATAM      | Dapp          | `external_dapp`                     |
| LATAM      | PicPay        | `external_picpay`                   |
| MEA        | Tabby         | `external_tabby`                    |
| MEA        | Benefit       | `external_benefit`                  |
| MEA        | Fawry         | `external_fawry`                    |