Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to checkout using credit card using shopify ?

    • 1
    • 0
    • 0
    • 0
    • 2
    • 0
    • 0
    • 0
    • 632
    Comment on it

    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.

    1. <LinearLayout
    2. android:id="@+id/registration_layout"
    3. android:layout_width="match_parent"
    4. android:layout_height="wrap_content"
    5. android:layout_gravity="center"
    6. android:gravity="center"
    7. android:orientation="vertical">
    8.  
    9. <android.support.design.widget.TextInputLayout
    10. android:layout_width="match_parent"
    11. android:layout_height="50dp"
    12. android:background="@drawable/grey_border_btn"
    13. android:layout_margin="@dimen/padding_ten">
    14.  
    15. <EditText
    16. android:id="@+id/etCheckoutNumber"
    17. android:layout_width="match_parent"
    18. android:background="@null"
    19. android:layout_height="match_parent"
    20. android:layout_margin="@dimen/padding_ten"
    21. android:hint="@string/text_card"
    22. android:maxLength="16"
    23. android:paddingLeft="@dimen/margin_twenty"
    24. android:textColorHint="@color/dark_gray"
    25. android:textSize="@dimen/text_size_mid"
    26. android:inputType="number"
    27. android:singleLine="true"/>
    28.  
    29. </android.support.design.widget.TextInputLayout>
    30.  
    31. <android.support.design.widget.TextInputLayout
    32. android:layout_width="match_parent"
    33. android:layout_height="50dp"
    34. android:background="@drawable/grey_border_btn"
    35. android:layout_margin="@dimen/padding_ten">
    36.  
    37. <EditText
    38. android:id="@+id/etCheckoutFname"
    39. android:layout_width="match_parent"
    40. android:layout_height="match_parent"
    41. android:hint="@string/hint_card_name"
    42. android:background="@null"
    43. android:maxLength="15"
    44. android:paddingLeft="@dimen/margin_twenty"
    45. android:textColorHint="@color/dark_gray"
    46. android:layout_margin="@dimen/padding_ten"
    47. android:textSize="@dimen/text_size_mid"
    48. android:inputType="text|textCapWords|textNoSuggestions"
    49. android:singleLine="true"/>
    50.  
    51. </android.support.design.widget.TextInputLayout>
    52.  
    53. <LinearLayout
    54. android:layout_width="match_parent"
    55. android:orientation="horizontal"
    56. android:layout_height="50dp"
    57. android:layout_margin="@dimen/padding_ten"
    58. >
    59.  
    60. <android.support.design.widget.TextInputLayout
    61. android:layout_width="wrap_content"
    62. android:layout_height="match_parent"
    63. android:layout_weight="1"
    64. android:background="@drawable/grey_border_btn"
    65. >
    66.  
    67. <EditText
    68. android:id="@+id/etCheckoutCVV"
    69. android:layout_width="match_parent"
    70. android:layout_height="match_parent"
    71. android:hint="@string/text_cvv"
    72. android:layout_margin="@dimen/padding_ten"
    73. android:background="@null"
    74. android:paddingLeft="@dimen/margin_twenty"
    75. android:textColorHint="@color/dark_gray"
    76. android:textSize="@dimen/text_size_mid"
    77. android:maxLength="3"
    78. android:inputType="number"
    79. android:singleLine="true"/>
    80.  
    81. </android.support.design.widget.TextInputLayout>
    82.  
    83. <RelativeLayout
    84. android:orientation="horizontal"
    85. android:layout_width="wrap_content"
    86. android:layout_marginLeft="@dimen/padding_ten"
    87. android:layout_height="match_parent"
    88. android:layout_weight="1"
    89. android:background="@drawable/grey_border_btn">
    90.  
    91. <RelativeLayout
    92. android:layout_width="wrap_content"
    93. android:layout_centerInParent="true"
    94. android:layout_height="wrap_content">
    95.  
    96. <EditText
    97. android:id="@+id/etCheckoutMonth"
    98. android:layout_width="wrap_content"
    99. android:layout_height="match_parent"
    100. android:layout_alignParentLeft="true"
    101. android:hint="@string/text_mm"
    102. android:textSize="@dimen/text_size_mid"
    103. android:maxLength="2"
    104. android:inputType="number"/>
    105.  
    106.  
    107. <TextView
    108. android:layout_width="wrap_content"
    109. android:layout_height="wrap_content"
    110. android:text="@string/text_slash"
    111. android:id="@+id/slash"
    112. android:layout_centerVertical="true"
    113. android:layout_toRightOf="@id/etCheckoutMonth"
    114. android:textSize="@dimen/text_size_large"
    115. android:paddingLeft="@dimen/padding_ten"
    116. android:textColor="@color/dark_gray"/>
    117.  
    118. <EditText
    119. android:id="@+id/etCheckoutYear"
    120. android:layout_width="wrap_content"
    121. android:layout_height="match_parent"
    122. android:paddingLeft="@dimen/padding_ten"
    123. android:layout_marginLeft="@dimen/padding_ten"
    124. android:layout_toRightOf="@id/slash"
    125. android:maxLength="2"
    126. android:hint="@string/text_yy"
    127. android:textSize="@dimen/text_size_mid"
    128. android:inputType="number"/>
    129.  
    130. </RelativeLayout>
    131. </RelativeLayout>
    132. </LinearLayout>

    2. In Activity class enter the following fields :

    1. private void saveCreditCardInfo(){
    2.  
    3. CreditCard creditCard = new CreditCard();
    4. String[] name = etCheckoutFname.getText().toString().split("\\s+");
    5. creditCard.setFirstName(name[0]);
    6. creditCard.setLastName(name[1]);
    7. creditCard.setMonth(etCheckoutMonth.getText().toString());
    8. creditCard.setYear(etCheckoutYear.getText().toString());
    9. creditCard.setVerificationValue(etCheckoutCVV.getText().toString());
    10. creditCard.setNumber(etCheckoutNumber.getText().toString());
    11.  
    12. SampleApplication.getBuyClient().storeCreditCard(creditCard,
    13. AppSharedPrefrences.getCheckout(CheckoutActivity.this),
    14. new Callback<PaymentToken>() {
    15.  
    16. @Override
    17. public void success(PaymentToken response) {
    18. AppLogs.printLogs("payment token saved :", response.toString());
    19. AppSharedPrefrences.savePaymentToken(response, CheckoutActivity.this);
    20. completeCheckout();
    21. }
    22.  
    23. @Override
    24. public void failure(BuyClientError error) {
    25. AppLogs.printLogs("payment token err :", error.toString());
    26. AppLogs.printLogs("payment token err :", error.getRetrofitErrorBody());
    27.  
    28. }
    29. });
    30.  
    31. }

    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 :

    1. 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 :

    1. public static void savePaymentToken(PaymentToken aPaymentToken,Activity aActivity){
    2. mSharedPreferences = PreferenceManager.getDefaultSharedPreferences(aActivity);
    3. mEditor= mSharedPreferences.edit();
    4. mGson = new Gson();
    5. String json = mGson.toJson(aPaymentToken);
    6. mEditor.putString(key_payment_info, json);
    7. mEditor.commit();
    8. }
    9. public static PaymentToken getPaymentToken(Activity aActivity){
    10. mGson = new Gson();
    11. mSharedPreferences = PreferenceManager.getDefaultSharedPreferences(aActivity);
    12. String json = mSharedPreferences.getString(key_payment_info, "");
    13. PaymentToken paymentToken = mGson.fromJson(json, PaymentToken.class);
    14. return paymentToken;
    15. }

    5. If you are getting success saving credit card then you have to complete checkout process like this :

    1. private void completeCheckout(){
    2. SampleApplication.getBuyClient().completeCheckout(AppSharedPrefrences.getPaymentToken(CheckoutActivity.this),
    3. AppSharedPrefrences.getCheckout(CheckoutActivity.this).getToken(),
    4. new Callback<Checkout>() {
    5.  
    6. @Override
    7. public void success(Checkout response) {
    8. AppLogs.printLogs("Checkout completed :", response.toJsonString());
    9. Toast.makeText(CheckoutActivity.this, "Payment done, Please check order history.", Toast.LENGTH_LONG).show();
    10. progressDialog.dismiss();
    11. AppSharedPrefrences.clearCart(CheckoutActivity.this);
    12. AppSharedPrefrences.clearCheckout(CheckoutActivity.this);
    13. AppSharedPrefrences.clearPaymentToken(CheckoutActivity.this);
    14. @Override
    15. public void failure(BuyClientError error) {
    16. AppLogs.printLogs("Checkout completed err :", error.toString());
    17. progressDialog.dismiss();
    18. Toast.makeText(CheckoutActivity.this, AppConstant.sNotValidCard, Toast.LENGTH_LONG).show();
    19.  
    20. }
    21. });
    22. }
    1. 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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: