In our previous tutorial we learn about checkout and shipping address process, now we ll learn about payment process. Basically Shopify provides paypal, credit card shopify payments, web checkout etc you can check all the payments options on shopify admin panel.
Below is the procedure of credit card payment :
1.
<LinearLayout
android:id="@+id/registration_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/grey_border_btn"
android:layout_margin="@dimen/padding_ten">
<EditText
android:id="@+id/etCheckoutNumber"
android:layout_width="match_parent"
android:background="@null"
android:layout_height="match_parent"
android:layout_margin="@dimen/padding_ten"
android:hint="@string/text_card"
android:maxLength="16"
android:paddingLeft="@dimen/margin_twenty"
android:textColorHint="@color/dark_gray"
android:textSize="@dimen/text_size_mid"
android:inputType="number"
android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/grey_border_btn"
android:layout_margin="@dimen/padding_ten">
<EditText
android:id="@+id/etCheckoutFname"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="@string/hint_card_name"
android:background="@null"
android:maxLength="15"
android:paddingLeft="@dimen/margin_twenty"
android:textColorHint="@color/dark_gray"
android:layout_margin="@dimen/padding_ten"
android:textSize="@dimen/text_size_mid"
android:inputType="text|textCapWords|textNoSuggestions"
android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="50dp"
android:layout_margin="@dimen/padding_ten"
>
<android.support.design.widget.TextInputLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/grey_border_btn"
>
<EditText
android:id="@+id/etCheckoutCVV"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="@string/text_cvv"
android:layout_margin="@dimen/padding_ten"
android:background="@null"
android:paddingLeft="@dimen/margin_twenty"
android:textColorHint="@color/dark_gray"
android:textSize="@dimen/text_size_mid"
android:maxLength="3"
android:inputType="number"
android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>
<RelativeLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_marginLeft="@dimen/padding_ten"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/grey_border_btn">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="wrap_content">
<EditText
android:id="@+id/etCheckoutMonth"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:hint="@string/text_mm"
android:textSize="@dimen/text_size_mid"
android:maxLength="2"
android:inputType="number"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_slash"
android:id="@+id/slash"
android:layout_centerVertical="true"
android:layout_toRightOf="@id/etCheckoutMonth"
android:textSize="@dimen/text_size_large"
android:paddingLeft="@dimen/padding_ten"
android:textColor="@color/dark_gray"/>
<EditText
android:id="@+id/etCheckoutYear"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="@dimen/padding_ten"
android:layout_marginLeft="@dimen/padding_ten"
android:layout_toRightOf="@id/slash"
android:maxLength="2"
android:hint="@string/text_yy"
android:textSize="@dimen/text_size_mid"
android:inputType="number"/>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
2. In Activity class enter the following fields :
private void saveCreditCardInfo(){
CreditCard creditCard = new CreditCard();
String[] name = etCheckoutFname.getText().toString().split("\\s+");
creditCard.setFirstName(name[0]);
creditCard.setLastName(name[1]);
creditCard.setMonth(etCheckoutMonth.getText().toString());
creditCard.setYear(etCheckoutYear.getText().toString());
creditCard.setVerificationValue(etCheckoutCVV.getText().toString());
creditCard.setNumber(etCheckoutNumber.getText().toString());
SampleApplication.getBuyClient().storeCreditCard(creditCard,
AppSharedPrefrences.getCheckout(CheckoutActivity.this),
new Callback<PaymentToken>() {
@Override
public void success(PaymentToken response) {
AppLogs.printLogs("payment token saved :", response.toString());
AppSharedPrefrences.savePaymentToken(response, CheckoutActivity.this);
completeCheckout();
}
@Override
public void failure(BuyClientError error) {
AppLogs.printLogs("payment token err :", error.toString());
AppLogs.printLogs("payment token err :", error.getRetrofitErrorBody());
}
});
}
3. Method to store credit card information on shopify server and it ll return a payment token that you ll save in local for later uses :
CancellableTask storeCreditCard(CreditCard card, Checkout checkout, Callback<PaymentToken> callback);
this is the callnback method of shopify sdk that you can use to store credit card.
4. Here you can save your payment token locally like this :
public static void savePaymentToken(PaymentToken aPaymentToken,Activity aActivity){
mSharedPreferences = PreferenceManager.getDefaultSharedPreferences(aActivity);
mEditor= mSharedPreferences.edit();
mGson = new Gson();
String json = mGson.toJson(aPaymentToken);
mEditor.putString(key_payment_info, json);
mEditor.commit();
}
public static PaymentToken getPaymentToken(Activity aActivity){
mGson = new Gson();
mSharedPreferences = PreferenceManager.getDefaultSharedPreferences(aActivity);
String json = mSharedPreferences.getString(key_payment_info, "");
PaymentToken paymentToken = mGson.fromJson(json, PaymentToken.class);
return paymentToken;
}
5. If you are getting success saving credit card then you have to complete checkout process like this :
private void completeCheckout(){
SampleApplication.getBuyClient().completeCheckout(AppSharedPrefrences.getPaymentToken(CheckoutActivity.this),
AppSharedPrefrences.getCheckout(CheckoutActivity.this).getToken(),
new Callback<Checkout>() {
@Override
public void success(Checkout response) {
AppLogs.printLogs("Checkout completed :", response.toJsonString());
Toast.makeText(CheckoutActivity.this, "Payment done, Please check order history.", Toast.LENGTH_LONG).show();
progressDialog.dismiss();
AppSharedPrefrences.clearCart(CheckoutActivity.this);
AppSharedPrefrences.clearCheckout(CheckoutActivity.this);
AppSharedPrefrences.clearPaymentToken(CheckoutActivity.this);
@Override
public void failure(BuyClientError error) {
AppLogs.printLogs("Checkout completed err :", error.toString());
progressDialog.dismiss();
Toast.makeText(CheckoutActivity.this, AppConstant.sNotValidCard, Toast.LENGTH_LONG).show();
}
});
}
CancellableTask completeCheckout(PaymentToken paymentToken, String checkoutToken, Callback<Checkout> callback);
this is a callback method of shopify to complete checkout process at last.
Here you can clear all your cart that you saved locally and you can clear all checkout from local so that it ll not show next time again.
In our next tutorial you can check all your orders list.
2 Comment(s)