Integrate the Yourpay PayButton – iPhone

Du er her:
Anslået læsetid: 2 min

Install

Put this in your Podfile and then run pod install:

source 'https://github.com/CocoaPods/Specs.git'
source 'https://bitbucket.org/mpymnt/io.mpymnt.repo.pods.git'
use_frameworks!
target :"<your-app-target>" do
    pod 'payworks',           '2.32.1'
    pod 'payworks.paybutton', '2.32.1'
end

For bluetooth devices like Miura readers , to connect as an external accessory and be able to receive messages while the app is in the background, add additional entries to your Info.plist

  • Key: Supported external accessory protocols (UISupportedExternalAccessoryProtocols), value: com.miura.shuttle (for Miura readers)
  • Key: Required background modes (UIBackgroundModes), value: App communicates with an accessory (external-accessory)

Then, import the header in your view controller:

#import <mpos_ui/mpos_ui.h>

Perform a payment

This is how you start a payment in mock mode:

- (IBAction)paymentButtonClicked:(id)sender {
    MPUMposUi *ui = [MPUMposUi initializeWithProviderMode:MPProviderModeMOCK
                                       merchantIdentifier:@"merchantIdentifier"
                                           merchantSecret:@"merchantSecretKey"];
    
    
    // Start with a mocked card reader:
    MPAccessoryParameters *ap = [MPAccessoryParameters mockAccessoryParameters];

    // When using the Bluetooth Miura, use the following parameters:
    // MPAccessoryParameters *ap = [MPAccessoryParameters externalAccessoryParametersWithFamily:MPAccessoryFamilyMiuraMPI
    //                                                                                 protocol:@"com.miura.shuttle"
    //                                                                                optionals:nil];


    // When using Verifone readers via WiFi or Ethernet, use the following parameters:
    // MPAccessoryParameters *ap = [MPAccessoryParameters tcpAccessoryParametersWithFamily:MPAccessoryFamilyVerifoneVIPA
    //                                                                              remote:@"192.168.254.123"
    //                                                                                port:16107
    //                                                                           optionals:nil];
    
    MPTransactionParameters *tp = [MPTransactionParameters chargeWithAmount:[NSDecimalNumber decimalNumberWithString:@"5.00"]
                                                                   currency:MPCurrencyEUR
                                                                  optionals:^(id  _Nonnull optionals) {
                                                                      optionals.subject = @"Bouquet of Flowers";
                                                                      optionals.customIdentifier = @"yourReferenceForTheTransaction";
                                                                  }];
    
    ui.configuration.terminalParameters = ap;
    ui.configuration.summaryFeatures = MPUMposUiConfigurationSummaryFeatureSendReceiptViaEmail;

    // Add this if you would like to collect the customer signature on a printed merchant receipt
    //ui.configuration.signatureCapture = MPUMposUiConfigurationSignatureCaptureOnReceipt;
    
    
    UIViewController *viewController = [ui createTransactionViewControllerWithTransactionParameters:tp
                                                                                          completed:^(UIViewController * _Nonnull controller, MPUTransactionResult result, MPTransaction * _Nullable transaction)
                                        {
                                            [self dismissViewControllerAnimated:YES completion:NULL];
                                            
                                            UIAlertView* alert = [[UIAlertView alloc] initWithTitle:@"Result"
                                                                                            message:@""
                                                                                           delegate:nil
                                                                                  cancelButtonTitle:nil
                                                                                  otherButtonTitles:@"OK",nil];
                                            
                                            if (result == MPUTransactionResultApproved) {
                                                alert.message = @"Payment was approved!";
                                            } else {
                                                alert.message = @"Payment was declined/aborted!";
                                            }
                                            
                                            [alert show];
                                        }];
    
    
    UINavigationController *modalNav = [[UINavigationController alloc] initWithRootViewController:viewController];
    modalNav.navigationBar.barStyle = UIBarStyleBlack;
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
        modalNav.modalPresentationStyle = UIModalPresentationFullScreen;
    } else { // Show as Form on iPad
        modalNav.modalPresentationStyle = UIModalPresentationFormSheet;
    }
    [self presentViewController:modalNav animated:YES completion:NULL];
}

More information on the completed transaction statuses and what they mean can be found here.

Use a real card reader

You can then retrieve your merchantIdentifier and merchantSecretKey through the API and change the providerMode to MPProviderModeTEST.

Then create the  accessoryParameters with the reader family and connection you want to use.

Load merchant data from your backend

Right now, you have hardcoded the merchantIdentifier and merchantSecretKey. This means that all payments would be routed to the same merchant.

For a live solution, you might want to support multiple merchants, e.g. two different restaurants, to route the payment correctly. To support multiple merchants, store the following data on your backend:

  1. merchantIdentifier and merchantSecretKey. They identify to which merchant the payment is routed. You can create new merchants and get their credentials in the API.
  2. Whether the merchant is a TEST or LIVE merchant.
  3. The reader model the merchant uses.

You can then fetch this data before a transaction and configure the Pay Button correctly:

MPUMposUI *ui = 
    [MPUMposUI
        initializeWithProviderMode:
                merchantIdentifier:
                    merchantSecret:];

Customize the PayButton

UI customization: change the colors

You can choose the following colors:

  1. navigationBarTint: The navigation bar’s tint
  2. navigationBarTextColor: The color of the text in the navigation bar
ui.configuration.appearance.navigationBarTint = [UIColor colorWithRed:0.61 green:0.15 blue:0.69 alpha:1];
ui.configuration.appearance.navigationBarTextColor = [UIColor whiteColor];

Receipt customization

You are required to offer an email or printed payment receipt to the shopper. The PayButton therefore allows the merchant to send an email payment receipt right after a transaction.

You might want to prevent this behavior, e.g. if you send your own receipts already and just want to append the required payment data. You can disable the built-in email receipts by removing MPUMposUiConfigurationSummaryFeatureSendReceiptViaEmail from the summaryFeatures options.

You can either programmatically send the same receipt that the PayButton would send, or send a custom or printed one.