Three ways to process payments outside of the app marketplace

Consumers increasingly expect frictionless payments in marketplaces. However, businesses must balance these expectations with their infrastructure. That means organizations want a solution tailored around their needs while delivering a streamlined payment processing experience.

Thankfully, we offer options. Our solutions can integrate mobile payments so they link out to a browser, or they can work natively within your app. All while keeping sensitive credit card information protected in accordance with industry standards. Read on for an overview of three distinct payment paths followed by deep dives so you can decide which one fits your needs. 

Which payment path is right for you?

You can build your mobile app payment experience with one of three payment paths:

Option one: Checkout hosted payment page

The Checkout Hosted Payment Page is a portal designed to accept payments from your consumers in accordance with industry security standards, without having to build and manage your own payment gateway. With it, app users move from the mobile app to a hosted payment page to complete a payment, and then they return to the mobile app.

Here’s how it works:

1. The app user initiates a checkout and enters the payment flow.
2. The mobile app/your backend calls the Checkout API to create a checkout session by sending a POST request to the /checkout/intent endpoint, including your merchant ID, an order reference, and a cart object.
3. We return the Checkout hosted payment page’s URL back to the app through your backend.
4. The app sends the user to the hosted payment page on the phone’s native browser.
5. The phone native browser renders checkoutRedirectUrl to the app user.
6. The app user enters their payment data and initiates payment (through the checkout form data) with the Checkout backend.
7. The Checkout backend processes the payment out to the card brands and returns payResult to the phone native browser.
8. The phone’s native browser redirects the user back to the app through a redirect URL.
   • Note: The redirect URL has a deep/universal link that allows a link back into the mobile app.
9. The Checkout backend sends payResult to the app through a redirect URL.
10. Your backend requests transaction details from Checkout notifications. 
11. The Checkout backend returns the transaction details and token. 

If you’re interested in accepting payments through our Checkout Hosted Payment Page, here’s how to get started:

Set up links with Apple or Android

1. Set up links with Apple and/or Android from the native mobile app to the Checkout page URL.
   • For more information on universal links, refer to Apple’s universal links for developers.
   • For more information on deep links, refer to Android’s developer deep link, or you can search online for different techniques as applicable.
2. Create a fallback page at your success and cancel URLs.

Create an account

1. Create your developer account with Payments Developer Portal. Refer to the quick start guide for more detailed steps.
2. Create a project in Your Personal Workspace.
3. Add the Checkout API to your project.
4. Follow the steps outlined in the quick start guide to retrieve your workspace credentials and begin testing the Checkout API.
5. Click on BECOME A CLIENT when you are ready to request access to your client experience in the Payments Developer Portal.
6. Contact your J.P. Morgan Payments representative to learn how you can configure Checkout settings and create your first checkout session to begin accepting payments outside of an app marketplace.

Option two: Checkout Drop-in UI

The Checkout Drop-in UI is a complete, ready-made payment UI that offers a quick and easy way to accept payments in accordance with security standards. You can customize your Checkout form to fit stylistically into your current checkout experience by using the Checkout Settings page in the Commerce Center portal, or by using JavaScript to modify basic styles or the full theme object.

Build an app experience that efficiently routes your app user from the mobile app to a merchant managed phone native browser with drop-in checkout UI, where your app user can complete payment, and you control the redirect back into the mobile app.

Here’s how it works:

1. The app user initiates a checkout and enters the payment flow.
2. The mobile app/your backend calls the Checkout API to create a checkout session by sending a POST request to the /checkout/intent endpoint, including your merchant ID, an order reference, and a cart object.
3. The Checkout backend sends the checkout session as a response to the app.
4. The app sends a checkout session to the phone’s native browser.
5. Your phone native browser loads the Drop-in UI bundle and initializes it with the checkout session.
6. The Drop-in UI renders the Checkout form on the phone’s native browser.
7. The app user clicks Place Order / Pay (configurable) on the pay form. 
8. The Drop-in UI initiates Pay (checkout form data) with the Checkout backend and processes out to the card brand.
9. The Checkout backend sends the payResult to the Drop-in UI bundle.
10. You send a success or failure response back to the mobile app using the Apple or Android universal link/deep link.
11. You can request transaction details through Checkout notifications, such as start and end date and merchant order number. 
12. The Checkout backend returns the transaction details and token.

