Skip to content
Create account
 or
Sign in
The Stripe Docs logo
/
Create account
Sign in

Accept a payment using Stripe Elements and the Charges APICharges API

Accept online payments from US and Canadian customers.

Copy page

Legacy API

The content of this section refers to a Legacy feature. Use the Payment Intents API instead.

The Charges API doesn’t support the following features, many of which are required for credit card compliance:

Use our pre-built card UI component to create a payment form that securely collects a customer’s card details without handling the sensitive data. The card details are then converted to a representative Token that you can safely send to your servers. Your server can use that token to create a charge.

Note

The steps in this guide are fully implemented on GitHub. Clone the repo and follow the instructions to run the demo app.

Set up Stripe
Client-side
Server-side

Server-side

This integration requires endpoints on your server that talk to the Stripe API. Use our official libraries for access to the Stripe API from your server:

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Client-side

The Stripe Android SDK is open source and fully documented.

To install the SDK, add stripe-android to the dependencies block of your app/build.gradle file:

build.gradle.kts
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Stripe Android SDK
  implementation("com.stripe:stripe-android:21.13.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:21.13.0")
}

Note

For details on the latest SDK release and past versions, see the Releases page on GitHub. To receive notifications when a new release is published, watch releases for the repository.

Configure the SDK with your Stripe publishable key so that it can make requests to the Stripe API, such as in your Application subclass:

import com.stripe.android.PaymentConfiguration

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        PaymentConfiguration.init(
            applicationContext,
            
"pk_test_TYooMQauvdEDq54NiTphI7jx"

        )
    }
}

Note

Use your test keys while you test and develop, and your live mode keys when you publish your app.

Create your payment form
Client-side

Securely collect card information on the client with CardInputWidget, a drop-in UI component provided by the SDK that collects the card number, expiration date, CVC, and postal code

CardInputWidget performs on-the-fly validation and formatting.

Create an instance of the card component and a Pay button by adding the following to your checkout page’s layout

content_checkout.xml
View full sample
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:showIn="@layout/activity_checkout"
        tools:context=".CheckoutActivity">

    <!--  ...  -->

    <com.stripe.android.view.CardInputWidget
            android:id="@+id/cardInputWidget"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"/>

    <Button
            android:text="Pay"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/payButton"
            android:layout_marginTop="20dp"
            app:layout_constraintTop_toBottomOf="@+id/cardInputWidget"
            app:layout_constraintStart_toStartOf="@+id/cardInputWidget"
            app:layout_constraintEnd_toEndOf="@+id/cardInputWidget"/>

      <!--  ...  -->

</androidx.constraintlayout.widget.ConstraintLayout>

Run your app, and make sure your checkout page shows the card component and pay button.

Create a token
Client-side

When the user taps the pay button, convert the card information collected by CardInputWidget into a Stripe token. Tokenisation ensures that no sensitive card data ever needs to touch your server, so that your integration remains PCI compliant.

The following code shows how to use Stripe#createToken(). The method takes a Card instance as the first parameter. The second parameter is ApiResultCallback<Token> instance that the client invokes on success or failure. When tokenization completes successfully, send the returned token ID to your server.

CheckoutActivityKotlin.kt
View full sample
// Hook up the pay button to the card widget and Stripe instance
val payButton: Button = findViewById(R.id.payButton)
val weakActivity = WeakReference<Activity>(this@CheckoutActivityKotlin)
payButton.setOnClickListener {
    // Get the card details from the card widget
    val cardInputWidget =
        findViewById<CardInputWidget>(R.id.cardInputWidget)
    cardInputWidget.card?.let { card ->
        // Create a Stripe token from the card details
        stripe = Stripe(applicationContext, PaymentConfiguration.getInstance(applicationContext).publishableKey)
        stripe.createToken(card, object: ApiResultCallback<Token> {
            override fun onSuccess(result: Token) {
                val tokenID = result.id
                // Send the Token identifier to the server...
            }

            override fun onError(e: java.lang.Exception) {
                // Handle error
            }
        })
    }
}

Send the Token id to your server from the client.

Create a charge with the token
Server-side

Command Line
curl https://api.stripe.com/v1/charges \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=999 \
  -d "currency"="usd" \
  -d "description"="Example charge" \
  -d "source"="tok_visa"

The response from creating a charge will either be a charge or an error with an error code. If the response succeeds you can fulfill the customer’s order and show them a success screen. Otherwise, you can show them an error.

Test your integration

If you can reliably enter a test card in the card element, submit it to the server, and see that your server created the charge, then your integration is finished.

You’ve created a Charges API integration to start accepting card payments right away. This API doesn’t support scaling businesses or customers outside the US and Canada. For more robust and global payments, learn to accept a payment with the Payment Intents API.

See also

Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access programme.
Check out our changelog.
Questions? Contact Sales.
LLM? Read llms.txt.
Powered by Markdoc