Customizing Checkout

    Learn about the different ways you can customize your Stripe Checkout integration.

    Branding

    You can customize the look and feel of Checkout in the Stripe Dashboard. Go to Branding Settings where you can:

    • Upload a logo or icon
    • Customize the accent color of the Checkout page

    Customizing the Submit button

    You can configure the copy displayed on the Checkout submit button for one-time purchases to better align Checkout with your business model.

    Provide a submitType in the redirectToCheckout call:

    stripe.redirectToCheckout({
      items: [
        // Replace with the ID of your SKU
        {sku: 'sku_123', quantity: 1}
      ],
      successUrl: 'https://example.com/success',
      cancelUrl: 'https://example.com/cancel',
      submitType: 'donate',
    }).then(function (result) {
      // If `redirectToCheckout` fails due to a browser or network
      // error, display the localized error message to your customer
      // using `result.error.message`.
    });
    
    const {error} = await stripe.redirectToCheckout({
      items: [
        // Replace with the ID of your SKU
        {sku: 'sku_123', quantity: 1}
      ],
      successUrl: 'https://example.com/success',
      cancelUrl: 'https://example.com/cancel',
      submitType: 'donate',
    })
    // If `redirectToCheckout` fails due to a browser or network
    // error, display the localized error message to your customer
    // using `error.message`.
    

    In this example (for a 5 USD donation), your customized Checkout submit button would read Donate $5.00. See the Stripe.js Reference for a complete list of submitType options.

    Define a submit_type on your session:

    curl https://api.stripe.com/v1/checkout/sessions \
      -u sk_test_4eC39HqLyjWDarjtT1zdp7dc: \
      -d submit_type=donate \
      -d "payment_method_types[]"=card \
      -d "line_items[][name]"=T-shirt \
      -d "line_items[][description]"="Comfortable cotton t-shirt" \
      -d "line_items[][images][]"="https://example.com/t-shirt.png" \
      -d "line_items[][amount]"=500 \
      -d "line_items[][currency]"=usd \
      -d "line_items[][quantity]"=1 \
      -d success_url="https://example.com/success" \
      -d cancel_url="https://example.com/cancel"
    
    # Set your secret key: remember to change this to your live secret key in production
    # See your keys here: https://dashboard.stripe.com/account/apikeys
    Stripe.api_key = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
    
    session = Stripe::Checkout::Session.create(
      submit_type: 'donate',
      payment_method_types: ['card'],
      line_items: [{
        name: 'T-shirt',
        description: 'Comfortable cotton t-shirt',
        images: ['https://example.com/t-shirt.png'],
        amount: 500,
        currency: 'usd',
        quantity: 1,
      }],
      success_url: 'https://example.com/success',
      cancel_url: 'https://example.com/cancel',
    )
    
    # Set your secret key: remember to change this to your live secret key in production
    # See your keys here: https://dashboard.stripe.com/account/apikeys
    stripe.api_key = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
    
    session = stripe.checkout.Session.create(
      submit_type: 'donate',
      payment_method_types=['card'],
      line_items=[{
        'name': 'T-shirt',
        'description': 'Comfortable cotton t-shirt',
        'images': ['https://example.com/t-shirt.png'],
        'amount': 500,
        'currency': 'usd',
        'quantity': 1,
      }],
      success_url='https://example.com/success',
      cancel_url='https://example.com/cancel',
    )
    
    // Set your secret key: remember to change this to your live secret key in production
    // See your keys here: https://dashboard.stripe.com/account/apikeys
    \Stripe\Stripe::setApiKey('sk_test_4eC39HqLyjWDarjtT1zdp7dc');
    
    $session = \Stripe\Checkout\Session::create([
      'submit_type' => 'donate',
      'payment_method_types' => ['card'],
      'line_items' => [[
        'name' => 'T-shirt',
        'description' => 'Comfortable cotton t-shirt',
        'images' => ['https://example.com/t-shirt.png'],
        'amount' => 500,
        'currency' => 'usd',
        'quantity' => 1,
      ]],
      'success_url' => 'https://example.com/success',
      'cancel_url' => 'https://example.com/cancel',
    ]);
    
    // Set your secret key: remember to change this to your live secret key in production
    // See your keys here: https://dashboard.stripe.com/account/apikeys
    Stripe.apiKey = "sk_test_4eC39HqLyjWDarjtT1zdp7dc";
    
    Map<String, Object> params = new HashMap<String, Object>();
    
    params.put("submit_type", "donate");
    
    ArrayList<String> paymentMethodTypes = new ArrayList<>();
    paymentMethodTypes.add("card");
    params.put("payment_method_types", paymentMethodTypes);
    
    ArrayList<HashMap<String, Object>> lineItems = new ArrayList<>();
    HashMap<String, Object> lineItem = new HashMap<String, Object>();
    lineItem.put("name", "T-shirt");
    lineItem.put("description", "Comfortable cotton t-shirt");
    lineItem.put("amount", 500);
    lineItem.put("currency", "usd");
    lineItem.put("quantity", 1);
    lineItems.add(lineItem);
    params.put("line_items", lineItems);
    
    params.put("success_url", "https://example.com/success");
    params.put("cancel_url", "https://example.com/cancel");
    
    Session session = Session.create(params);
    
    // Set your secret key: remember to change this to your live secret key in production
    // See your keys here: https://dashboard.stripe.com/account/apikeys
    const stripe = require('stripe')('sk_test_4eC39HqLyjWDarjtT1zdp7dc');
    
    (async () => {
      const session = await stripe.checkout.sessions.create({
        submit_type: 'donate',
        payment_method_types: ['card'],
        line_items: [{
          name: 'T-shirt',
          description: 'Comfortable cotton t-shirt',
          images: ['https://example.com/t-shirt.png'],
          amount: 500,
          currency: 'usd',
          quantity: 1,
        }],
        success_url: 'https://example.com/success',
        cancel_url: 'https://example.com/cancel',
      });
    })();
    
    // Set your secret key: remember to change this to your live secret key in production
    // See your keys here: https://dashboard.stripe.com/account/apikeys
    stripe.Key = "sk_test_4eC39HqLyjWDarjtT1zdp7dc"
    
    params := &stripe.CheckoutSessionParams{
        SubmitType: stripe.String("donate"),
        PaymentMethodTypes: stripe.StringSlice([]string{
            "card",
        }),
        LineItems: []*stripe.CheckoutSessionLineItemParams{
            &stripe.CheckoutSessionLineItemParams{
                Name: stripe.String("T-shirt"),
                Description: stripe.String("Comfortable cotton t-shirt"),
                Amount: stripe.Int64(500),
                Currency: stripe.String(string(stripe.CurrencyUSD)),
                Quantity: stripe.Int64(1),
            },
        },
        SuccessURL: stripe.String("https://example.com/success"),
        CancelURL: stripe.String("https://example.com/cancel"),
    }
    
    session, err := session.New(params)
    
    // Set your secret key: remember to change this to your live secret key in production
    // See your keys here: https://dashboard.stripe.com/account/apikeys
    StripeConfiguration.ApiKey = "sk_test_4eC39HqLyjWDarjtT1zdp7dc";
    
    var options = new SessionCreateOptions {
        SubmitType = "donate",
        PaymentMethodTypes = new List<string> {
            "card",
        },
        LineItems = new List<SessionLineItemOptions> {
            new SessionLineItemOptions {
                Name = "T-shirt",
                Description = "Comfortable cotton t-shirt",
                Amount = 500,
                Currency = "usd",
                Quantity = 1,
            },
        },
        SuccessUrl = "https://example.com/success",
        CancelUrl = "https://example.com/cancel",
    };
    
    var service = new SessionService();
    Session session = service.Create(options);
    

    In this example (for a 5 USD donation), your customized Checkout submit button would read Donate $5.00. See the API Reference for a complete list of submit_type options.

    Localization and supported languages

    By default, Checkout detects the locale of the customer’s browser and displays a translated version of the page in their language, if it is supported. You can also provide a specific locale for Checkout to use instead by providing the locale argument when creating a Checkout Session using the client-only or client and server integration.

    Checkout also uses the locale to format numbers and currencies. For example, when selling a product whose price is set in EUR with the locale set to auto, a browser configured to use English (en) would see €25.00 while one configured for German (de) would see 25,00 €.

    Billing address collection

    You can specify whether Checkout should collect the customer’s billing address by setting billingAddressCollection in the redirectToCheckout call. If set to required, Checkout will always collect the customer’s billing address. If not set or set to auto Checkout will only collect the billing address when necessary.

    stripe.redirectToCheckout({
      items: [
        // Replace with the ID of your SKU
        {sku: 'sku_123', quantity: 1}
      ],
      successUrl: 'https://example.com/success',
      cancelUrl: 'https://example.com/cancel',
      billingAddressCollection: 'required',
    }).then(function (result) {
      // If `redirectToCheckout` fails due to a browser or network
      // error, display the localized error message to your customer
      // using `result.error.message`.
    });
    
    const {error} = await stripe.redirectToCheckout({
      items: [
        // Replace with the ID of your SKU
        {sku: 'sku_123', quantity: 1}
      ],
      successUrl: 'https://example.com/success',
      cancelUrl: 'https://example.com/cancel',
      billingAddressCollection: 'required',
    })
    // If `redirectToCheckout` fails due to a browser or network
    // error, display the localized error message to your customer
    // using `error.message`.
    

    You can specify whether Checkout should collect the customer’s billing address by setting billing_address_collection when creating a Checkout Session. If set to required, Checkout will always collect the customer’s billing address. If not set or set to auto Checkout will only collect the billing address when necessary.

    curl https://api.stripe.com/v1/checkout/sessions \
      -u sk_test_4eC39HqLyjWDarjtT1zdp7dc: \
      -d billing_address_collection=required \
      -d "payment_method_types[]"=card \
      -d "line_items[][name]"=T-shirt \
      -d "line_items[][description]"="Comfortable cotton t-shirt" \
      -d "line_items[][images][]"="https://example.com/t-shirt.png" \
      -d "line_items[][amount]"=500 \
      -d "line_items[][currency]"=usd \
      -d "line_items[][quantity]"=1 \
      -d success_url="https://example.com/success" \
      -d cancel_url="https://example.com/cancel"
    
    # Set your secret key: remember to change this to your live secret key in production
    # See your keys here: https://dashboard.stripe.com/account/apikeys
    Stripe.api_key = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
    
    session = Stripe::Checkout::Session.create(
      billing_address_collection: 'required',
      payment_method_types: ['card'],
      line_items: [{
        name: 'T-shirt',
        description: 'Comfortable cotton t-shirt',
        images: ['https://example.com/t-shirt.png'],
        amount: 500,
        currency: 'usd',
        quantity: 1,
      }],
      success_url: 'https://example.com/success',
      cancel_url: 'https://example.com/cancel',
    )
    
    # Set your secret key: remember to change this to your live secret key in production
    # See your keys here: https://dashboard.stripe.com/account/apikeys
    stripe.api_key = 'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
    
    session = stripe.checkout.Session.create(
      billing_address_collection='required',
      payment_method_types=['card'],
      line_items=[{
        'name': 'T-shirt',
        'description': 'Comfortable cotton t-shirt',
        'images': ['https://example.com/t-shirt.png'],
        'amount': 500,
        'currency': 'usd',
        'quantity': 1,
      }],
      success_url='https://example.com/success',
      cancel_url='https://example.com/cancel',
    )
    
    // Set your secret key: remember to change this to your live secret key in production
    // See your keys here: https://dashboard.stripe.com/account/apikeys
    \Stripe\Stripe::setApiKey('sk_test_4eC39HqLyjWDarjtT1zdp7dc');
    
    $session = \Stripe\Checkout\Session::create([
      'billing_address_collection' => 'required',
      'payment_method_types' => ['card'],
      'line_items' => [[
        'name' => 'T-shirt',
        'description' => 'Comfortable cotton t-shirt',
        'images' => ['https://example.com/t-shirt.png'],
        'amount' => 500,
        'currency' => 'usd',
        'quantity' => 1,
      ]],
      'success_url' => 'https://example.com/success',
      'cancel_url' => 'https://example.com/cancel',
    ]);
    
    // Set your secret key: remember to change this to your live secret key in production
    // See your keys here: https://dashboard.stripe.com/account/apikeys
    Stripe.apiKey = "sk_test_4eC39HqLyjWDarjtT1zdp7dc";
    
    Map<String, Object> params = new HashMap<String, Object>();
    
    params.put("billing_address_collection", "required");
    
    ArrayList<String> paymentMethodTypes = new ArrayList<>();
    paymentMethodTypes.add("card");
    params.put("payment_method_types", paymentMethodTypes);
    
    ArrayList<HashMap<String, Object>> lineItems = new ArrayList<>();
    HashMap<String, Object> lineItem = new HashMap<String, Object>();
    lineItem.put("name", "T-shirt");
    lineItem.put("description", "Comfortable cotton t-shirt");
    lineItem.put("amount", 500);
    lineItem.put("currency", "usd");
    lineItem.put("quantity", 1);
    lineItems.add(lineItem);
    params.put("line_items", lineItems);
    
    params.put("success_url", "https://example.com/success");
    params.put("cancel_url", "https://example.com/cancel");
    
    Session session = Session.create(params);
    
    // Set your secret key: remember to change this to your live secret key in production
    // See your keys here: https://dashboard.stripe.com/account/apikeys
    const stripe = require('stripe')('sk_test_4eC39HqLyjWDarjtT1zdp7dc');
    
    (async () => {
      const session = await stripe.checkout.sessions.create({
        billing_address_collection: 'required',
        payment_method_types: ['card'],
        line_items: [{
          name: 'T-shirt',
          description: 'Comfortable cotton t-shirt',
          images: ['https://example.com/t-shirt.png'],
          amount: 500,
          currency: 'usd',
          quantity: 1,
        }],
        success_url: 'https://example.com/success',
        cancel_url: 'https://example.com/cancel',
      });
    })();
    
    // Set your secret key: remember to change this to your live secret key in production
    // See your keys here: https://dashboard.stripe.com/account/apikeys
    stripe.Key = "sk_test_4eC39HqLyjWDarjtT1zdp7dc"
    
    params := &stripe.CheckoutSessionParams{
        BillingAddressCollection: stripe.String("required"),
        PaymentMethodTypes: stripe.StringSlice([]string{
            "card",
        }),
        LineItems: []*stripe.CheckoutSessionLineItemParams{
            &stripe.CheckoutSessionLineItemParams{
                Name: stripe.String("T-shirt"),
                Description: stripe.String("Comfortable cotton t-shirt"),
                Amount: stripe.Int64(500),
                Currency: stripe.String(string(stripe.CurrencyUSD)),
                Quantity: stripe.Int64(1),
            },
        },
        SuccessURL: stripe.String("https://example.com/success"),
        CancelURL: stripe.String("https://example.com/cancel"),
    }
    
    session, err := session.New(params)
    
    // Set your secret key: remember to change this to your live secret key in production
    // See your keys here: https://dashboard.stripe.com/account/apikeys
    StripeConfiguration.ApiKey = "sk_test_4eC39HqLyjWDarjtT1zdp7dc";
    
    var options = new SessionCreateOptions {
        BillingAddressCollection = "required",
        PaymentMethodTypes = new List<string> {
            "card",
        },
        LineItems = new List<SessionLineItemOptions> {
            new SessionLineItemOptions {
                Name = "T-shirt",
                Description = "Comfortable cotton t-shirt",
                Amount = 500,
                Currency = "usd",
                Quantity = 1,
            },
        },
        SuccessUrl = "https://example.com/success",
        CancelUrl = "https://example.com/cancel",
    };
    
    var service = new SessionService();
    Session session = service.Create(options);
    

    Was this page helpful?

    Thank you for helping improve Stripe's documentation. If you need help or have any questions, please consider contacting support.

    On this page