• Payments/
    Payment Gateways/
    Integrate Payment Request API

    Integrate Payment Request API

    Payment Request API is a browser API that standardizes the checkout flow across the web. It also expedites the payment process by capturing required payment information. For a demo on how Payment Request API works with Elastic Path Commerce Cloud, visit GitHub.


    If you want to follow along, you need the following items:

    • A Commerce Cloud account
    • Configured products and gateway
    • An access token


    For gateway and browser support, consult the Payment Request API documentation.

    Integration steps summary

    1. Configure products through the Commerce Manager or API.
    2. Configure the payment gateway through Commerce Manager or API.
    3. Integrate Payment Request API with your project.

    Process workflow

    The client application created with the Commerce Cloud API calls the Payment Request API and passes to the browser cart details needed for checkout. The end user can check out using their pre-configured card option (i.e. card and shipping details that are already stored in their browser). After validation, the data is passed back and processed by Commerce Cloud API and your configured gateway.

    Integrate with Commerce Cloud

    Use the Commerce Cloud API to create a checkout flow. See the JavaScript SDK for more API interactions. At minimum, you’ll need:

    • Ability to add items to a cart.
    • Ability to check out a cart.
    • Ability to show the Payment Request API.
    • Ability to pay for an order using data returned from Commerce Cloud and Payment API.

    Configure the checkout flow

    On the Commerce Cloud side, make sure you have the basic checkout flow configured. As part of which, you’ll need to add the ability to add items to a cart.

    async function addToCart() {
      try {
        // Get all products in your store
        const products = await Moltin.Products.All();
        const product = products.data[0];
        // Add the first product to the cart
        await Moltin.Cart.AddProduct(product.id);
        // Get the cart items
        this.cartItems = Moltin.Cart.Items();
      } catch (e) {
        // Handle errors

    In the following example the quantity field defaults to 1, and as such is not provided.

    Implement payment detail

    Integrate the new Payment Request API directly into the Commerce Cloud checkout flow by building a new PaymentRequest object using the constructor.

    // Accept a basic debit or credit card
    const paymentMethods = [{ supportedMethods: ['basic-card'] }];
    // Request the customer for the name, email address
    const options = { requestPayerEmail: true, requestPayerName: true };
    // Build a summary of the order items from the moltin cart response
    const displayItems = this.cartItems.data.map((item) => {
      const newItem = {};
      newItem.label = item.name;
      newItem.amount = {
        currency: item.meta.display_price.with_tax.value.currency,
        value: item.meta.display_price.with_tax.value.formatted.substring(1),
      return newItem;
    // Build our PaymentRequest object
    const payment = new PaymentRequest(paymentMethods, {
      total: {
        label: 'Total',
        // Show the cart totals
        amount: {
            currency: this.cartItems.meta.display_price.with_tax.currency,
            value: this.cartItems.meta.display_price.with_tax.formatted.substring(1),
    }, options);

    The first argument defines the accepted payment method, credit card.

    Next, we pass in the items to display. These are cart items returned from the Commerce Cloud API. It allows us to show a breakdown of the order cost in the Payment Request UI.

    The optional third argument is an object specifying which, if any, additional information is required from the customer. We want to get their name and email address to create an order with Commerce Cloud.

    Display the Payment Request UI

    Call the show() method on the PaymentRequest object to display the UI so that the end user can provide their billing information required to finalize the transaction.

    The payment and address information is then collected from the UI and used by Commerce Cloud to create an order.

    To create a successful order, Commerce Cloud uses Moltin.Cart.Checkout() call and the previously specified and enabled gateway (this example uses Stripe).

    async completeOrder() {
      try {
        // Show the payment capture UI
        const paymentResponse = await payment.show();
        // Build the moltin address payload from the PaymentRequest response
        const address = {
    first_name: paymentResponse.details.billingAddress.recipient.split(' ')[0],
    last_name: paymentResponse.details.billingAddress.recipient.split(' ')[1],
    line_1: paymentResponse.details.billingAddress.addressLine[0],
    city: paymentResponse.details.billingAddress.city,
    postcode: paymentResponse.details.billingAddress.postalCode,
    county: paymentResponse.details.billingAddress.region,
    country: paymentResponse.details.billingAddress.country,
        // Checkout our cart and create an order
        const order = await Moltin.Cart.Checkout({
    customer: {
      name: paymentResponse.payerName,
      email: paymentResponse.payerEmail,
    shipping_address: address,
    billing_address: address,
        // Pay for the order with Stripe
        await Moltin.Orders.Payment(order.data.id, {
    gateway: 'stripe',
    method: 'purchase',
    first_name: paymentResponse.details.cardholderName.split(' ')[0],
    last_name: paymentResponse.details.cardholderName.split(' ')[1],
    number: paymentResponse.details.cardNumber,
    month: paymentResponse.details.expiryMonth,
    year: paymentResponse.details.expiryYear,
    verification_value: paymentResponse.details.cardSecurityCode,
      } catch (e) {
        // Handle errors

    Hide the Payment Request UI

    To finish the flow and hide the UI, call the complete() method on the PaymentRequest object.

    // Complete the `PaymentRequest`
    return paymentResponse.complete();

    Was this helpful?

    Integrate Apple Pay