Stripe - Support Payment Link for Checkout

Overview

In the previous version, customers could subscribe to a Stripe Plan in a few different ways: through UM Register Forms, a direct subscribe URL (found in WP Admin > Ultimate Member > Stripe Plans), and a Subscribe button using a UM Stripe shortcode.

With the introduction of Stripe's Payment Link feature, we gain access to enhanced button settings that enable us to display icons of supported payment methods, select specific line items, customize quantities, modify the button's appearance, and even include a client_reference_id to associate it with a UM Stripe Plan. Additionally, this feature allows us to assign user roles based on each subscription status.

Note: The payment links only support subscription-based payments. Further details are provided below.

Setup

To set up the Stripe Payment Link, you have to follow the steps below:

1. Go to your Stripe dashboard.
2. In the side navigation menu, locate the "Products" section and click on the "Payments" drop-down.
3. From the options, select "Payment Links."

   

4. You’ll then be redirected to the payment links page. Click the '+Create test payment link' or "+New" buttons.

   

5. On the Create a payment link page, select the type of your payment link, in this example, we have selected 'Products or subscriptions.' In the payment page tab, below the product, choose whether you want to add a new product or select an existing one.

   

6. Now, in the "After payment" tab below the confirmation page, select “Don’t show confirmation page” and add the Stripe success page URL of your website, including this checkout URL parameter: ?umm_stripe_sid={CHECKOUT_SESSION_ID} (e.g https://yoursite.com/stripe-payment-successful/?umm_stripe_sid={CHECKOUT_SESSION_ID}). Click the 'Create link' button.

   

7. After clicking the create link button, you’ll be redirected to the payment link page for your product. If you use the link as is, it will not directly go to the Stripe Checkout page and will not connect with Ultimate Member.
8. Click on the "+URL parameters" button to add a parameter. You must use the parameter below to make the payment link compatible with the UM Stripe extension:
   • um_stripe_custom_checkout_46

   Note: The 46 represents the Stripe Plan ID, which can be found in WP Admin > UM > Stripe Plans.

   Note: This only supports the Subscription products. One-time payment doesn’t create Stripe customer through the Payment Link’s checkout.

   

9. Select the "Client reference ID" from the options and enter the parameter including the Stripe plan ID e.g. um_stripe_custom_checkout_46 in the field. The URL below is the payment link that you can copy and use.

   

10. After copying the Payment Link, you can place it in any preferred location, such as a button or a direct URL link. 

11. Clicking the link will then direct your users to the Stripe Checkout page, where they will see the product price and complete the payment process.

Customize Payment Link Button

1. On your product payment link page on the Stripe dashboard, click the "Buy button."
   
2. You can configure the buttons if you want them to be button-type or card-type.

   

3. Copy the Buy button code.

   

4. Paste the code to your site, but you must add the attributes below and include the Stripe Plan ID at the end:
   • ?client-reference-id="um_stripe_custom_checkout_46”
   Example:

   <script async
     src="https://js.stripe.com/v3/buy-button.js">
   </script>
   
   <stripe-buy-button
     buy-button-id="buy_btn_1OgwRZHPd2HMKvM3NSGL5KrO"
     publishable-key="pk_test_51MnimtHPd2HMKvM3spM4adoI3RO4DbdRKU05zh4PsF0ZugoVCf53XDKgKnJGJNvd4vHOR3fjiRawBX223hj0Rjbj00RyUJsTtg"
   >
    ?client-reference-id="um_stripe_custom_checkout_46”
   </stripe-buy-button>
   	

   

5. Once you have pasted the code to your site, the button should redirect you to the stripe checkout page with the product price.