!Built With Stencil

@stripe-elements/stripe-elements

Maintainers

| Maintainer | GitHub | Social |
| --- | --- | --- |
| Hidetaka Okamoto | Hidetaka Okamoto | @hide__dev |
| Masaki Hirano | hirano | @maki_saki |
| Masahiko Sakakibara | rdlabo | @rdlabo |

Installation

Components

$3

Provide a Stripe Card form like a iOS/Android payment sheet.

https://github.com/stripe-elements/stripe-elements/blob/main/src/components/stripe-payment-sheet/readme.md

$3

Simple modal for

https://github.com/stripe-elements/stripe-elements/blob/main/src/components/stripe-element-modal/readme.md

$3

(Beta) Payment Request button component

https://github.com/stripe-elements/stripe-elements/blob/main/src/components/stripe-payment-request-button/readme.md

Usage

$3

``html



publishable-key="pk_test_xxxxx"
show-label="false"
intent-client-secret="pi-xxxxxx"
should-use-default-form-submit-action="false"
>



`

$3


`javascript
const stripePublishableAPIKey = 'YOUR_STRIPE_PUBLISHABLE_API_KEY'

const form = document.getElementById('open-modal-form')
const resultElement = document.getElementById('result')
const errorMessage = document.getElementById('error-message')
const targetElement = document.getElementById('stripe');
const modalElement = document.createElement('stripe-element-modal');

/**
* Remove Mounted Stripe Elements when the modal has been closed
**/
customElements.whenDefined('stripe-element-modal')
.then(() => {
modalElement.addEventListener('close', () => {
modalElement.innerHTML = ''
})
})

async function launchStripePaymentSheet (paymentIntentClientSecret) {
if (!stripePublishableAPIKey) {
errorMessage.innerText = 'Stripe Publishable API Key is required'
return
}
if (!paymentIntentClientSecret) {
errorMessage.innerText = 'Payment Intent Client Secret is required'
return
}

/**
* Define and launch Web Components
**/
const stripeElement = document.createElement('stripe-payment-sheet');
modalElement.appendChild(stripeElement);
targetElement.appendChild(modalElement);

/**
* Wait for defining these components
**/
await customElements.whenDefined('stripe-element-modal')
await customElements.whenDefined('stripe-payment-sheet')

/**
* Load Stripe Client
**/
await stripeElement.initStripe(stripePublishableAPIKey)


/**
* Set the payment intent client secret
**/
stripeElement.setAttribute('intent-client-secret', paymentIntentClientSecret)

/**
* Disable default form submit event
**/
stripeElement.setAttribute('should-use-default-form-submit-action', false);

/**
* Set custom form submit event manually
**/
stripeElement.addEventListener('formSubmit', async props => {
const {
detail: { stripe, cardNumber, event },
} = props;
const result = await stripe.createPaymentMethod({
type: 'card',
card: cardNumber,
});
resultElement.innerHTML =

${JSON.stringify(result,null,2)}

stripeElement.updateProgress('success');
await modalElement.closeModal()
});

/**
* Open modal
**/
modalElement.setAttribute('open', true)
})
`

Contribution

$3


`bash
npm install
npm start
`

To build the component for production, run:

`bash
npm run build
`

To run the unit tests for the components, run:

`bash
npm test
``