card-vault

Allow your project to submit for payment using a saved payment method.

Usage

This component requires no dependencies, use the <card-vault/> HTML custom element where you wish to display. Ensure to import the script somewhere on your page.

Consume the chosen event, which gets emitted when a saved method is chosen by the user.

<script async src="/card-vault.js"></script>

<card-vault></card-vault>

<div>
   Chosen:
   <pre id="payload"></pre>
</div>
<script>
   el = document.querySelector('card-vault')
   output = document.querySelector('#payload')
   el.addEventListener('chosen', function (payload) {
     //Set into state for submission in your checkout flow
         setIntoState(payload);
   })
</script>

</script>

API Options

Properties and events that can be used to interface with this Web Component.

Properties

Property	Attribute	Type	Default	Description
`configurable`		`boolean`
`demo`	`demo`	`boolean`	false	Boolean value to define whether or not the component is in the demo environment, defaults to false.
`editable`	`editable`	`boolean`	false	Boolean value to define whether or not the component is in an editable state (I.e. on the my account page).
`endpoint`	`data-endpoint`	`string`	""	Your integration api endpoint, should contain sub endpoints as below - GET `/cards` - Should return your customers saved cards - DELETE `/cards/:guid` - Should remove a card from the saved cards store - PUT `/cards` - Should add a new card without making a payment, will accept a nonce in the body - POST `/cards/:guid` - Should set the card to default No Trailing slashes here please
`enumerable`		`boolean`
`open`	`open`	`boolean`	true	Boolean value to define whether or not the component instantiates in an open state. Defaults to open.
`paymentClientToken`	`data-payment-client-token`	`string`	"sandbox_rz3g8yvc_649mdpp3m8crdkrh"	Payment client token used to render the payment ui component, you'll request this from your payment integration api on render of the page containing the component.
`token`	`data-token`	`string`	""	Your user's JWT token for request headers to your api where it will be signed.

Events

Event	Description
`chosen`	Dispatched when a saved method is selected, listen for this event and use the guid to submit for payment with a saved method.
`complete`
`error`	Handle the human readable display of an error.