Add the Amazon Pay button

• Android
  • 1. Add the Amazon Pay Android SDK library to your Android project
  • 2. Add dependencies
  • 3. Render the Amazon Pay button
• IOS
  • 1. Add the Amazon Pay SDK library to your iOS project
  • 2. Add dependencies
  • 3. Render the Amazon Pay button
• Button render parameters
• CheckoutSessionConfig Fields
  • Type: webCheckoutDetails
  • Type: paymentDetails

To start Amazon Pay checkout, the buyer taps the Amazon Pay button. Add this option at the end of your checkout flow. You have 2 choices for the button: Call renderButton to create the button and handle clicks, or make a custom button and call initCheckout to handle clicks.

Android

1. Add the Amazon Pay Android SDK library to your Android project

Copy the .aar file from the Android bundle you’ve downloaded to the /app/lib folder in your Android project directory.

2. Add dependencies

In your module-level build.gradle file, add the following dependencies:

apply plugin: 'kotlin-kapt'

dependencies {

    implementation fileTree(include: ['*.jar', '*.aar'], dir: 'libs')
    releaseImplementation files('libs/AmazonPayAndroidLib-release.aar')

    implementation 'androidx.activity:activity-compose:1.9.0'
    implementation platform('androidx.compose:compose-bom:2024.06.00')
    implementation 'androidx.compose.ui:ui'
    implementation 'androidx.compose.ui:ui-graphics'
    implementation 'androidx.compose.ui:ui-tooling-preview'
    implementation 'androidx.compose.material3:material3'

    implementation 'androidx.appcompat:appcompat:1.7.0'
    implementation 'androidx.core:core-ktx:1.13.1'
    implementation 'org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3'
    implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.9.22'
    implementation 'org.jetbrains.kotlin:kotlin-reflect:1.9.22'
    implementation 'com.android.volley:volley:1.2.1'
    implementation 'androidx.browser:browser:1.8.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.8.3'
    implementation 'com.google.dagger:dagger:2.51.1'
    kapt 'com.google.dagger:dagger-compiler:2.51.1'
    implementation 'com.google.dagger:dagger-android:2.51.1'
    implementation 'com.google.dagger:dagger-android-support:2.51.1'
    kapt 'com.google.dagger:dagger-android-processor:2.51.1'
}

After you have added the dependencies in your module-level build.gradle file, got to the Android Studio menu, select File, and then click Sync Projects with Gradle Files to make sure the project is synchronized with the updated dependencies.

3. Render the Amazon Pay button

To render the button, you have 2 options:

1. Invoke renderButton to display a Composable Amazon Pay button.
2. Create your button and call initCheckout when clicked.

3.1 renderButton method

The renderButton method accepts a JSON object as input and returns a Composable button. You can use the JSON object to trigger one of the 5 supported flows by using the 1. Button render parameters

Here is an example of creating a Composable Amazon Pay button with the One-Time End-Of-Checkout flow using the PayAndShip product type by calling the renderButton method:

import com.amazonpay.android.AmazonPayButton

@Composable
fun OneTimeEndofCheckoutPayAndShipButton() {

 // Initiate a JSONObject as the input of renderButton() method
 val jsonObject = JSONObject()
 jsonObject.put("merchantId", "A2Y3FXLHM8H7PR")
 jsonObject.put("placement", "Cart")
 jsonObject.put("checkoutLanguage", "en_US")
 jsonObject.put("ledgerCurrency", "USD")
 jsonObject.put("productType", "PayAndShip")
 jsonObject.put("sandbox", false)
 jsonObject.put("useUniversalLink", true)

 // Creating checkoutSessionConfig
 val checkoutSessionConfig = JSONObject()

 // Adding storeId
 checkoutSessionConfig.put("storeId", "amzn1.application-oa2-client.456a4c3b15d24aae96256d2f82afdd73")

 // Creating webCheckoutDetails 
 val webCheckoutDetails = JSONObject()
 webCheckoutDetails.put("checkoutResultReturnUrl", "https://www.testMerchant.com/return")
 webCheckoutDetails.put("checkoutCancelUrl", "https://www.testMerchant.com/cancel")
 webCheckoutDetails.put("checkoutErrorUrl", "https://www.testMerchant.com/error")
 webCheckoutDetails.put("checkoutMode", "ProcessOrder")

 // Adding webCheckoutDetails to checkoutSessionConfig
 checkoutSessionConfig.put("webCheckoutDetails", webCheckoutDetails)

 // Creating scopes array
 val scopesArray = JSONArray()
 scopesArray.put("name")
 scopesArray.put("email")
 scopesArray.put("phoneNumber")
 scopesArray.put("billingAddress")

 // Adding scopes to checkoutSessionConfig
 checkoutSessionConfig.put("scopes", scopesArray)

 // Creating paymentDetails object
 val paymentDetails = JSONObject()
 paymentDetails.put("paymentIntent", "Confirm")
 paymentDetails.put("canHandlePendingAuthorization", false)

 // Creating chargeAmount object
 val chargeAmount = JSONObject()
 chargeAmount.put("amount", "1.00")
 chargeAmount.put("currencyCode", "USD")

 // Adding chargeAmount to paymentDetails
 paymentDetails.put("chargeAmount", chargeAmount)

 // Adding paymentDetails to checkoutSessionConfig
 checkoutSessionConfig.put("paymentDetails", paymentDetails)
 // Creating addressDetails object
 val addressDetails = JSONObject()
 addressDetails.put("name", "Alice Test")
 addressDetails.put("addressLine1", "829 Stendhal Ln")
 addressDetails.put("addressLine2", JSONObject.NULL)
 addressDetails.put("addressLine3", JSONObject.NULL)
 addressDetails.put("city", "Cupertino")
 addressDetails.put("districtOrCounty", JSONObject.NULL)
 addressDetails.put("stateOrRegion", "CA")
 addressDetails.put("postalCode", "95014")
 addressDetails.put("countryCode", "US")
 addressDetails.put("phoneNumber", "211901222")

 // Adding addressDetails to checkoutSessionConfig
 checkoutSessionConfig.put("addressDetails", addressDetails)

 // Adding checkoutSessionConfig to main jsonObject
 jsonObject.put("checkoutSessionConfig", checkoutSessionConfig)

 // Pass jsonObject as the input, and call RenderButton method
 AmazonPayButton.RenderButton(config = jsonObject)
}

3.2 Render a proper button and initiate checkout

You can create your own Amazon Pay button by downloading the official Amazon Pay logo.

This section provides the steps for downloading the official Pay with Amazon button label and pairing it with an Android button.

1. Download Amazon Pay button labels.

2. Go to the directory app > res > drawable, and then click New > Vector Asset.

3. Add the svg files you downloaded.

4. To give your button an ID, do the following:

In the button’s XML declaration, set the android:id attribute to @+id/apayButton. The Amazon Pay button is available in three variations: gold, squidInk and white. Configure the logo and background accordingly.

- gold button
  - Set android:drawableLeft="@drawable/squid_ink_pwa" and android:background="@drawable/apay_button_background_gold"/>
- squidInk button
  - Set android:drawableLeft="@drawable/white_pwa" and android:background="@drawable/apay_button_background_dark"/>
- white button
  - Set android:drawableLeft="@drawable/squid_ink_pwa" and android:background="@drawable/apay_button_background_light"/>

The following code sample shows how to create an Amazon Pay button with customizable backgrounds in an Android app.

<!--Declare button xml in app/res/layout/activity_main.xml-->
<Button android:id="@+id/apayButton"
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:drawableLeft="@drawable/squid_ink_pwa"
        android:paddingLeft="55dp"
        android:paddingTop="17dp"
        android:paddingBottom="12dp"
        android:paddingRight="55dp"
        android:gravity="center"
        android:background="@drawable/apay_button_background_gold"/>

<!--Declare background xml in app/res/drawable/apay_button_background_light.xml-->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="4dp" />
    <stroke android:width="1.5dp" android:color="#232F3E" />
    <solid android:color="#FFFFFF" />
</shape>

