Test Apple Pay on iOS devices

The Apple Pay feature in iOS devices enables purchases, one-click payments, and provides additional security for financial transactions. Browserstack Automate enables you to test Apple Pay on remote iOS devices.

In this guide you will learn about:

• Supported devices
• Setting the Apple Pay capability
• Using JavaScript executor to confirm the payment
• Limitations with Apple Pay

Supported devices

Set the Apple Pay capability

Use the capability values enableApplePay for W3C protocol and browserstack.enableApplePay for JSON wire protocol in your test scripts.

Example:

//Java example
DesiredCapabilities capabilities = new DesiredCapabilities();
HashMap<String, Object> browserstackOptions = new HashMap<String, Object>();
browserstackOptions.put("osVersion", "16");
browserstackOptions.put("deviceName", "iPhone 14");
browserstackOptions.put("enableApplePay", "true");
browserstackOptions.put("nativeWebTap", "true");
capabilities.setCapability("bstack:options", browserstackOptions);

var capabilities = {
	'bstack:options' : {
		"osVersion" : "16",
		"deviceName" : "iPhone 14",
		"enableApplePay" : "true",
		"nativeWebTap" : "true",
	}
}

SafariOptions capabilities = new SafariOptions();
Dictionary<string, object> browserstackOptions = new Dictionary<string, object>();
browserstackOptions.Add("osVersion", "16");
browserstackOptions.Add("deviceName", "iPhone 14");
browserstackOptions.Add("enableApplePay", "true");
browserstackOptions.Add("nativeWebTap", "true");
capabilities.AddAdditionalOption("bstack:options", browserstackOptions);

desired_cap = {
    'bstack:options' : {
        "osVersion" : "16",
        "deviceName" : "iPhone 14",
        "enableApplePay" : "true",
        "nativeWebTap" : "true",
    },
}

capabilities = {
	'bstack:options' => {
		"osVersion" => "16",
		"deviceName" => "iPhone 14",
		"enableApplePay" => "true",
		"nativeWebTap" => "true",
	},
}

DesiredCapabilities desiredCapabilities = new DesiredCapabilities();
caps.setCapability("os_version", "16");
caps.setCapability("device", "iPhone 14");
desiredCapabilities.setCapability("browserstack.enableApplePay","true");
desiredCapabilities.setCapability("browserstack.nativeWebTap","true");

var capabilities = {
    "os_version" : "16",
    "device" : "iPhone 14",
    "browserstack.enableApplePay" : "true",
    "browserstack.nativeWebTap" : "true",
}

SafariOptions capability = new SafariOptions();
capability.AddAdditionalCapability("os_version", "16");
capability.AddAdditionalCapability("device", "iPhone 14");
capability.AddAdditionalCapability("browserstack.enableApplePay", "true");
capability.AddAdditionalCapability("browserstack.nativeWebTap", "true");

desired_cap = {
    "os_version" : "16",
    "device" : "iPhone 14",
    "browserstack.enableApplePay" : "true"
    "browserstack.nativeWebTap" : "true"
}

caps = Selenium::WebDriver::Remote::Capabilities.new
caps["os_version"] = "16"
caps["device"] = "iPhone 14"
caps["browserstack.enableApplePay"] = "true"
caps["browserstack.nativeWebTap"] = "true"

Apple Pay test flow

Your test script must be modified with these custom executors along with the logic to select the UI elements in the webapp that triggers the Apple Pay payment, in the following order.

await browser.url("https://applepaydemo.apple.com/");
    await browser.waitUntil(
      async () => (await browser.getTitle()).match(/Apple/i),
      15000,
      "Title didn't match"
    );
    await driver.switchContext("NATIVE_APP");
    const button = await $('[name="Apple Pay"]');
    await button.click();

  driver.execute_script("browserstack_executor:{
    \"action\":\"applePay\", 
    \"arguments\": {
      \"confirmPayment\" : \"true\"
      }
    }”);

  driver.getKeyboard().sendKeys("123456");

Limitations with Apple Pay

On Browserstack remote iOS devices, testing with Apple Pay is limited to the following geographies: