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.

Function	Description
submitCreditCard	Submits payment for a new credit or debit card or the selected saved card.

submitCreditCard

Submits payment for the selected credit or debit card. What it does depends on the selected payment method code:

• With CREDIT_CARD, validates and submits the rendered CreditCard form.
• With VAULT, submits the selected saved card without requiring a new-card form. Use VaultedCreditCard to display the saved card details.

Wait for the Payment Services drop-in to finish initializing before calling this function. The latest checkout/updated event must contain selectedPaymentMethod.code. If no update has fired, the function uses checkout/initialized instead. The function reads the cart ID from the latest cart/data event, which must have fired at least once 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 Payment Services drop-in has not finished initializing.	"payment-services/dropin-not-initialized"
The selected payment method is neither CREDIT_CARD nor VAULT.	"payment-services/unsupported-payment-method"
The selected payment method is missing, or a saved-card payment has no cart ID.	"payment-services/missing-cart-data"
A new-card payment 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.