# 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.

## Dashboard considerations

[PaymentIntents](https://docs.stripe.com/api/payment_intents.md) for transactions processed with an external payment method provider have an  `incomplete` status in the Stripe Dashboard. Stripe isn’t involved in external payment method transactions and can’t determine the status of these transactions.

If you [collect payment details before creating an Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md), you won’t see any `incomplete` transactions in the Stripe Dashboard for transactions that were processed with an external payment method provider.

## External payment methods disclaimer

You can use the Stripe Payment Element to show some external payment methods that aren’t supported by Stripe but that you directly integrate with. When customers choose an external payment method, they’re redirected to a URL that you configure for the external payment method. You acknowledge that:

1. External payment methods aren’t offered nor supported by Stripe. The operation and support of external payment methods is provided by the external payment method provider.
1. You’re responsible for maintaining a direct integration with the external payment method provider.
1. You need to maintain an agreement with the external payment method provider and are responsible for complying with your agreements with each external payment method provider.
1. You’re responsible for obtaining all necessary rights to use the external payment method provider’s marks and logos within your checkout as described in these docs.
1. Stripe isn’t responsible for the processing of any transactions with any external payment method provider including, for example, any charges, refunds, disputes, settlements or funds flows.
1. You or the external payment method provider are responsible for the completion of the purchase flow after a customer has selected an external payment method, including, for example, the order confirmation and reconciliation of orders.
1. You’re responsible for properly configuring the redirect URL for the external payment method.
1. You must immediately remove any external payment methods in the event your agreements with any external payment method provider terminate or Stripe removes the availability of an external payment method.
1. You’re only permitted to integrate with and present in the Payment Element the external payment methods listed in this guide.
1. You’re solely responsible for making sure that buyers are redirected correctly to their chosen external payment method.

### Ongoing availability of external payment methods

Stripe might at any time decide to remove the availability of any payment method as an external payment method. Stripe will notify you of any removal of an external payment method that you’re using, and you must immediately remove the external payment method in your code. Failure to do so will result in the external payment method not rendering to your customers.

## Available external payment methods

You can display the following external payment methods. You must use the corresponding external payment method type in your code.

| Region       | Payment method                            | External payment method type        |
| ------------ | ----------------------------------------- | ----------------------------------- |
| AMER         | Interac                                   | `external_interac`                  |
| APAC         | au PAY                                    | `external_au_pay`                   |
| APAC         | atone                                     | `external_atone`                    |
| APAC         | Touch’n Go                                | `external_tng_ewallet`              |
| APAC         | ソフトバンクまとめて支払い (Softbank carrier payments) | `external_softbank_carrier_payment` |
| APAC         | Toss Pay                                  | `external_toss_pay`                 |
| APAC         | Laybuy                                    | `external_laybuy`                   |
| APAC         | Bank Pay                                  | `external_bank_pay`                 |
| APAC         | auかんたん決済 (au easy payments)               | `external_au_easy_payment`          |
| APAC         | BitCash                                   | `external_bitcash`                  |
| APAC         | Azupay                                    | `external_azupay`                   |
| APAC         | d払い (d-barai)                             | `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         | ペイジー (Pay-easy)                           | `external_pay_easy`                 |
| APAC         | 楽天ペイ (Rakuten Pay)                        | `external_rakuten_pay`              |
| APAC         | メルペイ (Merpay)                             | `external_merpay`                   |
| APAC         | WebMoney                                  | `external_webmoney`                 |
| APAC, Europe | Shopback Pay                              | `external_shopback_pay`             |
| Europe       | Aplazame                                  | `external_aplazame`                 |
| Europe       | Bizum                                     | `external_bizum`                    |
| Europe       | Divido                                    | `external_divido`                   |
| Europe       | Fonix                                     | `external_fonix`                    |
| Europe       | Iwocapay                                  | `external_iwocapay`                 |
| Europe       | KBC                                       | `external_kbc`                      |
| Europe       | Nexi Pay                                  | `external_nexi_pay`                 |
| Europe       | Oney                                      | `external_oney`                     |
| Europe       | Payconiq                                  | `external_payconiq`                 |
| Europe       | PayPo                                     | `external_paypo`                    |
| Europe       | Sofinco                                   | `external_sofinco`                  |
| Europe       | Postepay                                  | `external_postepay`                 |
| Europe       | PostFinance                               | `external_postfinance`              |
| Europe       | Scalapay                                  | `external_scalapay`                 |
| Europe       | TrueLayer                                 | `external_truelayer`                |
| Europe       | Walley                                    | `external_walley`                   |
| Europe       | YounitedPay                               | `external_younited_pay`             |
| Global       | LINE Pay                                  | `external_line_pay`                 |
| Global       | paysafecard                               | `external_paysafecard`              |
| Global       | Samsung Pay                               | `external_samsung_pay`              |
| Global       | Sezzle                                    | `external_sezzle`                   |
| LATAM        | Dapp                                      | `external_dapp`                     |
| LATAM        | PicPay                                    | `external_picpay`                   |
| MEA          | Tabby                                     | `external_tabby`                    |
| MEA          | Benefit                                   | `external_benefit`                  |
| MEA          | Fawry                                     | `external_fawry`                    |