<!--Declare background xml in app/res/drawable/apay_button_background_dark.xml-->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="4dp" />
    <stroke android:width="1.5dp" android:color="#232F3E" />
    <solid android:color="#232F3E" />
</shape>

<!--Declare background xml in app/res/drawable/apay_button_background_gold.xml-->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="4dp" />
    <stroke android:width="1.5dp" android:color="#FFD814" />
    <solid android:color="#FFD814" />
</shape>

4. After initializing the Amazon Pay button in the layout XML, you can reference it in your MainActivity and attach an OnClickListener. Following code sample shows how to use the OnClickListener.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById<Button>(R.id.apayButton).apply {
          setOnClickListener { onButtonClicked() }
        }
    }
}

5. Load your app and make sure the button shows the text “Pay with Amazon”. Confirm the button renders correctly across all supported screen densities. For guidance on handling multiple screen densities on Android, refer to the Supporting Multiple Screens” topic’s Alternative Layouts in the "Supporting Multiple Screens" topic on developer.android.com.

Inside the button’s click listener, call AmazonPayButton.initCheckout(). The method requires 2 parameters: context and jsonObject.

The following code sample shows how to call the initCheckout method for the Setup Saved Wallet flow with the PayAndShip project type.

@Composable
fun InitCheckoutOneTimeEndofCheckoutPayAndShipButton() {

    // Initiate a JSONObject as the input of renderButton() method
    val jsonObject = JSONObject()
    jsonObject.put("merchantId", "A2Y3FXLHM8H7PR")
    jsonObject.put("placement", "Cart")
    jsonObject.put("checkoutLanguage", "en_US")
    jsonObject.put("ledgerCurrency", "USD")
    jsonObject.put("productType", "PayAndShip")
    jsonObject.put("sandbox", false)
    jsonObject.put("useUniversalLink", true)

    // Creating checkoutSessionConfig
    val checkoutSessionConfig = JSONObject()

    // Adding storeId
    checkoutSessionConfig.put("storeId", "amzn1.application-oa2-client.456a4c3b15d24aae96256d2f82afdd73")

    // Creating webCheckoutDetails 
    val webCheckoutDetails = JSONObject()
    webCheckoutDetails.put("checkoutResultReturnUrl", "https://www.testMerchant.com/return")
    webCheckoutDetails.put("checkoutCancelUrl", "https://www.testMerchant.com/cancel")
    webCheckoutDetails.put("checkoutErrorUrl", "https://www.testMerchant.com/error")
    webCheckoutDetails.put("checkoutMode", "ProcessOrder")

    // Adding webCheckoutDetails to checkoutSessionConfig
    checkoutSessionConfig.put("webCheckoutDetails", webCheckoutDetails)

    // Creating scopes array
    val scopesArray = JSONArray()
    scopesArray.put("name")
    scopesArray.put("email")
    scopesArray.put("phoneNumber")
    scopesArray.put("billingAddress")

    // Adding scopes to checkoutSessionConfig
    checkoutSessionConfig.put("scopes", scopesArray)

    // Creating paymentDetails object
    val paymentDetails = JSONObject()
    paymentDetails.put("paymentIntent", "Confirm")
    paymentDetails.put("canHandlePendingAuthorization", false)

    // Creating chargeAmount object
    val chargeAmount = JSONObject()
    chargeAmount.put("amount", "1.00")
    chargeAmount.put("currencyCode", "USD")

    // Adding chargeAmount to paymentDetails
    paymentDetails.put("chargeAmount", chargeAmount)

    // Adding paymentDetails to checkoutSessionConfig
    checkoutSessionConfig.put("paymentDetails", paymentDetails)

    // Creating addressDetails object
    val addressDetails = JSONObject()
    addressDetails.put("name", "Alice Test")
    addressDetails.put("addressLine1", "829 Stendhal Ln")
    addressDetails.put("addressLine2", JSONObject.NULL)
    addressDetails.put("addressLine3", JSONObject.NULL)
    addressDetails.put("city", "Cupertino")
    addressDetails.put("districtOrCounty", JSONObject.NULL)
    addressDetails.put("stateOrRegion", "CA")
    addressDetails.put("postalCode", "95014")
    addressDetails.put("countryCode", "US")
    addressDetails.put("phoneNumber", "211901222")

    // Adding addressDetails to checkoutSessionConfig
    checkoutSessionConfig.put("addressDetails", addressDetails)

    // Adding checkoutSessionConfig to main jsonObject
    jsonObject.put("checkoutSessionConfig", checkoutSessionConfig)

    val context = LocalContext.current
    Button(
        onClick = {
            AmazonPayButton.initCheckout(context = context as AppCompatActivity, config = jsonObject)
        },
        modifier = Modifier
            .size(300f.dp, 70f.dp),
        colors = ButtonDefaults.buttonColors(Color.Magenta)) {
        Text(text = "Customized AmazonPay Button")
    }
}

