如何消除 Google Pay 模态框的困惑？自定义选项和最佳实践

2024-03-02 22:26:02

自定义 Google Pay 模态框：消除付款困惑

简介

在使用 Stripe 延迟付款时，Google Pay 模态框中令人困惑的措辞可能会阻碍用户的理解。本博客文章探讨了自定义模态框或构建更直观 UI 的方法，以解决此问题。

问题：难以理解的模态框

使用 Stripe 意图 API 创建延迟付款时，Google Pay 模态框显示的文本为“支付 [您的公司] $0”，按钮上写着“支付”。然而，此时用户实际上并未进行付款，只是保存了付款信息。这可能会造成混乱，因为用户可能不理解他们需要采取的后续步骤。

解决方案：自定义选项

1. 探索 Google Pay 定制选项

目前，Google Pay API 不允许直接定制模态框文本。一种解决方法是使用 Stripe Checkout UI。它提供了一个更可定制的结账体验，包括模态框文本。

2. 构建自定义 UI

如果需要完全控制支付体验，可以构建自己的自定义 UI。创建一个解释付款流程并允许用户保存付款信息的页面或弹出窗口。当用户准备好付款时，使用 Stripe.js 客户端库手动触发付款。

3. 使用 Stripe 结账

Stripe 结账是一个高度可定制的结账解决方案。它提供了一个预建 UI，你可以根据自己的品牌进行样式化。结账流程完全可控，因此你可以自定义付款按钮的文本和行为。

示例代码

使用 Stripe 结账自定义模态框：

stripe.redirectToCheckout({
  lineItems: [{
    price: 'your-price-id',
    quantity: 1
  }],
  mode: 'payment',
  successUrl: 'https://example.com/success',
  cancelUrl: 'https://example.com/cancel',
  billingAddressCollection: 'auto',
  shippingAddressCollection: 'auto'
})

使用 Stripe.js 手动创建自定义 UI：

const stripe = Stripe('your-public-key');

const elements = stripe.elements({
  clientSecret: 'your-client-secret'
});

const paymentElement = elements.create('payment');

paymentElement.mount('#payment-element');

const form = document.getElementById('payment-form');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  stripe.confirmSetup({
    paymentElement: paymentElement,
    billingDetails: {
      address: {
        line1: '123 Main Street',
        city: 'Anytown',
        state: 'CA',
        postalCode: '12345'
      }
    }
  }).then(({ setupIntent }) => {
    // Save setupIntent for later use
  });
});