Skip to content
Adobe Commerce Storefront Logo Adobe Commerce Storefront

Search is only available in production builds. Try building and previewing the site to test it out locally.
Tutorials

Add a custom payment method

What you’ll edit or create

Section titled “What you’ll edit or create”
  • Edit the checkout block — blocks/commerce-checkout/commerce-checkout.js
  • Edit the Methods slot on the PaymentMethods container
  • Edit the handlePlaceOrder callback on the PlaceOrder container

What you’ll build

Section titled “What you’ll build”

By the end of this tutorial, you’ll have:

  • A Braintree handler added to the Methods slot of the PaymentMethods container in commerce-checkout.js, with autoSync set to false.
  • The Braintree drop-in UI rendered inline when a shopper selects Braintree during checkout.
  • Braintree payment processing wired into the handlePlaceOrder callback of the PlaceOrder container, so orders complete using the Braintree payment nonce.

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

Section titled “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

Section titled “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

Section titled “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.

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.min.js"></script>

Define a custom handler

Section titled “Define a custom handler”

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

    let braintreeInstance;

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

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

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

                braintreeInstance = dropinInstance;
              });
    

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

Handle the payment method

Section titled “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 .

CheckoutProvider.render(PlaceOrder, {
  handlePlaceOrder: async ({ cartId, code }) => {
    await displayOverlaySpinner();
    try {
      switch (code) {
        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 orderApi.placeOrder(cartId);
          });


          break;
        }


        default: {
          // Place order
          await orderApi.placeOrder(cartId);
        }
      }
    } catch (error) {
      console.error(error);
      throw error;
    } finally {
      await removeOverlaySpinner();
    }
  },
})($placeOrder),
Section titled “Related”