Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[MIT-1759] UI cutomization configuration #277

Merged
merged 11 commits into from
Oct 20, 2023
Merged

[MIT-1759] UI cutomization configuration #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2f88dbf
feat: revamp UiCustomization config
nuxzero Oct 4, 2023
ec98730
feat: update sample app
nuxzero Oct 4, 2023
0dd6c6c
feat: add EXTRA_UI_CUSTOMIZATION parameter and set ui customization t…
nuxzero Oct 5, 2023
40d961f
feat: add support dark mode
nuxzero Oct 5, 2023
d213702
chore: update sample code
nuxzero Oct 5, 2023
da91458
docs: add UiCustomization comment docs
nuxzero Oct 5, 2023
f41e3d8
test: fix failed test
nuxzero Oct 5, 2023
a50d1b5
chore: uncomment code
nuxzero Oct 5, 2023
7fd0702
test: add unit tests
nuxzero Oct 10, 2023
27ec921
Merge branch 'feature/MIT-1760-poc-netcetera-3ds-sdk' into feature/MI…
nuxzero Oct 10, 2023
10aa3f5
test: run test with Robolectric and add unit tests
nuxzero Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 72 additions & 57 deletions app/src/java/java/co/omise/android/example/CheckoutActivity.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,23 @@
import co.omise.android.api.Client;
import co.omise.android.api.Request;
import co.omise.android.api.RequestListener;
import co.omise.android.config.AuthorizingPaymentConfig;
import co.omise.android.config.ThreeDSConfig;
import co.omise.android.config.ButtonCustomization;
import co.omise.android.config.ButtonCustomizationBuilder;
import co.omise.android.config.ButtonType;
import co.omise.android.config.LabelCustomization;
import co.omise.android.config.LabelCustomizationBuilder;
import co.omise.android.config.TextBoxCustomization;
import co.omise.android.config.TextBoxCustomizationBuilder;
import co.omise.android.config.ToolbarCustomization;
import co.omise.android.config.ToolbarCustomizationBuilder;
import co.omise.android.config.UiCustomization;
import co.omise.android.config.UiCustomizationBuilder;
import co.omise.android.models.Amount;
import co.omise.android.models.Capability;
import co.omise.android.models.Source;
import co.omise.android.models.Token;
import co.omise.android.ui.AuthorizingPaymentResult;
import co.omise.android.ui.AuthorizingPaymentActivity;
import co.omise.android.ui.AuthorizingPaymentResult;
import co.omise.android.ui.CreditCardActivity;
import co.omise.android.ui.OmiseActivity;
import co.omise.android.ui.PaymentCreatorActivity;
Expand All @@ -34,6 +42,7 @@

import static co.omise.android.AuthorizingPaymentURLVerifier.EXTRA_AUTHORIZED_URLSTRING;
import static co.omise.android.AuthorizingPaymentURLVerifier.EXTRA_EXPECTED_RETURN_URLSTRING_PATTERNS;
import static co.omise.android.ui.AuthorizingPaymentActivity.EXTRA_UI_CUSTOMIZATION;

public class CheckoutActivity extends AppCompatActivity {

Expand Down Expand Up @@ -61,8 +70,6 @@ protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_checkout);

initializeAuthoringPaymentConfig();

ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setTitle(R.string.activity_checkout);
Expand Down Expand Up @@ -129,66 +136,74 @@ private void payByCreditCard() {
startActivityForResult(intent, CREDIT_CARD_REQUEST_CODE);
}

