Integrate the Yourpay mPOS PayButton (iOS)

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 :"<your-app-target>" do pod 'payworks', '2.28.0' pod 'payworks.paybutton', '2.28.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, 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<MPTransactionParametersOptionals> _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]; }

Use a real card reader

You can retrieve your merchantIdentifier and merchantSecretKey through Yourpays Customer Data 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:

merchantIdentifier and merchantSecretKey. They identify to which merchant the payment is routed.
Whether the merchant is a TEST or LIVE merchant.
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

You can choose the following colors:

navigationBarTint: The navigation bar’s tint
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.

Was this article helpful?

Like 0 Dislike 0