Accept in-app payments

If you have payment options external to EmbeddedPaymentElement, you might need to clear the selected payment option. To do so, use the clearPaymentOption API to deselect the selected payment option.

@Composable
fun CheckoutScreen() {
    val embeddedPaymentElementBuilder = ....
    val embeddedPaymentElement = rememberEmbeddedPaymentElement(embeddedPaymentElementBuilder)

    ....

    Button(
        onClick = embeddedPaymentElement::clearPaymentOption
    ) {
        Text("Select external payment option")
    }
}

To ensure regulatory compliance, the Embedded Mobile Payment Element displays mandates and legal disclaimers by default. This text must be located close to your Buy button. If you disable the default display of this text in the view, you must display it yourself.

val configuration = EmbeddedPaymentElement.Configuration.Builder("Merchant, Inc")
    .embeddedViewDisplaysMandateText(false)
    .build()

....

val selectedPaymentOption by embeddedPaymentElement.paymentOption.collectAsState()
selectedPaymentOption?.mandateText?.let { mandateText ->
    Text(mandateText)
}

To configure the button in the form sheet to immediately confirm payment, set formSheetAction on your EmbeddedPaymentElement.Configuration object.

The completion block executes with the result of the payment after the sheet dismisses. The embedded UI isn’t usable after payment completes, so we recommend that your implementation directs the user to a different screen, such as a receipt screen.

@Composable
fun CheckoutScreen() {
    val embeddedBuilder = ....
    val embeddedPaymentElement = rememberEmbeddedPaymentElement(embeddedBuilder)

    LaunchedEffect(embeddedPaymentElement) {
        embeddedPaymentElement.configure(
            intentConfiguration = ....,
            configuration = EmbeddedPaymentElement.Configuration.Builder("Powdur")
                .formSheetAction(EmbeddedPaymentElement.FormSheetAction.Confirm)
                .build()
        )
    }
}

EmbeddedPaymentElement can allow the customer to save their card and can include the customer’s saved cards in available payment methods. The customer must have an associated Customer object on your server. To enable a checkbox that allows the customer to save their card, create an Ephemeral Key associated with the Customer.

const stripe = require("stripe")(
"sk_test_BQokikJOvBiI2HlWgH4olfQ2");
const express = require('express');
const app = express();

app.set('trust proxy', true);
app.use(express.json());

app.post('/payment-sheet', async (req, res) => {
  // Use an existing Customer ID if this is a returning customer.
  const customer = await stripe.customers.create();
  const ephemeralKey = await stripe.ephemeralKeys.create(
    {customer: customer.id},
    {apiVersion: '2020-08-27'}
  );

  res.json({
    ephemeralKey: ephemeralKey.secret,
    customer: customer.id,
  });
});

Next, configure EmbeddedPaymentElement with the Customer’s ID and the Ephemeral Key’s client secret.

val configuration = EmbeddedPaymentElement.Configuration.Builder("Merchant, Inc.")
    .customer(
        PaymentSheet.CustomerConfiguration(
            id = customerId,
            ephemeralKeySecret = customerEphemeralKeySecret,
        )
    )
    .build()

embeddedPaymentElement.configure(
  intentConfiguration = // ... ,
  configuration = configuration,
)

Delayed payment methods don’t guarantee that you’ll receive funds from your customer at the end of checkout, either because they take time to settle (for example, US Bank Accounts, SEPA Debit, iDEAL, Bancontact, and Sofort) or because they require customer action to complete (for example, OXXO, Konbini, and Boleto).

By default, EmbeddedPaymentElement doesn’t display delayed payment methods, even if you accept them. To display the delayed payment methods that you’ve enabled, set allowsDelayedPaymentMethods to true in your EmbeddedPaymentElement.Configuration.

val configuration = EmbeddedPaymentElement.Configuration.Builder(merchantDisplayName = "Powdur")
  .allowsDelayedPaymentMethods(true)
  .build()

If the customer successfully uses a delayed payment method in an EmbeddedPaymentElement, the payment result returned is EmbeddedPaymentElement.Result.Completed.

Set up your integration

To use Google Pay, first enable the Google Pay API by adding the following to the <application> tag of your AndroidManifest.xml:

<application>
  ...
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>

For more details, see Google Pay’s Set up Google Pay API for Android.

Add Google Pay

To add Google Pay to your integration, pass a PaymentSheet.GooglePayConfiguration with your Google Pay environment (production or test) and the country code of your business when initializing EmbeddedPaymentElement.Configuration.