If you’re interested in using the Checkout API’s Drop-in UI, here’s how to get started:

Set up links with Apple or Android

1. Set up links with Apple and/or Android from the native mobile app to the Checkout page URL.
   • For more information on universal links, refer to Apple’s universal links for developers.
   • For more information on deep links, refer to Android’s developer deep link, or you can search online for different techniques as applicable.
2. Create a fallback page at your success and cancel URLs.

Create an account

1. Create your developer account with Payments Developer Portal. Refer to the quick start guide for more detailed steps.
2. Create a project in Your Personal Workspace.
3. Add the Checkout API to your project.
4. Follow the steps outlined in the quick start guide to retrieve your workspace credentials and begin testing the Checkout API.
5. Click on BECOME A CLIENT when you are ready to request access to your client experience in Payments Developer Portal.
6. Contact your J.P. Morgan Payments Representative to learn how you can configure Checkout settings and create your first checkout session to begin accepting payments outside of an app marketplace.

Option 3: Mobile SDK

A mobile SDK allows merchants to accept payments from consumers in their native applications without exposing sensitive cardholder data in the merchant environment. It is designed to be lightweight and supports both iOS and Android platforms. 

Here’s how it works:

1. The mobile app calls our key server.
2. The key server returns a one-time encryption key.
3. The app encrypts the PAN and CVV values.
4. The app sends the encrypted value to your payment engine.
5. Your payment engine sends the transaction to us.
6. Our processing server decrypts the PAN and CVV, then sends the card data to the network for card verification and authorization.
7. The card network validates and authorizes the transaction.
8. The card network creates a success or failure response message and sends it back to us.
9. We send a success or failure response to your payment hub.
10. Your payment hub stores the Safetech token and publishes the response back to the mobile app.

If you’re interested in utilizing a mobile SDK integration to accept payments outside of an app marketplace, here’s how to get started:

1) Sign up for Developer Center access

1. Navigate to https://secure.paymentech.com/devcenter/home.​
2. Click Get Access.​
3. Fill out the form to begin the registration process for your account, which includes creating a unique user ID.​
4. Follow the instructions in the registration email you receive and input your username, last name, and email address on the ​final registration page.​
5. Click Submit and then create your password to proceed to the secure login page. ​
6. Log in with your username and new password, then complete an authentication setup to gain access to Developer Center.

2) Review Mobile SDK specifications

1. Download the Safetech Mobile Encryption SDK Guide, located in the Software Development category.
2. Follow the respective iOS and Android implementation guide to integrate the SDK into your mobile app.
3. For Online Payments API integration, review the current Online Payments API specification on Payments Developer Portal.

3) Create an account

1. Contact a sales/relationship manager to start the setup process through Commerce Payments solutions.
2. Click on LET’S TALK to request access.
3. Fill out the contact form and we’ll get in touch with you within three business days.
4. Complete the technical profile questionnaire provided by the Technical Implementation Team. The questionnaire is used to define all use cases for testing and integration.
5. When your account is created, the following integration prerequisites are assigned:
   • Transaction division/processing entity number
   • Subscriber ID
   • Safetech Token format (this is a one-time setup in our system).

By choosing to accept payments outside of app marketplaces, you can offer your app users a smooth and protected checkout. Our flexible payment solutions empower you to integrate browser-based or native app payments, all with robust security that protects sensitive cardholder data.

Next Steps

Now is the time to take control of your mobile payment strategy. Explore each payment path in detail, consult with your J.P. Morgan Payments representative, and start building a streamlined, protected payment experience for your app users today.