PayMe Integration

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them

INTERNAL
What do you need to do?
1. Add PayMe Logo to Payment method selection page(if applicable ）
2. Payment- Use createpayment request to create payment
3. Payment – Develop new endpoint to receive webhook response
4. Payment – Develop new page (PC or mobile) to show PayCode/PayMe Button
5. Use GetPayMentStatus as a backup method for checking payment status
6. Complete PayMe sandbox test
7. Complete PayMe Live test

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them
INTERNAL
Payment method selection page

INTERNAL
 selection page vertical:

• You must use the below PayMe logo in below

on the payment selection page
• If you use “PayMe” in test than the ”P” and
”M” must be in capital letter

horizontal:

All UI asset can be downloaded via: https://apimgmtst3ulc4z0dy00ry68.blob.core.windows.net/content/MediaLibrary/img/design/payme-logo-asset.zip

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them
INTERNAL
 Payment – PC Journey

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them
INTERNAL
Overview – PC Journey

INTERNAL
 PC Journey - create payment request
When createpayment request indicating the notificationuri  field, PayMe will send a webhook response to this address after Payment action is performed by customer

CreatePaymentRequest Request Body:

{
"totalAmount": 120,
"currencyCode": "HKD",
"notificationUri": "https://example.com/return",
"appSuccessCallback": "https://example.com/confirmation",
"appFailCallback": "https://example.com/unsuccessful",
"effectiveDuration": 30,
"merchantData": {
"orderDescription": "Payment for invoice 123XYZ on Customer Account ABC.",
"additionalData": "pepperoni pizza",
"orderId": "B12421832",
"shoppingCart": [
{
"sku": "pizzapepperoni",
"name": "pepperoni pizza",
"quantity": 1,
"price": 60,
"currencyCode": "HKD",
"category1": "Pizza",
"category2": "Meat Pizza",
"category3": "BBQ Chicken Pizza"
}
]
}
}

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them
INTERNAL
PC journey - create payment request
In createpaymentrequest response a link will be returned in weblink , you will use this weblink to create Paycode, you will also
put businesslogos into the PayCode (this value will be only returned in Live)
CreatePaymentRequest Response Body (live):
{
PayCode
"paymentRequestId": "7cade371-6911-4bd1-bd1b-a7c46fbc1df8",
"totalAmount": 2000,
"currencyCode": "HKD",
"notificationUri": "https://example.com/return",
"createdTime": "2018-11-07T15:56:11Z",
"effectiveDuration": 30,
"webLink": "https://example.payme.com/2/GPxtpph8seSt9naxvKiXps",
"appLink": "payme://?id=GPxtpph8seSt9naxvKiXps",
"statusDescription": "Request for Payment Initiated",
"statusCode": "PR001",
"businessLogos": {
"tiny":
"https://sacctsithkpeakbp.blob.core.windows.net/onboarding/2f7f441ca16e111b8c6960819ed22d66c2404e5db05613cb3bcd8f096e2ded7d/bus
inessLogo_40x40.png",
"small":
"https://sacctsithkpeakbp.blob.core.windows.net/onboarding/2f7f441ca16e111b8c6960819ed22d66c2404e5db05613cb3bcd8f096e2ded7d/bus
inessLogo_60x60.png",
"normal":
"https://sacctsithkpeakbp.blob.core.windows.net/onboarding/2f7f441ca16e111b8c6960819ed22d66c2404e5db05613cb3bcd8f096e2ded7d/bus
inessLogo_300x300.png", https://apimgmtst3ulc4z0dy00ry68.blob.core.windows.net
"large": /content/MediaLibrary/img/zips/PM-paycode-generator.zip
"https://sacctsithkpeakbp.blob.core.windows.net/onboarding/2f7f441ca16e111b8c6960819ed22d66c2404e5db05613cb3bcd8f096e2ded7d/bus
inessLogo_600x600.png",
"full":
"https://sacctsithkpeakbp.blob.core.windows.net/onboarding/2f7f441ca16e111b8c6960819ed22d66c2404e5db05613cb3bcd8f096e2ded7d/bus You can use the above link to download the PayCode
inessLogo.png"
} generator, just pop in the weblink value into the input
} field and click update.

INTERNAL
PC Journey – UI

You will need to develop this page yourself, might not be 100% identical but three things are mandatory
1.The Payme|hsbc Logo
2.Correct PayCode style （ the PayMe logo in the lower left corner)
3.The three steps payment instruction (https://developers.payme.hsbc.com.hk/design-guidelines)

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
UI assets can be downloaded here:
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
https://apimgmtst3ulc4z0dy00ry68.blob.core.windows.ne
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them
t/content/MediaLibrary/img/design/payme-logo-asset.zip
INTERNAL
 Payment – Mobile Journey

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them

INTERNAL
How dose it look like?

Please enter presentation

mode to play

INTERNAL
Mobile Journey - create payment request
When createpayment request indicating the notificationuri  field, PayMe will send a webhook response to this address after Payment action is performed by customer On mobile
you will need to also indicate appsuccesscallback and appfailcallback this is where PayMe app will return to these address when user made successful/fail payment
Remarks on IOS, Only universal link is supported on callbacks: https://developer.apple.com/ios/universal-links/

{
"totalAmount": 120,
"currencyCode": "HKD",
"notificationUri": "https://example.com/return",
"appSuccessCallback": "https://example.com/confirmation",
"appFailCallback": "https://example.com/unsuccessful",
"effectiveDuration": 30,
"merchantData": {
"orderDescription": "Payment for invoice 123XYZ on Customer Account ABC.",
"additionalData": "pepperoni pizza",
"orderId": "B12421832",
"shoppingCart": [
{
"sku": "pizzapepperoni",
"name": "pepperoni pizza",
"quantity": 1,
"price": 60,
"currencyCode": "HKD",
"category1": "Pizza",
"category2": "Meat Pizza",
"category3": "BBQ Chicken Pizza"
}
]
}
}

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them INTERNAL
Mobile Journey - create payment request
You will embedded the weblink to Pay with PayMe button, so customer could be redirected to PayMe app for payment

{
"paymentRequestId": "7cade371-6911-4bd1-bd1b-a7c46fbc1df8",
"totalAmount": 2000,
"currencyCode": "HKD",
"notificationUri": "https://example.com/return",
"createdTime": "2018-11-07T15:56:11Z",
"effectiveDuration": 30,
"webLink": "https://example.payme.com/2/GPxtpph8seSt9naxvKiXps",
"appLink": "payme://?id=GPxtpph8seSt9naxvKiXps",
"statusDescription": "Request for Payment Initiated",
"statusCode": "PR001",
"businessLogos": {
"tiny":
"https://sacctsithkpeakbp.blob.core.windows.net/onboarding/2f7f441ca16e111b8c6960819ed22d66c2404e5db05613cb3bcd8f096e2ded7d/businessLogo_40x40.png",
"small":
"https://sacctsithkpeakbp.blob.core.windows.net/onboarding/2f7f441ca16e111b8c6960819ed22d66c2404e5db05613cb3bcd8f096e2ded7d/businessLogo_60x60.png",
"normal":
"https://sacctsithkpeakbp.blob.core.windows.net/onboarding/2f7f441ca16e111b8c6960819ed22d66c2404e5db05613cb3bcd8f096e2ded7d/businessLogo_300x300.png",
Pay with PayMe Button
"large":
"https://sacctsithkpeakbp.blob.core.windows.net/onboarding/2f7f441ca16e111b8c6960819ed22d66c2404e5db05613cb3bcd8f096e2ded7d/businessLogo_600x600.png",
"full": "https://sacctsithkpeakbp.blob.core.windows.net/onboarding/2f7f441ca16e111b8c6960819ed22d66c2404e5db05613cb3bcd8f096e2ded7d/businessLogo.png"
}
}

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them

INTERNAL
Mobile Journey – UI
Please follow this design to delay “Pay
with PayMe” Button as much as possible.
If you don’t want to use pop up then
please try to at least us the “Pay with
PayMe button”

https://developers.payme.hsbc.com.hk/
design-guidelines

Disclaimer:
UI assets can be downloaded here:
• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
https://apimgmtst3ulc4z0dy00ry68.blob.core.windows.ne
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
t/content/MediaLibrary/img/design/payme-logo-asset.zip
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them INTERNAL
 Use GetPayMentStatus as a backup method

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them

INTERNAL
 Get Payment Status Request

You should call the getPaymentRequest API if you do not receive any payment status notification after 60
seconds

https://developers.payme.hsbc.com.hk/docs/services/payments-
v0.12/operations/5def6b092b4cde04302dfa97

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them

INTERNAL
 Sandbox test

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them

INTERNAL
 Sandbox Test
You will use specific cent value to update the payment Required test cases for sandbox:
status in sandbox.

You can download the test pack here:

https://apimgmtst3ulc4z0dy00ry68.blob.core.windows.net/content/MediaL
ibrary/img/zips/PayMe_APIs0.12_Test_Pack.zip

There will be word and excel file

Excel will contain detailed explanation on test cases
You will paste all your testing result onto the word

The required test cases are (desktop and mobile) 0.81,

(desktop and mobile) 0.77,(desktop) 0.80, (desktop)0.44,
(desktop) 0.45 to pass the sandbox test care. https://developers.payme.hsbc.com.hk/testing

Please send testing result to:

developersupport-payme@hsbc.com.hk

Disclaimer:

• This document is released as an informal engineering guideline and covered by Non-Disclosure Agreement
• All the data above are made up for demonstration purpose ONLY.
• All the above 3rd party websites are provided as a reference for testing ONLY. PayMe (HSBC) does not encourage any
extensive/production use nor guarantee the reliability of them. Customers should take their own risk and bare the potential
lost for using them
INTERNAL