Payment Services Functions

The Payment Services drop-in provides API functions that enable you to programmatically control behavior and integrate with Adobe Commerce backend services.

Version: 4.2.1

Function	Description
submitCreditCard	Validates and submits the currently-rendered CreditCard form.

submitCreditCard

Validates and submits the currently-rendered CreditCard form, placing the payment order for the cart identified by the latest cart/data event. That event must have fired at least once with the shopper’s cart before calling this function.

function submitCreditCard(): Promise<void>

The returned promise resolves only when the payment flow finishes successfully. It rejects otherwise, guaranteeing a specific PaymentServicesError code in these cases:

Condition	PaymentServicesError.code
The page has no rendered CreditCard form to submit.	"payment-services/credit-card-form-not-rendered"
The rendered CreditCard form has one or more invalid fields. The first invalid field is focused automatically.	"payment-services/credit-card-form-invalid"

Events

Does not emit any drop-in events.

Returns

Returns Promise<void>.

Example

import * as paymentsApi from '@dropins/storefront-payment-services/api.js';

const $placeOrderButton = document.getElementById('place-order');

$placeOrderButton.onclick = () => {
  paymentsApi.submitCreditCard()
    .then(() => {
      console.log('Credit card submitted successfully.');
    })
    .catch((error) => {
      if (error.code === 'payment-services/credit-card-form-invalid') {
        return;
      }
      console.error(error.code, error.message);
    });
};

Data Models

The following data models are used by functions in this drop-in.

PaymentServicesError

Common error type for every error the Payment Services drop-in’s public API functions can throw or reject with.

Property	Type	Description
name	string	Represents the name for the type of error. If error.localized is present, this is a translated, user-facing string intended for UI display, for example, “Network error.”
message	string	Error message. If error.localized is present, this is a translated, user-facing string intended for UI display, for example, “An unexpected network error occurred.”
code	string	A stable identifier in the format "payment-services/string-code". While error.name and error.message for a given error code can change, code will remain the same between backward-compatible versions of the Payment Services drop-in.
localized	true?	If present, error.name and error.message are user-friendly, localized strings intended for UI display.