IOS

1. Add the Amazon Pay SDK library to your iOS project

1.In Xcode, navigate to the Build Phase Tab.

2.Expand Link Binary with Libraries, and then click the + icon.

3.Select Add files, and then add the downloaded framework file.

4.Go to the general tab and scroll down to the Frameworks, Libraries and Embedded Content section.

5.Select Embed and Sign from the dropdown.

2. Add dependencies

To invoke the API, ensure the library is correctly imported: - import AmazonPayIosMSDKLib

3. Render the Amazon Pay button

To render the button, you have 2 options:

1. Invoke renderButton to display a Composable Amazon Pay button.
2. Create your button and call initCheckout when clicked.

3.1 Call renderButton method

The renderButton method accepts a multiline string literal as input and returns a UIbutton. You can trigger one of the 5 supported flows by following these parameters.

Here is an example of creating a Composable Amazon Pay button with the One-Time End-Of-Checkout flow using the PayAndShip product type by calling the renderButton method:

import UIKit
import AmazonPayIosMSDKLib

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        config=""" 
        {  
           "merchantId": "A2Y3FXLHM8H7PR",  
           "placement": "Cart",  
           "checkoutLanguage": "en_US",  
           "ledgerCurrency": "USD",  
           "productType": "PayAndShip",  
           "sandbox": false,  
           "useUniversalLink": true,  
           "checkoutSessionConfig": 
           {  
               "storeId": "amzn1.application-oa2-client.456a4c3b15d24aae96256d2f82afdd73",  
               "webCheckoutDetails": 
               {  
                   "checkoutResultReturnUrl": "https://www.testMerchant.com/return",  
                   "checkoutCancelUrl": "https://www.testMerchant.com/cancel",  
                   "checkoutErrorUrl": "https://www.testMerchant.com/error",  
                   "checkoutMode": "ProcessOrder"  
               },  
               "scopes": [  "name",  "email",  "phoneNumber",  "billingAddress"  ],  
               "paymentDetails": 
               {  
                   "paymentIntent": "Confirm",  
                   "canHandlePendingAuthorization": false,  
                   "chargeAmount": 
                   {  
                       "amount": "1.00",  
                       "currencyCode": "USD"  
                   }  
               },  
               "addressDetails": 
               {  
                   "name": "Alice Test",  
                   "addressLine1": "829 Stendhal Ln",  
                   "addressLine2": null,  
                   "addressLine3": null,  
                   "city": "Cupertino",  
                   "districtOrCounty": null,  
                   "stateOrRegion": "CA",  
                   "postalCode": "95014",  
                   "countryCode": "US",  
                   "phoneNumber": "211901222"  
               }  
           } 
        } 
        """
        ButtonRenderer.renderButton(config: config)
}

3.2 Render your Own Button & call InitCheckout method

You can create your own Amazon Pay button by downloading the official Amazon Pay logo.

This section provides the steps for downloading the official Pay with Amazon button label and pairing it with an iOS button.

1. Download Amazon Pay button labels.

2. Add a custom UIButton. The Amazon Pay button is available in three variations: gold, squidInk and white. 3. Configure the required color as a parameter to applyApayButtonStyle. 4. Add the TouchUpInside event for the button to a method named onButtonClicked. Leave the implementation empty for now.

The following code sample shows how to create an Amazon Pay button with customizable backgrounds in an iOS app.