/**
* Here's the sample of initializing 3D Secure 2.
* This should be call before start the {@link AuthorizingPaymentActivity}.
*/
private void initializeAuthoringPaymentConfig() {
UiCustomization uiCustomization = new UiCustomization.Builder()
.labelCustomization(new UiCustomization.LabelCustomization.Builder()
.textFontName("fonts/RobotoMono-Regular.ttf")
.textFontColor("#000000")
.textFontSize(16)
.headingTextColor("#000000")
.headingTextFontName("fonts/RobotoMono-Bold.ttf")
.headingTextFontSize(20)
.build())
.textBoxCustomization(new UiCustomization.TextBoxCustomization.Builder()
.textFontName("fonts/RobotoMono-Regular.ttf")
.textFontColor("#000000")
.textFontSize(16)
.borderWidth(1)
.cornerRadius(4)
.borderColor("#1A56F0")
.build())
.toolbarCustomization(new UiCustomization.ToolbarCustomization.Builder()
.textFontName("fonts/RobotoMono-Bold.ttf")
.textFontColor("#000000")
.textFontSize(20)
.backgroundColor("#FFFFFF")
.headerText("Secure Checkout")
.buttonText("Close")
.build())
.buttonCustomization(UiCustomization.ButtonType.SUBMIT_BUTTON, new UiCustomization.ButtonCustomization.Builder()
.textFontName("fonts/RobotoMono-Bold.ttf")
.textFontColor("#FFFFFF")
.textFontSize(20)
.backgroundColor("#1A56F0")
.cornerRadius(4)
.build())
.buttonCustomization(UiCustomization.ButtonType.RESEND_BUTTON, new UiCustomization.ButtonCustomization.Builder()
.textFontName("fonts/RobotoMono-Bold.ttf")
.textFontColor("#000000")
.textFontSize(20)
.backgroundColor("#FFFFFF")
.cornerRadius(4)
.build())
private Unit startAuthoringPaymentActivity(String authorizeUrl, String returnUrl) {
LabelCustomization labelCustomization = new LabelCustomizationBuilder()
.headingDarkTextColor("#FFFFFF")
.headingTextColor("#000000")
.headingTextFontName("roboto_mono")
.headingTextFontSize(20)
.textFontName("roboto_mono")
.textColor("#000000")
.textFontSize(16)
.build();

ThreeDSConfig threeDSConfig = new ThreeDSConfig.Builder()
.uiCustomization(uiCustomization)
.timeout(5)
TextBoxCustomization textBoxCustomization = new TextBoxCustomizationBuilder()
.textFontName("font/roboto_mono_regular.ttf")
.textColor("#000000")
.textFontSize(16)
.borderWidth(1)
.cornerRadius(4)
.borderColor("#1A56F0")
.build();
AuthorizingPaymentConfig authPaymentConfig = new AuthorizingPaymentConfig.Builder()
.threeDSConfig(threeDSConfig)

ToolbarCustomization toolbarCustomization = new ToolbarCustomizationBuilder()
.textFontName("font/roboto_mono_bold.ttf")
.textColor("#000000")
.textFontSize(20)
.backgroundColor("#FFFFFF")
.headerText("Secure Checkout")
.buttonText("Close")
.darkBackgroundColor("#262626")
.darkTextColor("#FFFFFF")
.build();

ButtonCustomization primaryButtonCustomization = new ButtonCustomizationBuilder()
.textFontName("font/roboto_mono_bold.ttf")
.textFontSize(20)
.cornerRadius(4)
.textColor("#FFFFFF")
.backgroundColor("#1A56F0")
.darkTextColor("#FFFFFF")
.darkBackgroundColor("#4777F3")
.build();

ButtonCustomization secondaryButtonCustomization = new ButtonCustomizationBuilder()
.textFontName("font/roboto_mono_bold.ttf")
.textFontSize(20)
.cornerRadius(4)
.textColor("#1A56F0")
.backgroundColor("#FFFFFF")
.darkTextColor("#1E1E1E")
.darkBackgroundColor("#FFFFFF")
.build();

UiCustomization uiCustomization = new UiCustomizationBuilder()
.supportDarkMode(true)
.labelCustomization(labelCustomization)
.textBoxCustomization(textBoxCustomization)
.toolbarCustomization(toolbarCustomization)
.buttonCustomization(ButtonType.SUBMIT, primaryButtonCustomization)
.buttonCustomization(ButtonType.CONTINUE, primaryButtonCustomization)
.buttonCustomization(ButtonType.NEXT, primaryButtonCustomization)
.buttonCustomization(ButtonType.OPEN_OOB_APP, primaryButtonCustomization)
.buttonCustomization(ButtonType.RESEND, primaryButtonCustomization)
.buttonCustomization(ButtonType.CANCEL, secondaryButtonCustomization)
.build();
AuthorizingPaymentConfig.initialize(authPaymentConfig);
}

private Unit startAuthoringPaymentActivity(String authorizeUrl, String returnUrl) {
Intent intent = new Intent(this, AuthorizingPaymentActivity.class);
intent.putExtra(EXTRA_AUTHORIZED_URLSTRING, authorizeUrl);
intent.putExtra(EXTRA_EXPECTED_RETURN_URLSTRING_PATTERNS, new String[]{returnUrl});
intent.putExtra(EXTRA_UI_CUSTOMIZATION, uiCustomization);
startActivityForResult(intent, CheckoutActivity.AUTHORIZING_PAYMENT_REQUEST_CODE);
return Unit.INSTANCE;
}
Expand Down
146 changes: 81 additions & 65 deletions app/src/kotlin/java/co/omise/android/example/CheckoutActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,18 @@ import co.omise.android.AuthorizingPaymentURLVerifier.Companion.EXTRA_AUTHORIZED
import co.omise.android.AuthorizingPaymentURLVerifier.Companion.EXTRA_EXPECTED_RETURN_URLSTRING_PATTERNS
import co.omise.android.api.Client
import co.omise.android.api.RequestListener
import co.omise.android.config.AuthorizingPaymentConfig
import co.omise.android.config.ThreeDSConfig
import co.omise.android.config.UiCustomization
import co.omise.android.config.ButtonCustomizationBuilder
import co.omise.android.config.ButtonType
import co.omise.android.config.LabelCustomizationBuilder
import co.omise.android.config.TextBoxCustomizationBuilder
import co.omise.android.config.ToolbarCustomizationBuilder
import co.omise.android.config.UiCustomizationBuilder
import co.omise.android.models.Amount
import co.omise.android.models.Capability
import co.omise.android.models.Source
import co.omise.android.models.Token
import co.omise.android.ui.AuthorizingPaymentActivity
import co.omise.android.ui.AuthorizingPaymentActivity.Companion.EXTRA_UI_CUSTOMIZATION
import co.omise.android.ui.AuthorizingPaymentResult
import co.omise.android.ui.CreditCardActivity
import co.omise.android.ui.OmiseActivity
Expand Down Expand Up @@ -62,15 +66,13 @@ class CheckoutActivity : AppCompatActivity() {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_checkout)

initializeAuthoringPaymentConfig()

supportActionBar?.title = getString(R.string.activity_checkout)

choosePaymentMethodButton.setOnClickListener { choosePaymentMethod() }
creditCardButton.setOnClickListener { payByCreditCard() }
authorizeUrlButton.setOnClickListener {
AuthorizingPaymentDialog.showAuthorizingPaymentDialog(this) {authorizeUrl, returnUrl ->
startAuthoringPaymentActivity(authorizeUrl, returnUrl)
AuthorizingPaymentDialog.showAuthorizingPaymentDialog(this) { authorizeUrl, returnUrl ->
startAuthoringPaymentActivity(authorizeUrl, returnUrl)
}
}

Expand Down Expand Up @@ -125,70 +127,80 @@ class CheckoutActivity : AppCompatActivity() {
}
}

/**
* Here's the sample of initializing 3D Secure 2.
* This should be call before start the [AuthorizingPaymentActivity].
*/
private fun initializeAuthoringPaymentConfig() {
val uiCustomization = UiCustomization.Builder()
.labelCustomization(UiCustomization.LabelCustomization.Builder()
.textFontName("fonts/RobotoMono-Regular.ttf")
.textFontColor("#000000")
.textFontSize(16)
.headingTextColor("#000000")
.headingTextFontName("fonts/RobotoMono-Bold.ttf")
.headingTextFontSize(20)
.build())
.textBoxCustomization(UiCustomization.TextBoxCustomization.Builder()
.textFontName("fonts/RobotoMono-Regular.ttf")
.textFontColor("#000000")
.textFontSize(16)
.borderWidth(1)
.cornerRadius(4)
.borderColor("#1A56F0")
.build())
.toolbarCustomization(UiCustomization.ToolbarCustomization.Builder()
.textFontName("fonts/RobotoMono-Bold.ttf")
.textFontColor("#000000")
.textFontSize(20)
.backgroundColor("#FFFFFF")
.headerText("Secure Checkout")
.buttonText("Close")
.build())
.buttonCustomization(UiCustomization.ButtonType.SUBMIT_BUTTON, UiCustomization.ButtonCustomization.Builder()
.textFontName("fonts/RobotoMono-Bold.ttf")
.textFontColor("#FFFFFF")
.textFontSize(20)
.backgroundColor("#1A56F0")
.cornerRadius(4)
.build())
.buttonCustomization(UiCustomization.ButtonType.RESEND_BUTTON, UiCustomization.ButtonCustomization.Builder()
.textFontName("fonts/RobotoMono-Bold.ttf")
.textFontColor("#000000")
.textFontSize(20)
.backgroundColor("#FFFFFF")
.cornerRadius(4)
.build())
.build()

val threeDSConfig = ThreeDSConfig.Builder()
.uiCustomization(uiCustomization)
.timeout(5)
.build()
val authPaymentConfig = AuthorizingPaymentConfig.Builder()
.threeDSConfig(threeDSConfig)
.build()
AuthorizingPaymentConfig.initialize(authPaymentConfig)
}

private fun startAuthoringPaymentActivity(authorizeUrl: String, returnUrl: String) {
Log.d(TAG, """
val labelCustomization = LabelCustomizationBuilder()
.headingDarkTextColor("#FFFFFF")
.headingTextColor("#000000")
.headingTextFontName("roboto_mono")
.headingTextFontSize(20)
.textFontName("roboto_mono")
.textColor("#000000")
.textFontSize(16)
.build()

val textBoxCustomization = TextBoxCustomizationBuilder()
.textFontName("font/roboto_mono_regular.ttf")
.textColor("#000000")
.textFontSize(16)
.borderWidth(1)
.cornerRadius(4)
.borderColor("#1A56F0")
.build()

val toolbarCustomization = ToolbarCustomizationBuilder()
.textFontName("font/roboto_mono_bold.ttf")
.textColor("#000000")
.textFontSize(20)
.backgroundColor("#FFFFFF")
.headerText("Secure Checkout")
.buttonText("Close")
.darkBackgroundColor("#262626")
.darkTextColor("#FFFFFF")
.build()

val primaryButtonCustomization = ButtonCustomizationBuilder()
.textFontName("font/roboto_mono_bold.ttf")
.textFontSize(20)
.cornerRadius(4)
.textColor("#FFFFFF")
.backgroundColor("#1A56F0")
.darkTextColor("#FFFFFF")
.darkBackgroundColor("#4777F3")
.build()

val secondaryButtonCustomization = ButtonCustomizationBuilder()
.textFontName("font/roboto_mono_bold.ttf")
.textFontSize(20)
.cornerRadius(4)
.textColor("#1A56F0")
.backgroundColor("#FFFFFF")
.darkTextColor("#1E1E1E")
.darkBackgroundColor("#FFFFFF")
.build()

val uiCustomization = UiCustomizationBuilder()
.supportDarkMode(true)
.labelCustomization(labelCustomization)
.textBoxCustomization(textBoxCustomization)
.toolbarCustomization(toolbarCustomization)
.buttonCustomization(ButtonType.SUBMIT, primaryButtonCustomization)
.buttonCustomization(ButtonType.CONTINUE, primaryButtonCustomization)
.buttonCustomization(ButtonType.NEXT, primaryButtonCustomization)
.buttonCustomization(ButtonType.OPEN_OOB_APP, primaryButtonCustomization)
.buttonCustomization(ButtonType.RESEND, secondaryButtonCustomization)
.buttonCustomization(ButtonType.CANCEL, secondaryButtonCustomization)
.build()

Log.d(
TAG, """
authorizeUrl=$authorizeUrl
returnUrl=$returnUrl
""".trimIndent())
""".trimIndent()
)
Intent(this, AuthorizingPaymentActivity::class.java).run {
putExtra(EXTRA_AUTHORIZED_URLSTRING, authorizeUrl)
putExtra(EXTRA_EXPECTED_RETURN_URLSTRING_PATTERNS, arrayOf(returnUrl))
putExtra(EXTRA_UI_CUSTOMIZATION, uiCustomization)
startActivityForResult(this, AUTHORIZING_PAYMENT_REQUEST_CODE)
}
}
Expand Down Expand Up @@ -234,12 +246,14 @@ class CheckoutActivity : AppCompatActivity() {
Log.e(TAG, throwable.message, throwable.cause)
throwable.message ?: "Unknown error."
}

null -> "Not found the authorization result."
}
Log.d(TAG, resultMessage)
snackbar.setText(resultMessage).show()
}
}

