Checkout Options

The craft.charge.setCheckoutOptions() is designed for usage on payment forms that use the Stripe Checkout modal.

It works exactly like the [craft.charge.setPaymentOptions()](http://squarebit.co.uk/software/craft/charge/usage/reference/payment-options) tag, with a few extra features and options specific to using the Stripe Checkout Modal.

When you're using the setCheckoutOptions() tag you don't need to add any extra javascript to the page, everything that's needed to run the full checkout modal is directly included in with the tag.


Usage

Simply include the craft.charge.setPaymentOptions({..}) inside your payment form. Like so:

<form method="post" id="charge-form">
   <input type="hidden" name="action" value="charge/charge"/>

   {{ craft.charge.setCheckoutOptions({ planAmount: 99.99 }) }}
</form>

This will do 3 primary things :

  1. It sets the hidden opts input which includes the encrypted details for the request.
  2. It adds the markup for the checkout button.
  3. It adds the required javascript to trigger the modal, and further interactions.

Options

All the standard Plan Option parameters are supported. Use those to configure the specifics of the payment.

In addition to those, the following checkout specific options are available:

includeButton bool, defaults to true
Set to false to stop the method including a checkout button. You can use this if you want to run your own customised checkout javascript handling. Removing the button also removes the normally included stripe checkout.js checkout Array
An array or parameters which are mapped directly to data-* attributes on the generated checkout button. The full details of the supported parameter keys you can pass is detailed in the Stripe checkout documentation.

Within the checkout array the most commonly customised values are:

description String, eg. 1 x Product
The description label that's shown at the top of the modal. This value is also saved against the charge as description.
image String, eg. 'http://site.com/image.jpg'
A url for the image to show at the top of the modal. This is most commonly the icon for your site or product being sold.
label String, eg. 'Buy Now'
An override for the text in the included button.
name String, eg. 'Acme ltd.'
The name for your company which will show at the top of the modal.

 Example

An example usage of these values would be:

<form method="post" id="charge-form">
   <input type="hidden" name="action" value="charge/charge"/>

   {{ craft.charge.setCheckoutOptions({ 
          planAmount: 99.99,
          checkout: { 
               name: 'Acme ltd.',
               label: 'Buy Now!',
               description: '1 x Awesome Product',
               image: 'https://oursite.com/assets/logo.png'
          }
   }) }}
</form>