모바일 애플리케이션에서 결제 UI를 여는 방법
알림
기존의 SDK를 사용하여 엑솔라 서비스를 빠르게 연동할 수 있어요.
- 엑솔라 Mobile SDK - 결제 옵션을 확장하고 플랫폼 요구 사항을 준수할 때 권장되는 옵션이에요.
- Android용 SDK - 은행 및 신용카드, 전자지갑, QR 코드, 기본 결제 방법(예: Google Pay) 등 엑솔라에서 지원하는 모든 결제 방법을 사용하여 신속하게 결제를 승인하는 솔로션이에요.
- 브라우저 사용 - 이 경우 사용자는 게임에서 외부 브라우저로 리디렉션되어 결제할 수 있습니다. 결제 UI는 다음과 같이 표시됩니다.
- Android WebView 사용 - 이 경우 결제 UI는 다음과 같이 게임 애플리케이션 내에서 원활하게 열립니다.
- 사용자 정의 탭 사용 - 이 경우 결제 UI가 게임 애플리케이션 내에서 열리지만 사용자에게 브라우저의 바가 표시됩니다. 결제 UI는 다음과 같이 표시됩니다.
브라우저 사용
브라우저에서 결제 UI를 열고 엑솔라가 제공한 방법을 통해결제를 받으려면 결제 UI 열기 지침을 따르십시오.
Android WebView 사용
Android WebView는 안드로이드 애플리케이션이 웹 콘텐츠를 표시할 수 있도록 Google에서 사전 설치하는 시스템 구성 요소입니다. Android WebView에서 결제 UI가 올바르게 작동하려면 WebView를 구성하고 setWebViewClient 및 setWebChromeClient 메소드를 설정해야 합니다.
Copy
- java
mWebView.setWebViewClient(new XsollaWebViewClient(this));
mWebView.setWebChromeClient(new XsollaWebChromeClient(this));
Android WebView에서 결제 UI 열기를 구성하는 방법:
- 이 예시에 따라 WebView를 구성합니다.
Copy
- java
WebSettings webSettings = mWebView.getSettings();
webSettings.setBuiltInZoomControls(false);
webSettings.setUseWideViewPort(true);
webSettings.setDomStorageEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportMultipleWindows(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
- 이 예시에 따라
WebViewClient클래스에서 상속된XsollaWebViewClient클래스를 구현하고shouldOverrideUrlLoading및onPageFinished메소드를 재정의합니다.
Copy
- java
class XsollaWebViewClient extends WebViewClient {
private final Context context;
public XsollaWebViewClient(Context context) {
this.context = context;
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if(url.matches(".+://.*")) {
try {
Intent intent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME);
intent.addCategory("android.intent.category.BROWSABLE");
intent.setComponent(null);
context.startActivity(intent);
} catch(URISyntaxException e) {
Log.e("WebView", "Invalid URL format" + url, e);
} catch (ActivityNotFoundException e) {
Log.e("WebView", "No activity found to handle URL: " + url, e);
}
return true;
}
return false;
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
}
WebChromeClient클래스에서 상속된XsollaWebChromeClient클래스를 구현하고, 그 안에서onCreateWindow및onCloseWindow메소드를 재정의합니다.
Copy
- java
public class XsollaWebChromeClient extends WebChromeClient {
private final Context mContext;
public XsollaWebChromeClient(Context context) {
mContext = context;
}
@Override
public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, android.os.Message resultMsg) {
MainActivity mainActivity = (MainActivity) mContext;
WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
transport.setWebView(mainActivity.mChildWebView);
resultMsg.sendToTarget();
return true;
}
}
WebView클래스에서 상속된XsollaChildWebView클래스를 구현합니다.
Copy
- java
public class XsollaChildWebView extends WebView {
@SuppressLint("SetJavaScriptEnabled")
public XsollaChildWebView(Context context, AttributeSet attrs) {
super(context, attrs);
WebSettings webSettings = getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
setWebViewClient(new XsollaWebViewClient(context));
setWebChromeClient(new XsollaWebChromeClient(context));
}
}
mChildWebView변수를MainActivity클래스에서 필드로 선언합니다.
Copy
- java
mChildWebView = findViewById(R.id.childWebView);
두 번째 WebView(childWebView)는 결제 UI에서 새 창을 여는 데 사용됩니다.
Copy
- xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:id="@+id/mainWebView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.example.app.XsollaChildWebView
android:id="@+id/childWebView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
알림
자세한 코드 샘플은 GitHub 리포지토리를 참조해 주세요.
사용자 정의 탭 사용
사용자 정의 탭은 개발자가 애플리케이션 내에서 직접 사용자 정의한 브라우저 환경을 추가할 수 있는 Android 브라우저의 기능입니다. WebView와 사용자 정의 탭의 차이점은 WebView에서는 사용자 작업이 다른 인터넷 작업과 분리되어 있는 반면, 사용자 정의 탭을 사용하면 사용자 작업을 Android 기기에서 Chrome의 다른 활동과 동기화할 수 있다는 점입니다.
사용자 정의 탭에서 결제 UI를 여는 코드의 샘플:
Copy
- java
String url = "https://secure.xsolla.com/paystation4?token=${token}";
CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
CustomTabsIntent customTabsIntent = builder.build();
customTabsIntent.launchUrl(this, Uri.parse(url));
이 기사가 도움이 되었나요?
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.