val googlePayConfiguration = PaymentSheet.GooglePayConfiguration(
  environment = PaymentSheet.GooglePayConfiguration.Environment.Test,
  countryCode = "US",
  currencyCode = "USD" // Required for Setup Intents, optional for Payment Intents
)
val configuration = EmbeddedPaymentElement.Configuration.Builder("Merchant, Inc.")
    .googlePay(googlePayConfiguration)
    .build()

Test Google Pay

Google allows you to make test payments through their Test card suite. The test suite supports using stripe test cards.

You can test Google Pay using a physical Android device. Make sure you have a device in a country where google pay is supported and log in to a Google account on your test device with a real card saved to Google Wallet.

To enable card scanning support, add stripecardscan to the dependencies block of your app/build.gradle file:

apply plugin: 'com.android.application'

android { ... }

dependencies {
  // ...

  // StripeCardScan
  implementation 'com.stripe:stripecardscan:21.29.0'
}

All customization is configured through the EmbeddedPaymentElement.Configuration object.

Appearance

Customize colors, fonts, and so on to match the look and feel of your app by using the appearance API.

Collect customer addresses

Collect shipping and billing addresses from your customers using the Address Element.

Customize the displayed business name

Specify a customer-facing business name by setting merchantDisplayName. If you don’t specify a name, the default value is your app’s name.

val configuration = EmbeddedPaymentElement.Configuration.Builder(merchantDisplayName = "Merchant, Inc.")
    .build()

Specify default billing details

To set default values for billing details collected in EmbeddedPaymentElement, configure the defaultBillingDetails property. The EmbeddedPaymentElement pre-populates its fields with the values that you provide.

val configuration = EmbeddedPaymentElement.Configuration.Builder(merchantDisplayName = "Merchant, Inc.")
    .defaultBillingDetails(
       PaymentSheet.BillingDetails(
         address = PaymentSheet.Address(
           country = "US",
         ),
         email = "foo@bar.com"
      )
    )
    .build()

Configure collection of billing details

Use BillingDetailsCollectionConfiguration to specify how you want to collect billing details in the EmbeddedPaymentElement.

You can collect your customer’s name, email, phone number, and address.

If you want to attach default billing details to the PaymentMethod object even when those fields aren’t collected in the UI, set billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod to true.

import com.stripe.android.paymentsheet.PaymentSheet.BillingDetailsCollectionConfiguration

val billingDetails = PaymentSheet.BillingDetails(
    email = "foo@bar.com"
)
val billingDetailsCollectionConfiguration = BillingDetailsCollectionConfiguration(
    attachDefaultsToPaymentMethod = true,
    name = BillingDetailsCollectionConfiguration.CollectionMode.Always,
    email = BillingDetailsCollectionConfiguration.CollectionMode.Never,
    address = BillingDetailsCollectionConfiguration.AddressCollectionMode.Full,
)
val configuration = EmbeddedPaymentElement.Configuration.Builder(merchantDisplayName = "Merchant, Inc.")
    .defaultBillingDetails(billingDetails)
    .billingDetailsCollectionConfiguration(billingDetailsCollectionConfiguration)
    .build()

@Composable
fun CheckoutScreen(
  viewModel: MyCheckoutViewModel = viewModel()
) {
    val embeddedPaymentElementBuilder = remember {
        EmbeddedPaymentElement.Builder(
            createIntentCallback = viewModel::createIntentCallback,
            resultCallback = viewModel::onResultCallback,
        )
    }

    val embeddedPaymentElement = rememberEmbeddedPaymentElement(embeddedPaymentElementBuilder)

    LaunchedEffect(embeddedPaymentElement) {
        embeddedPaymentElement.configure(
            configuration = ....,
            intentConfiguration = PaymentSheet.IntentConfiguration(
                mode = Mode.Payment(amount = 1000, currency = "USD")
                paymentMethodTypes = paymentMethodTypes,
                paymentMethodConfigurationId = paymentMethodConfigurationId,
                requireCvcRecollection = true
            )
        )
    }
}

Update parameters of the intent creation

To re-collect the CVC when confirming payment, include both the customerId and require_cvc_recollection parameters during the creation of the PaymentIntent.

require 'stripe'
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'

post '/create-intent' do
  data = JSON.parse request.body.read
  params = {
    amount: 1099,
    currency: 'usd',
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: customer.id,
    payment_method_options: {
      card: {require_cvc_recollection: true}
    }
  }
  begin
    intent = Stripe::PaymentIntent.create(params)
    {client_secret: intent.client_secret}.to_json
  rescue Stripe::StripeError => e
    {error: e.error.message}.to_json
  end
end