PAYMENT_CREATOR_REQUEST_CODE -> {
if (data.hasExtra(OmiseActivity.EXTRA_SOURCE_OBJECT)) {
val source = data.getParcelableExtra<Source>(OmiseActivity.EXTRA_SOURCE_OBJECT)
Expand All @@ -251,11 +265,13 @@ class CheckoutActivity : AppCompatActivity() {
Log.d(TAG, "token: ${token?.id}")
}
}

CREDIT_CARD_REQUEST_CODE -> {
val token = data.getParcelableExtra<Token>(OmiseActivity.EXTRA_TOKEN_OBJECT)
snackbar.setText(token?.id ?: "No token object.").show()
Log.d(TAG, "token: ${token?.id}")
}

else -> {
super.onActivityResult(requestCode, resultCode, data)
}
Expand Down
12 changes: 12 additions & 0 deletions app/src/main/res/font/roboto_mono.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<font
app:font="@font/roboto_mono_regular"
app:fontStyle="normal"
app:fontWeight="400" />
<font
app:font="@font/roboto_mono_bold"
app:fontStyle="normal"
app:fontWeight="700" />
</font-family>
0 ...src/main/assets/fonts/RobotoMono-Bold.ttf → app/src/main/res/font/roboto_mono_bold.ttf
View file
Open in desktop
File renamed without changes.
0 .../main/assets/fonts/RobotoMono-Regular.ttf → ...src/main/res/font/roboto_mono_regular.ttf
View file
Open in desktop
File renamed without changes.
Loading
Loading