Paze
Follow this guide to add Paze to your checkout.
- PAZE - Paze
Payment method availability:
- Paze since mSDK version 7.8.0
iOS
Register custom URL scheme
Add the shopper result url in custom url scheme in your app's Info.plist:
<key>LSApplicationQueriesSchemes</key>
<array>
<string>com.companyname.appname.payments</string>
</array>
Ready-to-Use UI
When you use our ready-to-use UI, everything works out-of-box. Just set PAZE payment brand and shopper result url in the Checkout Settings class and you are done. Proceed with the presenting checkout as for standard transaction.
OPPCheckoutSettings *checkoutSettings = [[OPPCheckoutSettings alloc] init];
// Set Paze payment method
checkoutSettings.paymentBrands = [@"PAZE"];
checkoutSettings.shopperResultURL = @"com.companyname.appname.payments://result";
let checkoutSettings = OPPCheckoutSettings()
// Set Paze payment method
checkoutSettings.paymentBrands = ["PAZE"]
checkoutSettings.shopperResultURL = "com.companyname.appname.payments://result"
Android
Ready-to-Use UI
When you use our ready-to-use UI, everything works out-of-box. Just set PAZE payment brand in the Checkout Settings class and you are done. Proceed with the presenting checkout as for standard transaction.
Set paymentBrands = new HashSet<>();
paymentBrands.add("PAZE");
CheckoutSettings checkoutSettings = new CheckoutSettings(
checkoutId,
paymentBrands,
providerMode
);
val paymentBrands = hashSetOf("PAZE")
val checkoutSettings = CheckoutSettings(
checkoutId,
paymentBrands,
providerMode
)
In case if you want to override the Chrome custom Tab color according to your app theme, then you need to override PazeProcessorActivity in your AndroidManifest.xml file, else Chrome Custom Tab toolbar will show SDK theme color.
<activity
android:name="com.oppwa.mobile.connect.payment.processor.paze.PazeProcessorActivity"
tools:replace="android:theme"
android:theme="@style/your_theme"/>
Your theme must extend Theme.Checkout.Light (provided by our SDK).Then define the headerBackground with your desired Chrome Custom Tab toolbar color. For more customization you can refer UI customization.
<style name="your_theme" parent="Theme.Checkout.Light">
<item name="headerBackground">@color/your_desired_color</item>
</style>
SDK & Your Own UI
In this guide we assume that you have already implemented all steps for performing standard mSDK transaction. There are several steps that you have to perform to integrate Paze, which are as follows:
1. Create payment parameters for PAZE using OPPPaymentParams.
NSError *error = nil;
OPPPaymentParams *paymentParams = [[OPPPaymentParams alloc] initWithCheckoutID:chekoutID paymentBrand:@"PAZE" error:&error];
paymentParams.shopperResultURL = @"com.companyname.appname.payments://result";
let paymentParams = try? OPPPaymentParams(checkoutID: chekoutID, paymentBrand: "PAZE")
paymentParams?.shopperResultURL = "com.companyname.appname.payments://result"
2. Create transaction object and submit transaction.
OPPTransaction *transaction = [OPPTransaction transactionWithPaymentParams:paymentParams];
OPPPaymentProvider *provider = [OPPPaymentProvider paymentProviderWithMode:providerMode];
[provider submitTransaction:transaction completionHandler:^(OPPTransaction * _Nonnull transaction, NSError * _Nullable error) {
if (error) {
// Handle the error.
} else {
// Process transaction here using Paze processor
}
}];
let transaction = OPPTransaction(paymentParams: paymentParams)
let provider = OPPPaymentProvider(mode: providerMode)
provider.submitTransaction(transaction) { (transaction, error) in
if (error != nil) {
// Handle the error.
} else {
// Process transaction here using Paze processor
}
}
3. Create Paze processor to process transaction.
OPPPazeProcessor *processor = [[OPPPazeProcessor alloc] initWithTransaction:transaction provider:provider];
[processor startPaze:^(OPPTransaction * _Nullable transaction, NSError * _Nullable error) {
// At this stage, the application may consume and handle any error if present. However, Step 4 remains mandatory and serves as the final step to obtain the definitive payment status.
}];
let pazeProcessor = OPPPazeProcessor(transaction: transaction, provider: provider)
pazeProcessor.startPaze { transaction, error in
// At this stage, the application may consume and handle any error if present. However, Step 4 remains mandatory and serves as the final step to obtain the definitive payment status.
}
4. Get the payment status
Finally your app should request the payment status from your server.
For more details you can refer to this document.
Web Browsing Session Type
We are using ASWebAuthenticationSession for the Paze session. This allows us to initiate the session with the prefersEphemeralWebBrowserSession flag set to either true or false. An ephemeral web browser session does not share cookies, cache, or other browsing data with the user’s regular browsing context. By default, we are using the default behavior, where prefersEphemeralWebBrowserSession is set to false when initiating the session with ASWebAuthenticationSession. This means the session uses the standard web browser context and shares existing browsing data such as cookies.
We provided a way to set this property using Mobile SDK in both Ready-to-Use UI & Custom UI integration.
Set browserSessionType on CheckoutSettings created above in Ready-to-Use UI flow.
checkoutSettings.browserSessionType = OPPWebBrowserSessionTypeEphemeral;
checkoutSettings.browserSessionType = .ephemeral
Provide a browserSessionType while creating OPPPazeProcessor in Custom UI flow.
OPPPazeProcessor *processor = [[OPPPazeProcessor alloc] initWithTransaction:transaction provider:provider browserSessionType: OPPWebBrowserSessionTypeEphemeral];
[processor startPaze:^(OPPTransaction * _Nullable transaction, NSError * _Nullable error) {
// At this stage, the application may consume and handle any error if present. However, Step 4 remains mandatory and serves as the final step to obtain the definitive payment status.
}];
let pazeProcessor = OPPPazeProcessor(transaction: transaction, provider: provider, browserSessionType: .ephemeral)
pazeProcessor.startPaze { transaction, error in
// At this stage, the application may consume and handle any error if present. However, Step 4 remains mandatory and serves as the final step to obtain the definitive payment status.
}
Error Codes
We have three error codes in Paze work flow which can throw in case any error occurs.
- OPPErrorCodePazeTransactionFailed - 5016: It is common error code which we use internally for our logging purpose.
- OPPErrorCodeGeneralCancelError - 9001: When Mobile SDK get cancelled status from PAZE UX or user tapped on cancel button in the browsing session.
- OPPErrorCodeGeneralFailedError - 9002: When mSDK get failed status from PAZE UX.
SDK & Your Own UI
In this guide we assume that you have already implemented all steps for performing standard mSDK transaction. There are several steps that you have to perform to integrate Paze, which are as follows:
1. Create payment parameters for PAZE using PazePaymentParams and submit the transaction.
// use the following pazePaymentParams to complete the transaction via Paze
PazePaymentParams pazePaymentParams = new PazePaymentParams(checkoutId);
Transaction transaction = new Transaction(pazePaymentParams);
OppPaymentProvider paymentProvider = new OppPaymentProvider(this, Connect.ProviderMode.TEST);
paymentProvider.submitTransaction(transaction);
// use the following pazePaymentParams to complete the transaction via Paze
val pazePaymentParams = PazePaymentParams(checkoutId)
val transaction = Transaction(pazePaymentParams)
val paymentProvider = OppPaymentProvider(this, Connect.ProviderMode.TEST)
paymentProvider.submitTransaction(transaction)
2. Register ActivityResultLauncher object to launch PAZE Processor to process the transaction
To complete PAZE transaction after you receive a transaction object in the callback of step 1, you have to create ActivityResultLaucher object of PazeProcessorActivityResultContract and launch with that transaction.
private final ActivityResultLauncher pazeLauncher = registerForActivityResult(
new PazeProcessorActivityResultContract(), processorActivityResult -> {
// get the payment status
}
);
private val pazeLauncher: ActivityResultLauncher = registerForActivityResult(
PazeProcessorActivityResultContract()) {
processorActivityResult ->
// get the payment status
}
pazeLauncher.launch(transaction)
3. Implement ITransactionListener
Now, let the class implement the ITransactionListener interface. Implement the following ITransactionListener methods:
@Override
public void transactionCompleted(Transaction transaction) {
if ("PAZE".equals(transaction.getPaymentParams().getPaymentBrand())){
pazeLauncher.launch(transaction)
} else {
// code for other brands
}
}
@Override
public void transactionFailed(@NonNull Transaction transaction, @NonNull PaymentError error) {
// show error message
}
override fun transactionCompleted(transaction: Transaction) {
if ("PAZE" == transaction.paymentParams.paymentBrand) {
pazeLauncher.launch(transaction)
} else {
// code for other brands
}
}
override fun transactionFailed(transaction: Transaction, error: PaymentError) {
// show error message
}
4. Get the payment status
Finally your app should request the payment status from your server.
For more details you can refer to this document.
Error Codes
We have three error codes in Paze work flow which can throw in case any error occurs.
- ERROR_CODE_PAZE - 5016: It is common error code which we use internally for our logging purpose.
- ERROR_CODE_GENERAL_CANCEL - 9001: When Mobile SDK get cancelled status from PAZE UX or user tapped on cancel button in the browsing session, or user clicks back button on android device
- ERROR_CODE_GENERAL_FAILED - 9002: When mSDK get failed status from PAZE UX.