Add a payment method

To integrate third-party payment providers, you can use the extensibility features provided by the checkout drop-in component. This component allows you to customize the list of payment methods shown during the checkout process using slots.

Step-by-step

This tutorial provides a step-by-step guide for integrating the Braintree payment provider with the Commerce boilerplate template. You can use these steps as a reference to integrate other payment providers as well.

Prerequisites

For this tutorial, you must configure the Braintree extension on your Adobe Commerce backend before integrating it with the Commerce boilerplate template. The Braintree extension is bundled with Adobe Commerce and can be configured in the Admin.

If you choose to integrate with a different payment provider, consider the following:

The provider must be supported by Adobe Commerce.
The provider likely offers an extension that you must install and configure on your Adobe Commerce backend.

Add the Braintree client SDK

To integrate the Braintree payment provider with the Commerce boilerplate template, you must add the Braintree client SDK to your project.

HTML element
Import declaration

Use the following script tag to add the Braintree client SDK to an HTML file.

<script src="https://js.braintreegateway.com/web/dropin/1.43.0/js/dropin.js"></script>

Use the following import declaration to add the Braintree client SDK directly to the commerce-checkout.js block file.

import 'https://js.braintreegateway.com/web/dropin/1.43.0/js/dropin.js';

Define a custom handler

Create a braintreeInstance variable to manage the Braintree drop-in instance.
```
let braintreeInstance;
```

Update the PaymentMethods container to include a custom handler for the Braintree payment method and set setOnChange to false to prevent automatic calls to the setPaymentMethod function on change.

CheckoutProvider.render(PaymentMethods, {
  setOnChange: {
    braintree: false,
  },
  slots: {
    Handlers: {
      braintree: async (ctx) => {
        const container = document.createElement('div');

        window.braintree.dropin.create({
          authorization: 'sandbox_g42y39zw_348pk9cgf3bgyw2b',
          container,
        }, (err, dropinInstance) => {
          if (err) {
            console.error(err);
          }

          braintreeInstance = dropinInstance;
        });

        ctx.replaceHTML(container);
      },
    },
  },
})($paymentMethods)

Handle the payment method

Implement the Braintree payment logic within the onPlaceOrder handler of the PlaceOrder container. This involves processing the payment using the Braintree nonce.

CheckoutProvider.render(PlaceOrder, {
  handleValidation: () => {
    // validation handlers skipped
  },
  onPlaceOrder: async (ctx) => {
    await displayOverlaySpinner();

    const paymentMethodCode = ctx.code;

    try {
      switch (paymentMethodCode) {
        case 'braintree': {
          braintreeInstance.requestPaymentMethod(async (err, payload) => {
            if (err) {
              removeOverlaySpinner();
              console.error(err);
              return;
            }

            await checkoutApi.setPaymentMethod({
              code: 'braintree',
              braintree: {
                is_active_payment_token_enabler: false,
                payment_method_nonce: payload.nonce,
              },
            });

            await checkoutApi.placeOrder();

            removeOverlaySpinner();
          });

          break;
        }

        default: {
          await checkoutApi.placeOrder();
          removeOverlaySpinner();
        }
      }
    } catch (error) {
      removeOverlaySpinner();
      throw error;
    }
  },
})($placeOrder)