能否为Payment Request API添加「货到付款」选项？是否可通过methodData实现？

Great question! Let's break this down step by step, like we're troubleshooting together:

1. 能否添加「货到付款（Cash on Delivery）」选项？ #

Absolutely! The Payment Request API is designed to be flexible enough to support offline payment methods like COD, even though it’s built mainly for electronic payments. Since COD involves in-person payment after delivery, the API’s role here is to let users select this option, capture necessary details (like their shipping address), and pass that info to your backend for order processing.

2. 能否通过methodData实现这一需求？ #

Yes, methodData is exactly the right tool for this job. Here’s how to approach it:

• supportedMethods: Use a custom, unique identifier (usually a URL tied to your merchant domain) to represent COD—this doesn’t need to be a live endpoint, just a string that sets it apart from other payment methods.
• data: Include metadata to show clear info to users, like the payment method name, description, or requirements (e.g., needing a valid shipping address).

Example Code Snippet #

// Define payment methods including COD
const paymentMethods = [
  {
    supportedMethods: 'https://your-store.com/payment-methods/cod',
    data: {
      displayName: '货到付款（Cash on Delivery）',
      description: '签收时支付现金或移动支付',
      requiresShipping: true
    }
  },
  // Add other payment methods (e.g., credit cards)
  {
    supportedMethods: 'basic-card',
    data: {
      supportedNetworks: ['visa', 'mastercard']
    }
  }
];

// Set up payment details
const paymentDetails = {
  total: {
    label: '订单总价',
    amount: { currency: 'CNY', value: '129.90' }
  }
};

// Initialize Payment Request
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails);

// Handle user interaction
paymentRequest.show()
  .then(paymentResponse => {
    // Check if user selected COD
    if (paymentResponse.methodName === 'https://your-store.com/payment-methods/cod') {
      // Capture shipping address and send to your backend
      console.log('COD selected. Shipping address:', paymentResponse.shippingAddress);
      // Mark the payment as "completed" (since COD is handled offline)
      return paymentResponse.complete('success');
    } else {
      // Process other payment methods (e.g., card payments)
      return paymentResponse.complete('success');
    }
  })
  .catch(error => {
    console.error('Payment request failed:', error);
    // Fallback to a traditional payment form if needed
  });

Key Notes to Keep in Mind #

• Custom Identifier: The supportedMethods URL is just a unique string—you don’t need to host anything there. It’s purely for distinguishing your COD option from others.
• User Clarity: Make sure the data object includes clear labels and descriptions so users understand exactly what COD entails (like when they’ll pay, or accepted payment types).
• Backend Handling: Your server will need to handle COD orders separately—marking them as "awaiting delivery/payment" and updating status once the transaction is completed offline.
• Fallback: Always include a backup (like a regular payment form) for browsers that don’t support the Payment Request API.

内容的提问来源于stack exchange，提问作者Kloot