Add the Amazon Pay button

• Android
  • 1. Add .aar file under your “lib” folder of your Android app project
  • 2. Add Dependencies
  • 3. Render 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

The Amazon Pay checkout experience starts when the buyer clicks on the Amazon Pay button. Add Amazon Pay to the payment selection at the end of checkout of your shop. You have 2 options for adding AmazonPay button: Call AmazonPay’s renderButton method to render AmazonPay button and handle button click, or create a custom button and call AmazonPay’s initCheckout method to handle button click.

Android

1. Add .aar file under your “lib” folder of your Android app 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 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 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 Saved Wallet Setup Only flow by calling the renderButton method:

import com.amazonpay.android.AmazonPayButton

@Composable
fun SavedWalletSetupOnlyButton() {

    // 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", "PayOnly")
    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")

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

    // Adding paymentDetails to checkoutSessionConfig
    checkoutSessionConfig.put("paymentDetails", paymentDetails)
    
    //Creating PMOF fields
    checkoutSessionConfig.put("chargePermissionType", "PaymentMethodOnFile")
    
    val paymentMethodOnFileMetadata = JSONObject()
    paymentMethodOnFileMetadata.put("setupOnly", true)

    checkoutSessionConfig.put("paymentMethodOnFileMetadata", paymentMethodOnFileMetadata)

    // 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 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 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 Saved Wallet Setup Only flow.

@Composable
fun InitCheckoutSavedWalletSetupOnlyFlowButton() {
    val jsonObject = JSONObject()
    jsonObject.put("merchantId", "A3LVSV45M75151")
    jsonObject.put("placement", "Cart")
    jsonObject.put("checkoutLanguage", "en_US")
    jsonObject.put("ledgerCurrency", "USD")
    jsonObject.put("productType", "PayOnly")
    jsonObject.put("sandbox", false)
    jsonObject.put("useUniversalLink", true)
    jsonObject.put("buttonColor", "GOLD")

    val checkoutSessionConfig = JSONObject()

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

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

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

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

    // Creating PMOF fields
    checkoutSessionConfig.put("chargePermissionType", "PaymentMethodOnFile")

    val paymentMethodOnFileMetadata = JSONObject()
    paymentMethodOnFileMetadata.put("setupOnly", true)

    checkoutSessionConfig.put("paymentMethodOnFileMetadata", paymentMethodOnFileMetadata)

    // 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 Saved Wallet Setup Only 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": "PayOnly",  
           "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"
               },  
               "scopes": [  "name",  "email",  "phoneNumber",  "billingAddress"  ],  
               "paymentDetails": 
               {  
                   "paymentIntent": "Confirm",  
                   "canHandlePendingAuthorization": false
               }, 
               "chargePermissionType": "PaymentMethodOnFile",
               "paymentMethodOnFileMetaData": {
                   "setupOnly":true
               }
           } 
        } 
        """
        ButtonRenderer.renderButton(config: config)
}

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 Saved Wallet Setup Only flow:

@objc func onButtonClicked(_ sender: Any) {
   config=""" 
    {  
        "merchantId": "A2Y3FXLHM8H7PR",  
        "placement": "Cart",  
        "checkoutLanguage": "en_US",  
        "ledgerCurrency": "USD",  
        "productType": "PayOnly",  
        "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"
            },  
            "scopes": [  "name",  "email",  "phoneNumber",  "billingAddress"  ],  
            "paymentDetails": 
            {  
                "paymentIntent": "Confirm",  
                "canHandlePendingAuthorization": false
            },
            "chargePermissionType": "PaymentMethodOnFile",
            "paymentMethodOnFileMetaData": {
                "setupOnly":true
            }
        } 
    } 
    """
    ButtonRenderer.initCheckout(context: self, config: config)
 } 

Button render parameters

CheckoutSessionConfig Fields

Type: webCheckoutDetails

Type: paymentDetails