Initial support for iDEAL payments being completed in Safari instead of the WKWebView

[joshgare]

What changes are you making?

• iDEAL is a Dutch specific payment provider that allows customers to complete their payments using their Dutch bank accounts
• iDEAL uses custom private URL schemes to deeplink from their payment completion page to the customers chosen banking app
• As these URL schemes are private / not public you cannot specify them in the Queried URL Scheme which means it is not possible to launch the banking apps from within a WKWebView within your own app using the Checkout Sheet Kit
• After discussions with Pay.nl / iDEAL they informed us the way to support this is to navigate the user to Safari instead of keeping the user in the WKWebView
• This PR adds a new delegate method to allow Checkout Sheet Kit to notify the main app that the checkout needs Safari to open a specifc URL.
• We implemented this custom version of the SDK and can confirm customers can now complete iDEAL payments
• NB: This is complete workaround given very little information from our client, Pay.nl and iDEAL so we suspect there may be a better more reliable way to do this but thought we would share nevertheless
• Very interested in Shopify's thoughts on this

How to test

• Create a checkout on a Shoify instance with iDEAL payments setup
• Ensure you're shipping to the Netherlands
• Select iDEAL as the payment method
• Choose a Dutch bank
• Select continue to payment button at bottom
• Delegate method should then fire to inform app that Safari should be used to open the given URL

---

Before you merge

Important

• I've added tests to support my implementation
• I have read and agree with the Contribution Guidelines.
• I have read and agree with the Code of Conduct.
• I've updated the README.

---

Checklist for releasing a new version

• I have bumped the version number in the podspec file.
• I have bumped the version number in the README.
• I have added a Changelog entry.

Tip

See the Contributing documentation for instructions on how to publish a new version of the library.

[markmur]

Hey @joshgare 👋

Thanks for the PR. Offsite payments is something we're currently working on.

We implemented this custom version of the SDK and can confirm customers can now complete iDEAL payments.

Can you walk me through the flow here?

I would expect the following, by which the customer would start in the sheet kit, get redirected to iDeal but never get redirected back to your app. Instead they would be redirected to Safari, but since Safari is most likely missing the session cookies, checkout will not render the thank you page.

Does iDeal ever redirect back to your app?

sequenceDiagram
    participant Customer
    participant CheckoutSheetKit
    participant Safari
    participant iDeal

    Customer ->> CheckoutSheetKit: Opens Checkout Sheet
    Customer ->> CheckoutSheetKit: Fills customer details
    Customer ->> CheckoutSheetKit: Chooses iDeal payment method
    Customer ->> CheckoutSheetKit: Clicks "Pay Now"
    CheckoutSheetKit ->> Safari: Redirects to Safari with custom URL scheme
    Safari ->> iDeal: Redirects to iDeal
    Customer ->> iDeal: Completes payment
    iDeal ->> Safari: Redirects back to Safari

Loading

[joshgare]

@markmur your sequence diagram is spot on with how iDEAL works within this PR. You've also spotted the major flaw in this flow which is the user ends up in Safari and not the native app.

It's unlikely to get iDEAL to push back to the native app as they subsequently hand over to a bank's native app e.g. ING. This would then require ING to update their iOS app to include a Queried URL Scheme that allows the banking app to open a Shopify Merchant's native app.

For now, our Dutch client is happy with the flow above as the payment completes and the order is placed. Not perfect, as the user will need return to the app manually.

[joshgare]

@markmur just following up here to see if you have anymore oversight as to what the plan is for offsite payments? do you need any further information from myself?

[markmur]

Hey @joshgare, we've added support for handling custom URL schemes in 3.1.0.

Payment providers such as iDeal use buttons with deep links on their web pages which link to other mobile apps. These links will now be propagated to the checkout lifecycle method, where they will be handled by default:

if UIApplication.shared.canOpenURL(url) {
    /// Allow OS to open URL and route the request
    UIApplication.shared.openURL(url)
}

We've also shipped improvements to the processing page by capturing the completion status of the payment to show the confirmation page.

See the Offsite Payments and Universal Links guides for more information.

Closing this PR for now, but happy to answer any questions you have.

[joshgare]

Thanks @markmur

What are your thoughts on custom url schemes? e.g. if the offsite url returns as random-bank-brand://make-payment/payment-id to launch a native banking app on device so that the user can complete the payment.

Unless I'm missing something, this flow would break as random-bank-brand is not specified in our LSApplicationQueriesSchemes. In theory, there could be lots of regional banking apps that could be launched from the checkout sheet kit, these will all be blocked though as we have no way of knowing all of the potential apps Shopify may want to launch?