如何自定义 STPPaymentCardTextField.Representable

Question

我已经使用以下方法成功创建了支付卡文本字段：

STPPaymentCardTextField.Representable(paymentMethodParams: $paymentMethodParams)

不过，我想去掉边框。

使用以下方法添加边框似乎只是在默认边框上添加了另一个边框。

STPPaymentCardTextField.Representable(paymentMethodParams: $paymentMethodParams)
    .border(Color.red, width: 1)

我也试过将宽度更改为 0，但边框没有消失。

感谢任何帮助！ :)

Answer 1

基本上，您可以重复使用 Stripe 提供的 SwiftUI 代码和 add/remove 您自己的 color/customizations 代码。以下将生成没有 border 颜色的 STPPaymentCardTextField。我们所要做的就是在 makeUIView(context:) 方法中添加 paymentCardField.borderColor = nil。

/// A SwiftUI representation of an STPPaymentCardTextField.
public struct RepresentableField: UIViewRepresentable {
    @Binding var paymentMethodParams: STPPaymentMethodParams?

    /// Initialize a SwiftUI representation of an STPPaymentCardTextField.
    /// - Parameter paymentMethodParams: A binding to the payment card text field's contents.
    /// The STPPaymentMethodParams will be `nil` if the payment card text field's contents are invalid.
    public init(paymentMethodParams: Binding<STPPaymentMethodParams?>) {
        _paymentMethodParams = paymentMethodParams
    }

    public func makeCoordinator() -> Coordinator {
        return Coordinator(parent: self)
    }

    public func makeUIView(context: Context) -> STPPaymentCardTextField {
        let paymentCardField = STPPaymentCardTextField()
        paymentCardField.borderColor = nil //  set this to nil if you don't want a border color
        if let cardParams = paymentMethodParams?.card {
            paymentCardField.cardParams = cardParams
        }
        if let postalCode = paymentMethodParams?.billingDetails?.address?.postalCode {
            paymentCardField.postalCode = postalCode
        }
        if let countryCode = paymentMethodParams?.billingDetails?.address?.country {
            paymentCardField.countryCode = countryCode
        }
        paymentCardField.delegate = context.coordinator
        paymentCardField.setContentHuggingPriority(.required, for: .vertical)

        return paymentCardField
    }

    public func updateUIView(_ paymentCardField: STPPaymentCardTextField, context: Context) {
        if let cardParams = paymentMethodParams?.card {
            paymentCardField.cardParams = cardParams
        }
        if let postalCode = paymentMethodParams?.billingDetails?.address?.postalCode {
            paymentCardField.postalCode = postalCode
        }
        if let countryCode = paymentMethodParams?.billingDetails?.address?.country {
            paymentCardField.countryCode = countryCode
        }
    }

    public class Coordinator: NSObject, STPPaymentCardTextFieldDelegate {
        var parent: RepresentableField
        init(parent: RepresentableField) {
            self.parent = parent
        }

        public func paymentCardTextFieldDidChange(_ cardField: STPPaymentCardTextField) {
            let paymentMethodParams = STPPaymentMethodParams(
                card: cardField.cardParams, billingDetails: nil, metadata: nil)
            if !cardField.isValid {
                parent.paymentMethodParams = nil
                return
            }
            if let postalCode = cardField.postalCode, let countryCode = cardField.countryCode {
                let billingDetails = STPPaymentMethodBillingDetails()
                let address = STPPaymentMethodAddress()
                address.postalCode = postalCode
                address.country = countryCode
                billingDetails.address = address
                paymentMethodParams.billingDetails = billingDetails
            }
            parent.paymentMethodParams = paymentMethodParams
        }
    }
}

如何自定义 STPPaymentCardTextField.Representable

How to customize STPPaymentCardTextField.Representable

ios

stripe-payments

swiftui