接入 Stripe

如果你的国际业务里包含接受付款服务，那你可能会用到 Stripe

引入 stripe.js

1	<script src="https://js.stripe.com/v3/"></script>

也可以通过 module 的方式引入

1	npm install @stripe/stripe-js

创建 Stripe 实例

通过 Stripe(publishableKey, options?) 方法创建实例

从 Server 请求得到 publishableKey 以及 client_secret（确认支付时会用到）

1	var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

如果是使用 module 方式引入，则：

npm install @stripe/stripe-js

import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

创建 Elements 实例

Elements 实例可以用来收集一些敏感信息

1	var elements = stripe.elements();

创建 card 类型的 Element

如果是以 card 进行支付，可以通过 elements.create(‘card’,options?) 创建收集 card 信息的 Element

1	var cardElement = elements.create(‘card’);

将 card Element 挂载到 DOM 上

使用 element.mount(domElement) 方法

<!— Mount the instance within a <label> —>
<label>Card
  <div id=“card-element”></div>
</label>

<!—
  Or create a <label> with a ‘for’ attribute,
  referencing the ID of your container.
—>
<label for=“card-element”>Card</label>
<div id=“card-element”></div>

<script>
  cardElement.mount(‘#card-element’)’
</script>

监听 Element

cardElement.on(‘change’, function(event) {
  if (event.complete) {
    // enable payment button
  } else if (event.error) {
    // show validation to customer
  }
});

确认支付

stripe.confirmCardPayment(clientSecret,data?,options?)

需要传入 client_secret 以及 payment_method

stripe
  .confirmCardPayment(‘{PAYMENT_INTENT_CLIENT_SECRET}’, {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: ‘Jenny Rosen’,
      },
    },
  })
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });