Saved Payment Method Creation

Create a Saved Payment Method at Checkout

It is possible to create the saved payment method for the customer as part of the Authorize or AuthorizeAndCapture transaction during checkout. To do so add shouldSavePaymentForFutureUse=true when creating the Payment:

const paymentMethod = stripeResponse.paymentMethod;
...

{
  ...
  shouldSavePaymentForFutureUse: true,
  gatewayType: "STRIPE",
  type: "CREDIT_CARD",
  paymentMethodProperties: {
    "PAYMENT_METHOD_ID": paymentMethod.id,
    "SETUP_FUTURE_USAGE": "on_session" (1)
  },
  displayAttributes: {
    creditCardType: paymentMethod.card.brand.toUpperCase(),
    creditCardNumber: `****${paymentMethod.card.last4}`,
    creditCardExpDateMonth: `${paymentMethod.card.exp_month}`
    creditCardExpDateYear: `${paymentMethod.card.exp_year}`
  },
  isSingleUsePaymentMethod: true,
  ...
}

Possible enum values: on_session or off_session. Defaults to on_session if no value is provided. Use on_session if you intend to only reuse the payment method when your customer is present in your checkout flow. Use off_session if your customer may or may not be present in your checkout flow.

Create a Saved Payment Method with SetupIntent

To create a saved payment method without executing a transaction (e.g. for a "My Account" payment management section), leverage a Stripe SetupIntent in the following way:

POST /api/payment/stripe/setup-intent

{
    customerEmail: 'customerEmail',
    stripeCustomerId: 'stripeCustomerId',
    additionalFields: {
        "USAGE": "on_session" // (1)
    }
}

Possible enum values: on_session or off_session. Defaults to on_session if no value is provided. Use on_session if you intend to only reuse the payment method when your customer is present in your checkout flow. Use off_session if your customer may or may not be present in your checkout flow.

Note	If the Stripe customer id is not provided, then a new Stripe customer will be created using the `customerEmail`.

It is also possible to use useCreateSetupIntentRequest(…) from the payment SDK to send this request, for example:

const { createSetupIntent} = useCreateSetupIntentRequest(...);

const setupIntentRequest: SetupIntentRequest = {
    customerEmail: customerEmail,
    additionalFields: {
        "USAGE": "on_session"
    }
};

const setupIntentResponse = await createSetupIntent( setupIntentRequest );

Use the response to create the Saved Payment Method:

import {
  useStripe,
  useElements,
  CardNumberElement,
} from '@stripe/react-stripe-js';

const stripe = useStripe();
const elements = useElements();

const setupIntentResponse ...

    if (setupIntentResponse) {
      const billing_details = {
        ...billingAddress,
        email: customerEmail,
      };

      const paymentMethodResponse = await stripe.createPaymentMethod({
        type: 'card',
        card: elements.getElement(CardNumberElement),
        billing_details,
      });

      if (!isEmpty(paymentMethodResponse.error)) {
        setSetupIntentError(true);
        return;
      }

      stripe
        .confirmCardSetup(setupIntentResponse.clientSecret, {
          payment_method: paymentMethodResponse.paymentMethod.id,
        })
        .then(function (result) {
          if (result.error || result.setupIntent.status !== 'succeeded') {
            setSetupIntentError(true);
          } else {
              const savedPaymentMethodRequest = {
                name: 'Saved Payment Method Name',
                billingAddress: billingAddress,
                owningUserType: 'BLC_CUSTOMER',
                owningUserId: 'customer_id',
                gatewayType: 'STRIPE',
                displayAttributes: {
                    creditCardHolder: 'Credit Card Holder Name',
                    creditCardNumber: `****${paymentMethodResponse.paymentMethod.card.last4}`,
                    creditCardExpDateMonth: `${paymentMethodResponse.paymentMethod.card.exp_month}`,
                    creditCardExpDateYear: `${paymentMethodResponse.paymentMethod.card.exp_year}`,
                },
                paymentMethodProperties: {
                    PAYMENT_METHOD_ID: result.setupIntent.payment_method,
                    CUSTOMER_ID: setupIntentResponse.stripeCustomerId
                },
              });

              // addSavedPaymentMethod - can be obtained from our payment SDK - useAddSavedPaymentMethod(). It creates the saved payment method in PaymentTransactionServices
              await addSavedPaymentMethod(savedPaymentMethodRequest);
          }
        });
    }