import UIKit

extension UIButton {

    //Styling extension for Amazon Pay Button
    func applyApayButtonStyle(buttonColor: String, x: Int, y: Int) {
        struct apayColorScheme {
            static var white: UIColor {return UIColor(red:1,green:1,blue:1,alpha:1)}
            static var squidInk: UIColor {return  UIColor(red:35/255,green:47/255,blue:62/255,alpha:1)}
            static var gold: UIColor {return UIColor(red:1,green:216/255,blue:20/255,alpha:1)}
        }
        switch buttonColor {
                case "white": 
                self.backgroundColor = apayColorScheme.white
                self.layer.borderColor = apayColorScheme.squidInk.cgColor
                    self.setImage(UIImage(named: "squid_ink_pwa"), for: .normal)
                case "squidInk":
                    self.backgroundColor = apayColorScheme.squidInk
                    self.layer.borderColor = apayColorScheme.squidInk.cgColor
                    self.setImage(UIImage(named: "white_pwa"), for: .normal)
                case "gold": fallthrough
                default:
                self.backgroundColor = apayColorScheme.gold
                    self.layer.borderColor = apayColorScheme.gold.cgColor
                    self.setImage(UIImage(named: "squid_ink_pwa"), for: .normal)
        }
        
        self.layer.borderWidth = 1.5
        self.imageView?.contentMode = .scaleAspectFit
        self.imageEdgeInsets = UIEdgeInsets(top: 12, left: 8, bottom: 8, right: 8)
        self.layer.cornerRadius = 4
        self.layer.masksToBounds = true
        self.frame = CGRect(x: x, y: y, width: 200, height: 40)
        self.tintColor = .clear
    }
}
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let button = UIButton(type: .custom)
        button.applyApayButtonStyle(buttonColor: "gold")
        button.addTarget(self, action: #selector(onButtonClicked), for: .touchUpInside)
        self.view.addSubview(button)
    }
    
    @objc func onButtonClicked(_ sender: Any) {
    }
}     

Then inside onButtonClicked listener, call AmazonPay’s initCheckout method. initCheckout requires 2 inputs: context and JSONObject.

Here is an example for calling initCheckout method with One-Time End-Of-Checkout flow using PayAndShip product type:

@objc func onButtonClicked(_ sender: Any) {
   config=""" 
    {  
        "merchantId": "A2Y3FXLHM8H7PR",  
        "placement": "Cart",  
        "checkoutLanguage": "en_US",  
        "ledgerCurrency": "USD",  
        "productType": "PayAndShip",  
        "sandbox": false,  
        "useUniversalLink": true,  
        "checkoutSessionConfig": 
        {  
            "storeId": "amzn1.application-oa2-client.456a4c3b15d24aae96256d2f82afdd73",  
            "webCheckoutDetails": 
            {  
                "checkoutResultReturnUrl": "https://www.testMerchant.com/return",  
                "checkoutCancelUrl": "https://www.testMerchant.com/cancel",  
                "checkoutErrorUrl": "https://www.testMerchant.com/error",  
                "checkoutMode": "ProcessOrder"  
            },  
            "scopes": [  "name",  "email",  "phoneNumber",  "billingAddress"  ],  
            "paymentDetails": 
            {  
                "paymentIntent": "Confirm",  
                "canHandlePendingAuthorization": false,  
                "chargeAmount": 
                {  
                    "amount": "1.00",  
                    "currencyCode": "USD"  
                }  
            },  
            "addressDetails": 
            {  
                "name": "Alice Test",  
                "addressLine1": "829 Stendhal Ln",  
                "addressLine2": null,  
                "addressLine3": null,  
                "city": "Cupertino",  
                "districtOrCounty": null,  
                "stateOrRegion": "CA",  
                "postalCode": "95014",  
                "countryCode": "US",  
                "phoneNumber": "211901222"  
            }  
        } 
    } 
    """
    ButtonRenderer.initCheckout(context: self, config: config)
 }   

Button render parameters

CheckoutSessionConfig Fields

Type: webCheckoutDetails

Type: paymentDetails