WDCardField Example

WDCardField is a field with similar properties to UITextField, but specialized for collecting card data. It manages multiple UITextFields under the hood to collect this data. It's designed to fit on a single line, and from a design perspective can be used anywhere a UITextField would be appropriate.

1. Create WDCardField programatically or in XIB/Storyboard and keep reference to instance in your UIViewController

   \@interface PaymentViewController UIViewController<WDCardFieldDelegate>
   
   \@property (nonatomic, weak) IBOutlet WDCardField *cardField;
   \@property (nonatomic, weak) IBOutlet UIButton *paymentButton;
   \@property (nonatomic, strong) WDClient *client;
   
   @end

2. Initialize WDCardField with WDCardPayment:

   @implementation PaymentViewController
   
   - (void)viewDidLoad {
       WDCardPayment *payment = [[WDCardPayment alloc] initWithAmount:[NSDecimalNumber decimalNumberWithMantissa:1275 exponent:-2 isNegative:NO]
                                                       amountCurrency:WDCurrencyEUR
                                                      transactionType:WDTransactionTypePurchase];
       WDCard *card = nil;
       WDCardToken *token = nil;
       if (shouldCollectSecurityCodeOnly) {
           token = [WDCardToken new];
           token.tokenID = @"4585779929881111";
           token.maskedAccountNumber = @"444433******1111";
   
           // It is convenient to set the card data if you collect security code only. According card brand security code is validated.
           card = [WDCard new];
           card.brand = WDCardBrandVisa;
           card.expiryDate = [NSDate date];
       }
       WDCardField *cardField = self.cardField;
       cardField.cardPayment = [self buildPaymentWithToken:token];
       cardField.card = card;
       cardField.delegate = self; // it can be set via XIB as well
   
       // initalize WDClient instance
       self.client = [[WDClient alloc] initWithEnvironment:WDEnvironmentTEST];
   }

3. Implement protocol WDCardFieldDelegate to handle user actions listed in WDCardFieldState :

   #pragma mark - WDCardFieldDelegate
   
   - (void)cardField:(WDCardField *)cardField didChangeState:(WDCardFieldState)state {
       // simple data validation
       self.paymentButton.enabled = cardField.valid;
   
       // you can improve UX by handling state and showing hints to user
   }

4. Make the payment

   #pragma mark - Payment Button action
   
   - (IBAction)makePayment:(UIButton *)sender {
       WDPayment *payment = self.cardField.cardPayment;
   
       // The data can be created in advance requestTimestamp expiration is 30 mins.
       payment.merchantAccountID = merchantAccountID;   // provided by support
       payment.requestID = [[NSUUID UUID] UUIDString];  // generated on server unique to merchant
       payment.requestTimestamp = [NSDate date];        // generated on server
       payment.requestSignature = signature;            // generated on server
   
       // Create block to handle response
       WDCompletionBlock completionBlock = ^(WDPaymentResponse *_Nullable response, NSError *_Nullable error) {
           if (error) {
               WDErrorCode errorCode = error.code;
               // handle error
               return;
           }
           // handle success
       }];
   
       // Trigger the payment
       [self.client makePayment:payment withCompletion:completionBlock];
   }
   
   @end