ReactJs中Adyen DropIn显示存储卡片购物者姓名的配置关键

Adyen Web DropIn没有直接的开关配置项来启用已存储卡片的持卡人姓名显示，但可以通过自定义渲染已存储支付方式的组件来实现。

实现步骤： #

• 在DropIn的配置中，针对card类型的支付方法，自定义storedPaymentMethod的渲染函数，手动添加持卡人姓名的展示逻辑。
• 确保从Adyen API返回的storedPaymentMethods数据中包含holderName字段（需要在存储卡片时正确提交该信息，Adyen才会保存并返回）。

React项目示例代码： #

import { AdyenDropIn } from '@adyen/react';

// 其他核心配置（clientKey、environment等）省略
<AdyenDropIn
  clientKey="YOUR_CLIENT_KEY"
  environment="test"
  paymentMethodsResponse={paymentMethodsResponse}
  onSubmit={handleSubmit}
  paymentMethodsConfiguration={{
    card: {
      storedPaymentMethod: {
        // 自定义渲染已存储卡片的UI
        renderer: ({ storedPaymentMethod, onClick }) => (
          <div 
            onClick={onClick} 
            style={{ 
              padding: '12px', 
              border: '1px solid #e0e0e0', 
              borderRadius: '4px',
              cursor: 'pointer',
              marginBottom: '8px'
            }}
          >
            <div>**** {storedPaymentMethod.lastFour}</div>
            {/* 展示持卡人姓名 */}
            <div style={{ fontSize: '14px', color: '#666', marginTop: '4px' }}>
              {storedPaymentMethod.holderName}
            </div>
            <div style={{ fontSize: '14px', color: '#666', marginTop: '4px' }}>
              到期时间 {storedPaymentMethod.expiryMonth}/{storedPaymentMethod.expiryYear.slice(-2)}
            </div>
          </div>
        )
      }
    }
  }}
/>

关键注意事项： #

• 如果API返回的storedPaymentMethod中没有holderName，请检查卡片存储流程：在首次添加卡片时，是否在支付请求中提交了holderName参数，并且Adyen后台已正确保存该信息。

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