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
    • 546
    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.

    <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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: