2024年7月11日
By: Chase

Learning Stripe[draft]

Instrudtion

I got a fulltime job recently, and I need to take charge of the payment module.

They deside to use stripe, I'll record my learning.

Documents

There are 3 different documents, let's get a clear understanding of what it is for first.

  • basic doc, which introduces the stripe comprehensive, and includes parts about integration. You can also find some basic demos on its Github from here.
  • JS doc, as its name, it's only for the frontend.
  • API doc, it's only for the backend.

Don't make a confusion about the JS Doc and API doc, in which I made a mistake for this, and waste some time.

I think the documentation is very detailed but it's not a very good reading experience for developers, and I often have to jump around between 3 documents.

Install

check here

yarn add @stripe/stripe-js

Development

Verification From frontend

Customer the Card

https://docs.stripe.com/js/appendix/style

Customer UI for the PaymentElement

https://docs.stripe.com/elements/appearance-api

For the simple style customization, select a theme is enough.

 elements = stripe.elements({
    clientSecret: ...,
      appearance: {
      theme: 'night',
      labels: 'floating',
      variables: {
        colorBackground: '#060606',
        colorPrimary: '#F0CA41',
        colorDanger: '#E74D3C',
        spacingUnit: '2px',
        borderRadius: '5px',
        fontSizeBase: '14px',
      },
      rules: {
        '.Input': {
          outline: 'none',
          border: 'none',
          borderRadius: '0',
        },
        '.Input:focus': {
          outline: 'none',
          border: 'none',
          borderBottom: '1px solid #F0CA41',
          boxShadow: 'none',
        },
      }
    }
 })

图-0

Display the payment

https://docs.stripe.com/api/payment_methods/object

backend:

const setupIntent = await stripe.setupIntents.create({
  customer: customerId,
  // more than 70 kinds
  payment_method_types: ['card', 'sepa_debit']
});

Add Event Listen of the StripeJS element

https://docs.stripe.com/js/element/events/on_change?type=paymentElement

Tags: stripe