Login

Contact

Integrate the PayButton

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'

target :"" do
    pod 'payworks',           '2.18.0'
    pod 'payworks.paybutton', '2.18.0'
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 Shuttle / M007 / M010, use the following parameters:
    // MPAccessoryParameters *ap = [MPAccessoryParameters externalAccessoryParametersWithFamily:MPAccessoryFamilyMiuraMPI
    //                                                                                 protocol:@"com.miura.shuttle"
    //                                                                                optionals:nil];


    // When using the WiFi Miura M010, use the following parameters:
    // MPAccessoryParameters *ap = [MPAccessoryParameters tcpAccessoryParametersWithFamily:MPAccessoryFamilyMiuraMPI
    //                                                                             remote:@"192.168.254.123"
    //                                                                               port:38521
    //                                                                          optionals:nil];

    MPTransactionParameters *tp = [MPTransactionParameters chargeWithAmount:[NSDecimalNumber decimalNumberWithString:@"5.00"]
                                                                   currency:MPCurrencyEUR
                                                                  optionals:^(id<MPTransactionParametersOptionals>  _Nonnull optionals) {
                                                                      optionals.subject = @"Bouquet of Flowers";
                                                                      optionals.customIdentifier = @"yourReferenceForTheTransaction";
                                                                  }];

    ui.configuration.terminalParameters = ap;
    ui.configuration.summaryFeatures = MPUMposUiConfigurationSummaryFeatureSendReceiptViaEmail;
    // Add this line, if you do also want to offer printed receipts
    //ui.configuration.printerParameters =
    //ui.configuration.summaryFeatures |= MPUMposUiConfigurationSummaryFeaturePrintReceipt;
    // Add this if you would like to collect the customer signature on the 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.

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.

  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:<TEST or LIVE, loaded from your backend>
                merchantIdentifier:<MerchantIdentifier loaded from your backend>
                    merchantSecret:<MerchantSecretKey loaded from your backend>];
                
            

Customize the PayButton

UI customization: change the colors

12

You can choose the following colors:

  1. navigationBarTint: The navigation bar's tint
  2. navigationBarTextColor: The color of the text in the navigation bar

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.

If you choose to remove this, you must implement another way for the merchant to send out a receipt. You can either programmatically send the same receipt that the PayButton would send, or send a custom or printed one. For custom and printed receipts, you are required to display specific data. See this page for details.