Stripe Payments UI
Stripe Payments UI is a framework for building custom payment forms in iOS applications. It provides a set of pre-built UI components and handles the complex logic required for securely collecting payment information.
Features
- Securely collect payment information
- Customizable UI components
- Support for various payment methods (credit cards, Apple Pay, etc.)
- Error handling and validation
- Easy integration with Stripe API
Installation
To use Stripe Payments UI in your iOS project, follow these steps:
- Install the Stripe Payments UI library using Cocoapods or manually.
- Visit the Stripe Dashboard to generate API credentials for your account.
- Add your API keys to your project’s configuration.
- Import the necessary modules and classes in your Swift code.
- Create a payment form and customize it as needed.
- Handle payment submission and response using provided callback methods.
Usage
Stripe Payments UI provides a set of UI components that you can use to build your payment form:
1. Card Number Field
The Card Number Field is used to input the customer’s credit card number. It includes validation to ensure the number is entered correctly.
let cardNumberField = STPPaymentCardTextField()
2. Expiration Date Field
The Expiration Date Field is used to enter the expiration date of the customer’s credit card. It also includes validation to ensure a valid date is entered.
let expiryDateField = STPExpiryDateTextField()
3. CVC Field
The CVC Field is used to input the customer’s card verification code. It validates that the entered CVC matches the required format for the card type.
let cvcField = STPCCVTextField()
4. Postal Code Field
The Postal Code Field is used to collect the customer’s postal code associated with their credit card billing address.
let postalCodeField = STPPostalCodeTextField()
These UI components can be added to your payment form, and you can customize their appearance and behavior as needed.
Once the payment form is ready, you can handle the payment submission and response using the provided callback methods:
func submitPayment() {
// Validate the input fields
guard cardNumberField.isValid,
expiryDateField.isValid,
cvcField.isValid,
postalCodeField.isValid
else {
displayValidationError()
return
}
// Create a PaymentMethod using the entered card details and additional information
let cardParams = STPPaymentMethodCardParams()
cardParams.number = cardNumberField.cardNumber
cardParams.expMonth = expiryDateField.expirationMonth
cardParams.expYear = expiryDateField.expirationYear
cardParams.cvc = cvcField.cvc
cardParams.address = STPPaymentMethodAddress(name: "John Doe",
line1: "123 Main Street",
city: "New York",
state: "NY",
postalCode: postalCodeField.postalCode,
country: "US")
let paymentMethodParams = STPPaymentMethodParams(card: cardParams, billingDetails: nil, metadata: nil)
// Submit the payment to Stripe using the Payment Method
STPAPIClient.shared().createPaymentMethod(with: paymentMethodParams) { (paymentMethod, error) in
if let error = error {
self.handlePaymentError(error)
} else if let paymentMethod = paymentMethod {
self.handlePaymentSuccess(paymentMethod)
}
}
}
Customization
Stripe Payments UI allows you to customize various aspects of the payment form.
Appearance
You can customize the appearance of the payment form components by modifying their properties:
cardNumberField.borderWidth = 1
cardNumberField.borderColor = .gray
cardNumberField.cornerRadius = 5
expiryDateField.placeholderColor = .lightGray
expiryDateField.font = .systemFont(ofSize: 18)
cvcField.keyboardAppearance = .dark
cvcField.textColor = .white
postalCodeField.backgroundColor = .yellow
postalCodeField.textInsets = UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)
Localization
You can customize the labels and error messages displayed to users by localizing the strings used in the payment form:
cardNumberField.numberPlaceholder = NSLocalizedString("Card Number", comment: "")
expiryDateField.placeholder = NSLocalizedString("Expiration Date", comment: "")
cvcField.placeholder = NSLocalizedString("CVC", comment: "")
postalCodeField.placeholder = NSLocalizedString("Postal Code", comment: "")
cardNumberField.invalidNumberErrorMessage = NSLocalizedString("Invalid card number", comment: "")
expiryDateField.invalidExpirationDateErrorMessage = NSLocalizedString("Invalid expiration date", comment: "")
cvcField.invalidCVCErrorMessage = NSLocalizedString("Invalid CVC", comment: "")
postalCodeField.invalidPostalCodeErrorMessage = NSLocalizedString("Invalid postal code", comment: "")
Resources
Here are some additional resources to help you get started with Stripe Payments UI: