Midtrans memungkinkan menerima pembayaran online secara asli di aplikasi mobile, midtrans dapat digunakan di berbagai platform, sistem midtrans kopatible dengan berbagai API dan plug-in untuk proses integrasi yang mudah, jadi dengan menggunakan midtrans anda tidak perlu lagi cek pembayaran dan buat laporan keuangan secara manual, dengan midtrans tersedia 20 metode pebayaran, anda bisa melayani kebutuhan pelanggan diseluruh daerah indonesia.
Transaksi flow
- Checkout: Pelanggan mengklik tombol Checkout pada aplikasi Host dan aplikasi membuat permintaan ke Merchant Server
- Token request: Merchant Server membuat permintaan ke server Midtrans dengan Informasi Pemesanan.
- Token response: Midtrans merespons dengan token transaksi yang valid ke server Merchant
- Token response: Server pedagang meneruskan token ke Mobile SDK
- Get transaction options: SDK Seluler meminta informasi pembayaran / pedagang berdasarkan token
- Transaction options response: SDK Seluler membuat opsi pembayaran dan informasi pembayaran untuk melakukan pembayaran
- Pay: Pelanggan memilih metode pembayaran dan rincian pembayaran dan mengklik “Bayar”
- Charge: SDK Seluler mengirimkan permintaan Tagihan ke Midtrans Backend untuk Pemrosesan pembayaran.
- Charge response: SDK Seluler menerima respons dari Midtrans Backend dan memicu pengendali pada Aplikasi Seluler dengan status berhasil / gagal / tertunda
- Charge notification: Midtrans Backend mengirimkan pemberitahuan ke Merchant backend yang mengkonfirmasi penyelesaian transaksi.
Server Side
Bagian variable server_key anda masukan server key yang anda dapat dari Midtrans
<?php
$server_key = "YOUR_SERVER_KEY";
$is_production = false;
$api_url = $is_production ?
'https://app.midtrans.com/snap/v1/transactions' :
'https://app.sandbox.midtrans.com/snap/v1/transactions';
if( !strpos($_SERVER['REQUEST_URI'], '/charge') ) {
http_response_code(404);
echo "wrong path, make sure it's `/charge`"; exit();
}
if( $_SERVER['REQUEST_METHOD'] !== 'POST'){
http_response_code(404);
echo "Page not found or wrong HTTP request method is used"; exit();
}
$request_body = file_get_contents('php://input');
header('Content-Type: application/json');
$charge_result = chargeAPI($api_url, $server_key, $request_body);
http_response_code($charge_result['http_code']);
echo $charge_result['body'];
function chargeAPI($api_url, $server_key, $request_body){
$ch = curl_init();
$curl_options = array(
CURLOPT_URL => $api_url,
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_POST => 1,
CURLOPT_HEADER => 0,
CURLOPT_HTTPHEADER => array(
'Content-Type: application/json',
'Accept: application/json',
'Authorization: Basic ' . base64_encode($server_key . ':')
),
CURLOPT_POSTFIELDS => $request_body
);
curl_setopt_array($ch, $curl_options);
$result = array(
'body' => curl_exec($ch),
'http_code' => curl_getinfo($ch, CURLINFO_HTTP_CODE),
);
return $result;
}Jalankan code diatas menggunakan Heroku, kemudian anda copy URL untuk diterapkan pada client side bagian mobile.
Client Side
Bagian gradle anda masukan repositories
allprojects {
repositories {
...
maven { url "http://dl.bintray.com/pt-midtrans/maven" }
}
}Buat project baru kemudian bagian dependencies anda masukan 2 environment, mode sanbox dan mode production
sandboxImplementation 'com.midtrans:uikit:1.21.2-SANDBOX'
productionImplementation 'com.midtrans:uikit:1.21.2'Anda buatkan varian dengan productFlavors
productFlavors {
// mode pengembang
sandbox {
dimension = "mode"
applicationId "com.kodetr.kiostr.sandbox"
resValue "string", "app_name", "Kiostr SandBox"
buildConfigField "String", "MERCHANT_BASE_URL", "YOUR_URL_SERVER"
buildConfigField "String", "MERCHANT_CLIENT_KEY", "YOUR_CLIENT_KEY"
}
// mode produksi
production {
dimension = "mode"
applicationId "com.kodetr.kiostr"
resValue "string", "app_name", "Kiostr Production"
buildConfigField "String", "MERCHANT_BASE_URL", "YOUR_URL_SERVER"
buildConfigField "String", "MERCHANT_CLIENT_KEY", "YOUR_CLIENT_KEY"
}
}Anda buat layout account dengan nama activity_account.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/main_toolbar"
style="@style/ThemeOverlay.AppCompat.ActionBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/white"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:title="">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<com.kodetr.transaksi.widgets.WidgetsTextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="My Account"
android:textSize="20sp" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="center"
android:src="@drawable/ic_avatar" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="kodetr"
android:textSize="25sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/white"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/layout_saved_cards"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
<ImageView
android:id="@+id/image_cards"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_centerVertical="true"
android:src="@drawable/ic_card" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_toEndOf="@id/image_cards"
android:layout_toRightOf="@id/image_cards"
android:text="Account Mycards"
android:textSize="18sp" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="@drawable/ic_arrow_right" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/gray_divider" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical">
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/text_account_details"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="Account Details"
android:textStyle="bold" />
<ImageView
android:id="@+id/image_account_email"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/text_account_details"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:src="@drawable/ic_mail" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/tv_email"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_below="@id/text_account_details"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_toEndOf="@id/image_account_email"
android:layout_toRightOf="@id/image_account_email"
android:gravity="center_vertical"
android:text="[email protected]" />
<ImageView
android:id="@+id/image_account_phone"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_below="@id/image_account_email"
android:src="@drawable/ic_phone" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/tv_phone"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_below="@id/image_account_email"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_toEndOf="@id/image_account_phone"
android:layout_toRightOf="@id/image_account_phone"
android:gravity="center_vertical"
android:text="08123456789" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/gray_divider" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp">
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/text_delivery_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="Account Details"
android:textStyle="bold" />
<ImageView
android:id="@+id/image_account_address"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_below="@id/text_delivery_address"
android:alpha="0.4"
android:src="@drawable/ic_place" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/tv_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_delivery_address"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_toEndOf="@id/image_account_address"
android:layout_toRightOf="@id/image_account_address"
android:text="Jl. ismail marzuki mataram" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>Anda buat layout product list dengan nama activity_product_list.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/main_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/main_toolbar"
style="@style/ThemeOverlay.AppCompat.ActionBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/white"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:title="">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:id="@+id/image_setting_account"
android:layout_width="48dp"
android:padding="8sp"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:scaleType="centerInside"
android:src="@drawable/ic_person" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:gravity="center"
android:scaleType="center"
android:src="@drawable/ic_kiostr"
android:textSize="25sp" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/main_appbar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image_product_main"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:src="@drawable/promo" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/image_product_main"
android:gravity="center">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>Anda buat layout item products dengan nama item_products.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10sp"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
<RelativeLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image_product"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/image_product"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:orientation="vertical">
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="products 1"
android:textSize="16sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/tv_price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Rp 10000"
android:textSize="14sp" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/tv_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4.0"
android:textSize="20sp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/eight_dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_star_fill" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>Anda buat layout order dengan nama activity_order_review.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:context="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:id="@+id/amount_container"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimaryDark"
android:gravity="center_vertical"
android:paddingLeft="@dimen/sixteen_dp"
android:paddingRight="@dimen/sixteen_dp">
<com.kodetr.transaksi.widgets.WidgetsTextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="Total Amount"
android:textColor="@color/white"
android:textSize="@dimen/primary_text_size"
android:textStyle="bold" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/text_amount"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:text="Rp 10000"
android:textColor="@color/white"
android:textSize="@dimen/header_text_size"
android:textStyle="bold" />
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/btn_pay_container"
android:layout_below="@id/amount_container">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/title_delivery_options"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/sixteen_dp"
android:layout_marginRight="@dimen/sixteen_dp"
android:paddingTop="@dimen/eight_dp"
android:paddingBottom="@dimen/eight_dp"
android:text="Order Review Delivery Options"
android:textSize="10sp"
android:textStyle="bold" />
<RelativeLayout
android:id="@+id/order_review_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/title_delivery_options"
android:layout_marginLeft="@dimen/sixteen_dp"
android:layout_marginRight="@dimen/sixteen_dp">
<ImageView
android:id="@+id/product_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/sixteen_dp"
android:layout_toRightOf="@id/product_image"
android:orientation="vertical">
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/product_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Product 1"
android:textStyle="bold" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/product_qty"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="qty 1" />
</LinearLayout>
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/product_price_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Rp 100000"
android:textColor="@color/navy_blue.primary_dark"
android:textSize="12sp" />
</RelativeLayout>
<View
android:id="@+id/divider_1"
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_below="@id/order_review_container"
android:layout_marginTop="@dimen/eight_dp"
android:layout_marginBottom="@dimen/eight_dp"
android:background="@color/gray_divider" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/title_customer_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/divider_1"
android:layout_marginLeft="@dimen/sixteen_dp"
android:layout_marginTop="@dimen/sixteen_dp"
android:layout_marginRight="@dimen/sixteen_dp"
android:paddingTop="@dimen/eight_dp"
android:paddingBottom="@dimen/eight_dp"
android:text="CUSTOMER DETAILS"
android:textSize="10sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/title_customer_details"
android:layout_alignRight="@id/title_customer_details"
android:layout_alignBottom="@id/title_customer_details"
android:orientation="horizontal">
<ImageView
android:id="@+id/button_cancel_customer_detail"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="@dimen/eight_dp"
android:src="@drawable/ic_delete_black"
android:visibility="gone" />
<ImageView
android:id="@+id/button_save_customer_detail"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="@dimen/eight_dp"
android:src="@drawable/ic_check_blue"
android:visibility="gone" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="@dimen/eight_dp"
android:src="@drawable/ic_edit_icon" />
</LinearLayout>
<LinearLayout
android:id="@+id/customer_details_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/title_customer_details"
android:layout_marginLeft="@dimen/sixteen_dp"
android:layout_marginRight="@dimen/sixteen_dp"
android:orientation="vertical">
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_customer_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:digits="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ "
android:enabled="false"
android:focusable="false"
android:hint="Full Name"
android:inputType="textPersonName"
android:maxLength="64"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_customer_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="false"
android:focusable="false"
android:hint="Email"
android:inputType="textEmailAddress"
android:maxLength="128"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_customer_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:digits="0123456789+"
android:enabled="false"
android:focusable="false"
android:hint="Phone Number"
android:inputType="phone"
android:maxLength="15"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
<View
android:id="@+id/divider_2"
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_below="@id/customer_details_container"
android:layout_marginTop="@dimen/eight_dp"
android:layout_marginBottom="@dimen/eight_dp"
android:background="@color/gray_divider" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/title_delivery_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/divider_2"
android:layout_marginLeft="@dimen/sixteen_dp"
android:layout_marginTop="@dimen/sixteen_dp"
android:layout_marginRight="@dimen/sixteen_dp"
android:paddingTop="@dimen/eight_dp"
android:paddingBottom="@dimen/eight_dp"
android:text="YOUR DELIVERY ADDRESS"
android:textSize="10sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/title_delivery_address"
android:layout_alignRight="@id/title_delivery_address"
android:layout_alignBottom="@id/title_delivery_address"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="@dimen/eight_dp"
android:src="@drawable/ic_check_blue"
android:visibility="gone" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="@dimen/eight_dp"
android:src="@drawable/ic_edit_icon" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/title_delivery_address"
android:layout_marginLeft="@dimen/sixteen_dp"
android:layout_marginRight="@dimen/sixteen_dp"
android:layout_marginBottom="@dimen/eight_dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/icon_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="@dimen/eight_dp"
android:src="@drawable/address" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/delivery_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/eight_dp"
android:layout_toRightOf="@id/icon_address"
context:text="J;.Ismail marzuki" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/city_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/delivery_address"
android:layout_alignLeft="@id/delivery_address"
context:text="City : Lombok Barat" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/zip_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/delivery_address"
android:layout_alignBaseline="@id/city_address"
android:layout_alignParentRight="true"
context:text="Postal Code : 33349" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/two_dp"
android:layout_above="@+id/btn_pay_container"
android:background="@color/light_gray" />
<RelativeLayout
android:id="@+id/btn_pay_container"
android:layout_width="match_parent"
android:layout_height="@dimen/button_size"
android:layout_alignParentBottom="true"
android:clipToPadding="false"
android:padding="6dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="@dimen/two_dp"
app:cardElevation="@dimen/two_dp"
app:cardUseCompatPadding="true">
<com.midtrans.sdk.uikit.widgets.FancyButton
android:id="@+id/button_primary"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:fb_defaultColor="@color/colorPrimary"
app:fb_focusColor="@color/colorAccentLight"
app:fb_radius="@dimen/two_dp"
app:fb_text="@string/pay_now"
app:fb_textGravity="center_vertical"
app:fb_textSize="@dimen/button_primary_text_size" />
<ImageView
android:id="@+id/button_chevron"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_marginEnd="@dimen/four_dp"
android:layout_marginRight="@dimen/four_dp"
android:src="@drawable/ic_arrow_right_white" />
</androidx.cardview.widget.CardView>
</RelativeLayout>
</RelativeLayout>Anda buat layout product dengan nama activity_product_details.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
style="@style/ThemeOverlay.AppCompat.ActionBar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@color/white"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:title="">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/title"
style="@style/TextAppearance.AppCompat.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:text="Product Details" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:layout_below="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5">
<ImageView
android:id="@+id/image_product_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:src="@drawable/promo" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="@dimen/eight_dp"
android:layout_weight="0.5">
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/product_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/twenty_dp"
android:text="Rp.10000"
android:textColor="@color/navy_blue.secondary"
android:textSize="26sp" />
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/product_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/product_price"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/eight_dp"
android:text="product 1"
android:textSize="17sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/product_name"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/eight_dp"
android:gravity="center_vertical">
<com.kodetr.transaksi.widgets.WidgetsTextView
android:id="@+id/product_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4.0"
android:textSize="26sp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/eight_dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_star_fill" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_star_fill" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_star_fill" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_star_fill" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_star_empty" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<com.kodetr.transaksi.widgets.WidgetsTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2019"
android:textSize="10sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_reviewer" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/two_dp"
android:layout_above="@+id/btn_pay_container"
android:background="@color/light_gray" />
<RelativeLayout
android:id="@+id/btn_pay_container"
android:layout_width="match_parent"
android:layout_height="@dimen/button_size"
android:layout_alignParentBottom="true"
android:clipToPadding="false"
android:padding="6dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="@dimen/two_dp"
app:cardElevation="@dimen/two_dp"
app:cardUseCompatPadding="true">
<com.midtrans.sdk.uikit.widgets.FancyButton
android:id="@+id/button_primary"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:fb_defaultColor="@color/colorPrimary"
app:fb_focusColor="@color/colorAccentLight"
app:fb_radius="@dimen/two_dp"
app:fb_text="@string/pay_now"
app:fb_textGravity="center_vertical"
app:fb_textSize="@dimen/button_primary_text_size" />
<ImageView
android:id="@+id/button_chevron"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_marginEnd="@dimen/four_dp"
android:layout_marginRight="@dimen/four_dp"
android:src="@drawable/ic_arrow_right_white" />
</androidx.cardview.widget.CardView>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>Resource
Jika anda sudah mengikuti artikel ini sesuai intruksi dari vidio maka anda berhasil membuat aplikasi payment gateway menggunakan `midtrans.
Demikian yang dapat saya sampaikan dari artikel ini semoga bermanfaat, jika ada yang ditanyakan silahkan di kolom komentar dibawah, selamat mencoba.