The steps below outline the work required on the front-end of your store to enable Stripe payments with Elastic Path Commerce. These instructions make use of Stripe Payment Elements.
In Elastic Path Commerce, a shopper's payment details (such as a specific credit card, bank account, etc) is known as a payment instrument. Payment instruments can be added to a shopper's profile, or to an account profile (for B2B scenarios), or added to a shopping cart for single-use.
To add a payment instrument to a shopper's profile, lookup the Stripe payment method resource from the profile resource in Cortex. To add a payment method to an account, lookup the Stripe payment method resource from the account resource. To add a payment method to a shopping cart, lookup the Stripe payment method resource from the cart order resource. In each of these cases, the Stripe payment method can be identified using the name that was specified when configuring the Stripe payment plugin.
From the payment method resource, follow the
requestinstructionsform link. Post to the
requestpaymentinstructionsaction link with an empty request body, and the response will be a JSON blob containing a
client_secret value and a
Follow the Stripe Payment Element instructions to display the UI for collecting payment details. You will need the publishable key from your Stripe Dashboard and the client secret from Cortex. For an example of how to set this up, see the Elastic Path Stripe Payment Flow test harness.
After the payment details are collected, make sure to call
stripe.confirmSetup as described in the guide above, and then call
stripe.retrieveSetupIntent to collect the
Next, return to the payment method resource in Cortex and follow the
paymentinstrumentform link. This form will request
display-name can be set to any value that the shopper will recognize if they want to use this payment instrument again in the future. The
customer_id should be set to the
customer_id value that was returned from the Cortex
requestpaymentinstructionsaction response. The
payment_method_id value should be set to the
payment_method value returned by
stripe.retrieveSetupIntent. Post these values to the
If you added this payment instrument to the shopping cart, it will be selected automatically. Otherwise, when the shopper is ready to select a payment instrument, you can retrieve the list of saved payment instruments using the
paymentinstrumentselector link on the cart order resource. Post to the
selectaction link to associate it to the shopping cart.