SupportAPI referenceClassic API docs
Guides
Start typing to searchā€¦

Frames for Android

Start accepting online payments in just a few minutes with Frames for Android. It's quick and easy to integrate, accepts online payments from all major credit cards, and is customizable to your brand.

šŸš§

Minimum requirements
In order to use Frames for Android, you must be on at least version 4.1 (API 16) of the SDK.

šŸ‘

Frames for Android is released under the MIT license.

How it works

  1. You either embed our own customizable UI in your mobile app or, if you want full flexibility, you can build your own payment form and use Frames for Android in a headless mode.

  2. Frames for Android is then used to take your customer's sensitive information and exchange them for a secure token. This process is called tokenization. Once you have the card token, you're ready to make the payment request.

1559

Demo (our pre-built UI)

406

Integrate Frames for Android

Before you start

Make sure you have your public_key. You can find it in the Hub, under Settings > Channels. If you don't have an account with us yet, you can request a free test one at Checkout.com.

Step 1: Add the dependence repository

// project gradle file
allprojects {
 repositories {
  ...
  maven { url 'https://jitpack.io' }
 }
}

Step 2: Add Frames and its dependencies in gradle

// module gradle file
dependencies {
 implementation 'com.android.support:design:27.1.1'
 implementation 'com.google.code.gson:gson:2.8.5'
 implementation 'com.android.volley:volley:1.1.0'
 implementation 'com.github.checkout:frames-android:v2.0.6'
}

šŸ‘

Learn more about gradle files.

Step 3: Decide whether or not to use our pre-built UI

The usage guidelines vary slightly depending on your choice:

Usage (with the module's UI)

Step 1: Add the module to your XML layout

<com.checkout.android_sdk.PaymentForm
   android:id="@+id/checkout_card_form"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
 />

Step 2: Include the module in your class

private PaymentForm mPaymentForm; // include the payment form

Step 3: Create a callback for the payment form

PaymentFormCallback mFormListener = new PaymentFormCallback() {
  @Override
  public void onFormSubmit() {
    // form submit initiated; you can potentially display a loader 
  }
  @Override
  public void onTokenGenerated(CardTokenisationResponse response) {
    // your token is here
    mPaymentForm.clearForm(); // this clears the Payment Form
  }
  @Override
  public void onError(CardTokenisationFail response) {
    // token request error
  }
  @Override
  public void onNetworkError(VolleyError error) {
    // network error
  }
  @Override
  public void onBackPressed() {
    // the user decided to leave the payment page
    mPaymentForm.clearForm(); // this clears the Payment Form
  }
};

Step 4:: Initialize the module

// initialise the payment from 
  mPaymentForm = findViewById(R.id.checkout_card_form);
  mPaymentForm
    .setSubmitListener(mSubmitListener)    // set the callback
    .setEnvironment(Environment.SANDBOX)   // set the environemnt
    .setKey("pk_xxx");                     // set your public key

Usage (without the module's UI)

Step 1: Include the module in your class

private CheckoutAPIClient mCheckoutAPIClient; // include the module

Step 2: Create a callback

CheckoutAPIClient.OnTokenGenerated mTokenListener = new CheckoutAPIClient.OnTokenGenerated() {
  @Override
  public void onTokenGenerated(CardTokenisationResponse token) {
    // your token
  }
  @Override
  public void onError(CardTokenisationFail error) {
    // your error
  }
  @Override
  public void onNetworkError(VolleyError error) {
    // your network error
  }
};

Step 3:Initialize the module and pass the card details

mCheckoutAPIClient = new CheckoutAPIClient(
  this,                // context
  "pk_XXXXX",          // your public key
  Environment.SANDBOX  // the environment
);
mCheckoutAPIClient.setTokenListener(mTokenListener); // pass the callback
   // Pass the payload and generate the token
   mCheckoutAPIClient.generateToken(
     new CardTokenisationRequest(
       "4242424242424242",
       "name",
       "06",
       "25",
       "100",
       new BillingModel(
         "address line 1",
         "address line 2",
         "postcode",
         "UK",
         "city",
         "state",
         new PhoneModel(
           "+44",
           "07123456789"
         )
       )
     )
   );

Makes Frames for Android your own

Customization

Although we kept our demo simple, you have a lot of control over the appearance of your form ā€” from the colours and styling, to whether you want to display one input field or several. Check out our Frames customization guide for more details and examples.

Configuration options

You'll find a list of all the possible configuration options in our Frames for Android reference guide.

Next step

Now that you've got your card token, you're ready to request your first card payment.

Start testing

Ready to try out your integration? Create a test account to get everything working perfectly before going live.\ Get test account

Can we help?

Thanks for using Checkout.com. If you need any help or support, then message our support team at [email protected].

Updated 5 months ago