Add a payment method

The Checkout drop-in component provides extensibility features for integrating third-party payment providers. Use slots to customize the list of payment methods shown during the checkout process.

Step-by-step

This tutorial walks you through integrating Braintree as a payment provider with the Commerce boilerplate template. While we use Braintree as an example, you can adapt these same steps for other payment providers.

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.

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

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

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

Define a custom handler

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

Update the PaymentMethods container to include a custom handler for the Braintree payment method. Set autoSync to false to prevent automatic calls to the setPaymentMethod function when the payment method changes.

1
CheckoutProvider.render(PaymentMethods, {
2
  slots: {
3
    Methods: {
4
      braintree: {
5
        autoSync: false,
6
        render: async (ctx) => {
7
          const container = document.createElement('div');
8

9
          window.braintree.dropin.create({
10
            authorization: 'sandbox_cstz6tw9_sbj9bzvx2ngq77n4',
11
            container,
12
          }, (err, dropinInstance) => {
13
            if (err) {
14
              console.error(err);
15
            }
16

17
            braintreeInstance = dropinInstance;
18
          });
19

20
          ctx.replaceHTML(container);
21
        },
22
      },
23
    },
24
  },
25
})($paymentMethods),

Handle the payment method

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

1
CheckoutProvider.render(PlaceOrder, {
2
  handlePlaceOrder: async ({ cartId, code }) => {
3
    await displayOverlaySpinner();
4
    try {
5
      switch (code) {
6
        case 'braintree': {
7
          braintreeInstance.requestPaymentMethod(async (err, payload) => {
8
            if (err) {
9
              removeOverlaySpinner();
10
              console.error(err);
11
              return;
12
            }
13

14
            await checkoutApi.setPaymentMethod({
15
              code: 'braintree',
16
              braintree: {
17
                is_active_payment_token_enabler: false,
18
                payment_method_nonce: payload.nonce,
19
              },
20
            });
21

22
            await orderApi.placeOrder(cartId);
23
          });
24

25
          break;
26
        }
27

28
        default: {
29
          // Place order
30
          await orderApi.placeOrder(cartId);
31
        }
32
      }
33
    } catch (error) {
34
      console.error(error);
35
      throw error;
36
    } finally {
37
      await removeOverlaySpinner();
38
    }
39
  },
40
})($placeOrder),

Example

See blocks/commerce-checkout-braintree in the demos branch of the boilerplate repository for complete JS and CSS code for the Braintree payment method checkout flow.